ASP.NET Core 如何动态删除列表元素？答案

【问题标题】：ASP.NET Core How to dynamically remove list element?ASP.NET Core 如何动态删除列表元素？
【发布时间】：2020-11-28 18:11:25
【问题描述】：

我希望用户能够编辑订单并删除一些项目。为此，我为每个项目添加了一个删除按钮（您可以在下面的代码中看到它）。

部分视图 Views/Shared/EditorTemplates/Item.cshtml（属性 data-id 是硬编码的，因为我不知道如何传递当前的 OrderItem Id）：

@model TimeTracker.Models.OrderItem
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="Product" class="control-label"></label>
    <input asp-for="Product" class="form-control" />
    <span asp-validation-for="Product" class="text-danger"></span>
    <input class="btn btn-default" type="button" id="btnDel" data-id="1" value="Remove" />
</div>

在 ajax 调用中会出现控制台中的错误，它指的是控制器方法。在这里我假设我在ajax调用中错误地填写了参数data。我真的不知道如何正确填写。

加载资源失败：服务器响应状态为 405 () :5001/Orders/RemoveItem:1

Ajax 调用：

$("#btnDel").on('click', function () {
    $.ajax({
        async: true,
        data: { order: $('#form').serialize(), orderItemId: $('#btnDel').data('id') },
        type: "DELETE",
        url: '/TaskTypes/RemoveItem',
        success: function (partialView) {
            console.log("partialView: " + partialView);
            $('#itemsContainer').html(partialView);
        }
    });
});

控制器方法：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> RemoveItem([Bind("OrderItems")] Order order, int orderItemId)
{
    order.OrderItems.RemoveAll(c => c.Id == orderItemId);
    return PartialView("Items", order);
}

【问题讨论】：

405 表示方法不允许。现在，您的 ajax 调用类型为 DELETE，而您的端点属性为 [HttpPost]。你应该重新审视它并在那里进行更正。
@SaiGummaluri 当我尝试type: "POST" 时，我得到了 400 错误。
400 表示 错误请求。您在浏览器的控制台上看到任何错误吗？

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

【解决方案1】：

当您使用 ValidateAntiForgeryToken 时，您必须在 ajax 标头中传递 RequestVerificationToken 以验证您的请求。

请访问https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1了解有关防止跨站请求的更多详细信息。

【讨论】：