如何使用 ajax 调用删除数据库行并更新页面中的 table？

Question

我的页面中有一个 table，其内容是根据数据库条目填充的。我使用 foreach 循环 遍历数据库行并填充 table。最后一列有删除按钮，显示在每一行中。此按钮从 table.

中删除该特定行

int i = 1;    
foreach (var item in Model.messages as List<Message>)
    {    
    <tr>
            <td>@i</td>
                                                                
            <td>@dConverter.DateConverter(@item.messageDate.ToShortDateString())</td>
                                                                
            <td>@dConverter.GetTime(@item.messageDate.ToString())</td>
            <td>@Model.usersList.First(x => x.Id == item.senderId).department</td>
            <td>
                <a href="" class="message-link" data-toggle="modal" data-target="#myModal-@i">Open Message</a>
                <input type="hidden" id="msg-id-@i" value="@item.messageId"/>
            </td>
            <td><a type="button" style="color: red" class="message-link" id="del-@i">Delete</a></td>
        </tr>
i++;
    }

我想使用 ajax 调用来完成此任务：

<script>
    $(document).ready(function(){
        $('#del-@i').on("click", function(){
            var msgId = $('#msg-id-@i').val();
            var formData = new FormData();
            formData.append("messageId", msgId);

            $.ajax({
                type: "POST",
                url: "Messages/DeleteMessage",
                contentType: false,
                processData: false,
                data: formData,
                success: function(response){
                    if(response.success){
                        alert("The selected message removed.");
                    }else{
                        alert("Error!");
                    }
                }
            })
        });
    });
</script>

执行删除任务的操作代码是：

[HttpPost]
        public JsonResult DeleteMessage(int messageId) 
        {
            bool response = _messageRepository.DeleteMessageById(messageId);
            if(response == true)
            {
                return Json(new { success=true});
            }
            else
            {
                return Json(new { success=false });
            }
        }

问题是当我按下按钮时，没有任何反应。我尝试调试控制器中的动作，发现按下按钮时没有调用此动作。 ids 与 javascript 和剃须刀代码之间可能存在匹配错误。我该如何解决？

Answer 1

问题似乎是 javascript 中列出的 ids 不会包含 i 的正确值，因为脚本的生成不会发生在for loop.

** 这个答案利用了 jQuery 选择器 closest

以下是我建议的更改；

向其中包含 ID 的行添加一个属性。

    <tr msg-id="@item.messageId">

更改您的 js 以确定单击按钮的行并提取该 ID。

    $(document).ready(function(){
        $('.message-link').on("click", function(){
            var msgId = $(this).closest("tr").attr("msg-id");
            var formData = new FormData();
            formData.append("messageId", parseFloat(msgId));

            $.ajax({
                type: "POST",
                url: "Messages/DeleteMessage",
                contentType: false,
                processData: false,
                data: formData,
                success: function(response){
                    if(response.success){
                        alert("The selected message removed.");
                    }else{
                        alert("Error!");
                    }
                }
            })
        });
    });

如何使用 ajax 调用删除数据库行并更新页面中的 table？

How to use ajax call for deleting database rows and updating the table in the page?

ajax

asp.net-mvc

jquery