如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息

Posted

技术标签:

【中文标题】如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息【英文标题】:How do I display a confirmation message with trying to delete a record in ASP.NET Core using Razor Pages 【发布时间】:2019-12-14 19:46:51 【问题描述】:

我正在使用 Razor 页面,当用户单击删除按钮时似乎很难显示确认消息。

在我的 Index.cshtml 我有:

<a asp-page-handler="Delete" asp-route-id="@item.Id" id="deleteBtn" class="btn bg-danger mr-1"><i class="fas fa-trash-alt text-white"></i></a>

这些是作为 foreach 循环的一部分生成的。

我的删除方法:

public async Task<IActionResult> OnGetDelete(Guid id)

    if (id == null)
    
        return NotFound();
    

    var record = await _context.LoadTable.FindAsync(id);

    if (record != null)
    
        _context.LoadTable.Remove(record);
        await _context.SaveChangesAsync();
    

    return RedirectToPage("./Index");

我正在使用 Bootstrap,因此理想情况下希望使用它的模式来显示消息。显示消息不是问题,而是我需要停止触发该方法,直到用户确认这是他们想要做的事情,并且对于 Razor Pages,我似乎正在苦苦挣扎。

我的想法是在模式中使用删除按钮,而删除按钮显示模式,但我不确定如何传递 @item.Id。

或者使用 javascript 来拦截按钮点击?

【问题讨论】:

【参考方案1】:

你可以使用这个标签来调用你的删除处理程序。

<a asp-page-handler="Delete" asp-route-id="@item.Id"  onclick="return confirm('Are you sure you want to delete this?')">
                                <i class="trash"></i>
                            </a>

【讨论】:

你可以使用这个标签来调用你的删除处理程序【参考方案2】:

您可以为引导模式的数据目标属性和模式 id 指定不同的值,请参阅我的示例演示:

索引.cshtml

 @foreach (var item in Model.Cars)
    
        var tm = "#myModal" + item.Id;
        var mid = "myModal" + item.Id;
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>

            <td>
                <a asp-page="./Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.Id">Details</a> |

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm">
                    Delete
                </button>

                <div class="modal fade" id="@mid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
                            </div>
                            <div class="modal-body">
                                Are you sure want to delete this item?
                            </div>
                            <div class="modal-footer">
                                <a asp-page-handler="Delete" asp-route-Id="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

            </td>
        </tr>
    

【讨论】:

【参考方案3】:

亲爱的@Fullen,我看到了您的问题,并遇到了您想在删除操作调用之前使用带有确认消息的链接调用 OnGetDelete 操作的问题。这可能是我的代码帮助你。

<a href="~/YourControllerName/OnGetDelete?id=@item.id" id="deleteBtn" class="btn bg-danger mr-1" onclick="return confirm('Are you sure you want to delete?');"><i class="fas fa-trash-alt text-white"></i>Delete</a>

【讨论】:

【参考方案4】:

出于安全原因,我认为最好将按钮放入form 以执行DELETE 的操作

用这种方法,你可以试试:

<form asp-page-handler="Delete" method="OnGetDelete" asp-route-id="@item.Id" 
       onclick="return confirm('Are you sure you want to delete this?')">
  <button type="submit" class="btn btn-default"><i class="fas fa-trash-alt text-white"></i></button>
</form>

【讨论】:

以上是关于如何在尝试使用 Razor Pages 删除 ASP.NET Core 中的记录时显示确认消息的主要内容,如果未能解决你的问题,请参考以下文章

Razor Pages Anchor Tag Helper 不会从 href 中删除索引

Razor-Pages - HTML 标记

在使用Razor Pages时你还应该使用控制器吗?

如何在 Razor Pages 路由的开头添加应用程序名称?

如何在 ASP.NET Core Razor Pages 项目的 _layout.cshtml 文件中使用 Razor Page Using Entity Framework 作为部分视图?

如何使用 .NET Core 2 中的 Razor Pages 更改起始页?