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

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

目前的代码是：

@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>
}

@foreach（模型中的变量项）{
@DisplayFor（modelItem=>item.Url）
编辑|
细节|
删去
}

我们的目标是删除每行中链接的

Delete

视图。相反，我们希望有一个删除按钮，在确认后删除行，而不离开

索引

页面（重新加载即可）

---

人们将如何实施这种按钮？还有相关文档吗？

您可以使用ajax发出删除请求，以便用户可以在删除过程中留下来。一旦ajax请求成功，就可以从UI中删除表行

首先，向锚定标记添加一个新属性，您可以使用它作为jQuery选择器连接单击事件

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

假设您的

Delete

操作接受

Id

参数

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

[HttpPost]
公共异步任务删除（int-id）
{
//做：归还某物
}

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

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

---

关于Ken。

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

<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>