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循環中，這將導致許多具有相同id屬性的 html 元素。

為了達到您的要求，您可以嘗試修改如下代碼。

局部視圖

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