Asp.Net Core 5.0 在局部视图中使用 jQuery

Question

我正在使用带有 Ajax 的局部视图在主视图上显示用户数据。脚本从主视图运行。

现在我想在部分结果中添加一个“删除”按钮，但在部分视图中编写带有 ajax 调用的脚本时遇到问题。

如何通过jQuery和Ajax处理部分表单数据来解决这个问题？

这是我的部分观点：

@foreach (var i in Model.Users)
{

        <div>
            <form id="deletForm">
                <input name="Id" id="Id" value="@i.Id" hidden />
                <input name="UserId" id="userId" value="@i.ApplicationUserId" hidden />
                <button type="submit" class="close-icon" id="deleteBtn"></button>
            </form>
            <div class="class" data-toggle="tooltip" title="@i.ApplicationUser.FullName">@i.ApplicationUser.Name.ToUpper()</div>
        </div>
    
}



<script>
    $("#deleteBtn").click(function (e) {
        e.preventDefault();
        var formdata = $("#deletForm").serialize();
        alert(formdata);
        alert('I got here');

    });
</script>

Answer 1

现在我想在部分结果中添加一个“删除”按钮，但是在部分视图中编写带有 ajax 调用的脚本时遇到问题。

请注意，您将<form id="deletForm"> 放在局部视图中的@foreach 循环中，这会导致许多html 元素具有相同的id 属性。

为了达到您的要求，您可以尝试修改如下代码。

局部视图

@foreach (var i in Model.Users)
{

    <div>
        <form class="deletForm">
            <input name="Id" value="@i.Id" hidden />
            <input name="UserId" value="@i.ApplicationUserId" hidden />
            <button type="submit" class="close-icon deleteBtn"></button>
        </form>
        <div class="class" data-toggle="tooltip" title="@i.ApplicationUser.FullName">@i.ApplicationUser.Name.ToUpper()</div>

}

在主视图中

<script>
    $(function () {
        $(".deleteBtn").click(function (e) {
            e.preventDefault();
            var formdata = $(this).parent(".deletForm").serialize();
            alert(formdata);
            alert('I got here');

            //code logic here of making ajax request(s)
        })
    })
</script>