Asp.Net Core MVC JQuery 模态删除按钮不起作用答案

【问题标题】：Asp.Net Core MVC JQuery Modal Delete Button Not WorkingAsp.Net Core MVC JQuery 模态删除按钮不起作用
【发布时间】：2021-07-12 02:57:24
【问题描述】：

我是 JQuery 和模态弹出窗口的新手。我正在尝试删除用户，当用户单击 bin 图标时，会出现模式并且我可以将其关闭。但是，当我单击“删除”按钮时，它不会执行任何操作。就像我单击它时没有任何反应，并且控制器中的“删除用户”操作也没有被触发。你能告诉我我做错了什么或我错过了什么吗？提前谢谢！

在我的控制器中：

//Deleting a user   
        [HttpGet]
        public async Task<IActionResult> DeleteUser(string Id)
        {
            var user = await _userManager.FindByIdAsync(Id);
            if (user == null)
            {
                ViewBag.ErrorMessage = "The User Account with ID: " + Id + " cannot be found :/";
                return View("NotFound");
            }

            return PartialView("_DeleteUserModalPartial", user);
        }


        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteUser(YouPodApplicationUser user)
        {
            var deletedUser = await _userManager.FindByIdAsync(user.Id);
            if (deletedUser == null)
            {
                ViewBag.ErrorMessage = "The User Account with ID: " + user.Id + " cannot be found :/";
                return View("NotFound");
            }

            var result = await _userManager.DeleteAsync(deletedUser);
            if (result.Succeeded)
            {
                return RedirectToAction("ListUsers");
            }

            foreach (var error in result.Errors)
            {
                ModelState.AddModelError("", error.Description);
            }
            return View("ListUsers");
        }
    }

在我的 ListUserPages 中每个用户的 bin 图标：

 <td>
                        
                        <a asp-controller="Admin" asp-action="EditUser" asp-route-userID="@user.Id"> <i class="fa fa-marker fa-lg"></i> </a>

                        <button type="button" class="text-danger ml-1" id="deleteUserModal" data-toggle="ajax-modal" data-target="#deleteUser" data-url="@Url.Action($"DeleteUser/{user.Id}", "Admin")" style="border: none; background: transparent"> <i class="fa fa-trash-alt fa-lg"></i> </button>
                       
</td>

在我的 DeleteUserModalPartial 中：


<div class="modal fade" id="deleteUser">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="deleteUser">Are you sure you want to delete this user account?</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span></span>
                </button>
            </div>

            <div class="modal-body">
                <form asp-action="DeleteUser" role="form" id="deleteUserForm">
                    <div class="form-group">
                        <input type="hidden" asp-for="@Model.Id" />
                    </div>
                    <div class="form-group">
                        <label asp-for="FirstName">First Name: @Model.FirstName</label>
                    </div>
                    <div class="form-group">
                        <label asp-for="LastName">Last Name: @Model.LastName</label>
                    </div>
                    <div class="form-group">
                        <label asp-for="UserName">Username: @Model.UserName</label>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="userDeleteButton">Delete</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

在 site.js 文件中：

//Delete user modal pop up
$(function () {

    var PlaceHolderElement = $('#PlaceHolderHere');
        
    $('button[data-toggle="ajax-modal"]').click(function (event) {

        var url = $(this).data('url');
        var decodedUrl = decodeURIComponent(url);
        $.get(decodedUrl).done(function (data) {

            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    });


    $("#userDeleteButton").click(function () {
        $("#deleteUserForm").submit();

    });
})

【问题讨论】：

标签： jquery asp.net-core-mvc bootstrap-modal

【解决方案1】：

我实际上只是替换了这部分：

   $("#userDeleteButton").click(function () {
            $("#deleteUserForm").submit();});

致以下……

PlaceHolderElement.on('click', '#userDeleteButton', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
        })
    });

而且它有效！现在唯一的限制是我需要刷新页面才能将用户从列表中删除。对此有何建议？谢谢！

【讨论】：