时间戳

首页 > 解决方案 > ASP.NET Core 如何动态删除列表元素？

ajax - ASP.NET Core 如何动态删除列表元素？

问题描述

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

部分视图 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 调用中会出现控制台中的错误，它指的是控制器方法。这里我假设我data在 ajax 调用中填写的参数不正确。在我的情况下，我真的不知道如何正确填写。

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

阿贾克斯调用：

$("#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);
}

标签： ajaxasp.net-coreasp.net-core-mvc

解决方案

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

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

推荐阅读