ASP.NET Core 2.2 剃须刀视图中的操作按钮答案

【问题标题】：Action buttons in ASP.NET Core 2.2 razor viewASP.NET Core 2.2 剃须刀视图中的操作按钮
【发布时间】：2020-02-18 04:24:20
【问题描述】：

假设我们正在重新设计下面的视图：

目前的代码是：

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Url)
        </td>
        <td>
            <a asp-action="Edit" asp-route-id="@item.BlogId">Edit</a> |
            <a asp-action="Details" asp-route-id="@item.BlogId">Details</a> |
            <a asp-action="Delete" asp-route-id="@item.BlogId">Delete</a>
        </td>
    </tr>
}

我们的目标是删除每行链接的Delete 视图。相反，我们希望有一个删除按钮，在确认后删除行而不离开Index 页面（重新加载很好）。

如何实现这样的按钮？有没有相关文件？

【问题讨论】：

有一个删除按钮，在确认后删除行而不离开索引页面听起来你指的是客户端逻辑，它的基础是 Javascript。有大量的基本框架可让您构建功能丰富的 UI 客户端体验。
进行 ajax 调用，成功完成后，从 DOM 中删除表格行。

标签： razor asp.net-core asp.net-core-mvc

【解决方案1】：

您可以使用 ajax 发出删除请求，以便用户可以在删除过程中停留。 ajax 请求成功后，您可以从 UI 中删除表格行。

首先，为你的锚标签添加一个新属性，你可以用它来为你的 jQuery 选择器连接点击事件。

<a asp-action="Delete" ajaxy asp-route-id="@item.BlogId">Delete</a>

这里我添加了一个名为ajaxy的属性

现在我们将使用 ajaxy 属性在锚标签上监听 click 事件，停止正常行为（导航到 href 属性值 URL），而是进行 ajax 调用。要进行确认，您可以使用window.confirm API。

@section Scripts
{
    <script>

        $(function () {
            $("a[ajaxy]").click(function (e) {
                e.preventDefault();

                if (window.confirm("Are you sure ?")) {

                    var $this = $(this);
                    var url = $this.attr("href");
                    $.post(url).done(function (res) {
                        $this.closest("tr").fadeOut(300, function (a) {
                            $(this).remove();
                        });
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        alert("error in ajax call!" + errorThrown);
                    })
                }
            });
        });

    </script>
}

假设您的 Delete 操作接受 Id 参数。

[HttpPost]
public async Task<IActionResult> Delete(int id)
{
   // to do : return something     
}

【讨论】：

【解决方案2】：

如果您只想删除额外的“删除”视图，您可以将删除代码从删除页面移动到索引页面并使用简单的 html 表单。例如

<form method="post" asp-page-handler="Delete" class="btn-group-sm" >
    <a asp-page="./Edit" asp-route-id="@item.Id" class="btn btn-warning">Edit</a> 
    <a asp-page="./Details" asp-route-id="@item.Id" class="btn btn-info">Details</a> 
    <input type="hidden" asp-for="@item.Id" />
    <input type="submit" value="Delete" class="btn btn-danger" onclick="return confirm('Are you sure you wish to delete this q-Section?')" />
</form>

将“OnPost”函数重命名为“OnPostDelete”，它将起作用。您可以对详细信息页面上的“删除”按钮执行相同操作。问候肯。

【讨论】：