Question

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

当前代码为：

@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页面（重新加载就可以了）。

如何实现这种按钮？还有相关文件吗？

Answer 1

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

首先，在锚标记中添加一个新属性，您可以将其用于jQuery选择器以连接click事件。

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

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

现在，我们将使用此click属性在锚标记上监听ajaxy事件，停止正常行为（导航到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     
}

Answer 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”，它将起作用。您可以对详细信息页面上的“删除”按钮执行相同的操作。问候肯。

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

2 个答案: