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

Question

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

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 Selector

以下是我建议的改变；

1. 将一个属性添加到具有ID的行中

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

2. 更改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!");
}
}
})
});
});