如何在 MVC 中打开模态弹出窗口时从列表中获取模态中的 Id

Question

我有记录列表的表格。当我单击删除链接时，我想打开带有相关记录名称的模式弹出窗口。

目前，它总是从模态中的列表中获取第一个记录值。

<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.HorseName)
</th>
<th>
@Html.DisplayName("Action")
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="name">
@item.HorseName
</td>
<td>
<a data-target="#HorseTrackerModal" data-toggle="modal" style="cursor:pointer">Delete</a>
<div class="modal fade" id="HorseTrackerModal" role="dialog">
<div id="dialogbox" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Are you sure you want to delete @item.HorseName?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="reset" data-dismiss="modal">No</button>
<a href="#" class="delete" data-id="@item.TrackerId" style="cursor:pointer"><button type="button" class="btn btn-secondary">Yes</button></a>
</div>
</div>
</div>
</div>
</td>
</tr>
}
</table>

脚本

var url = '@Url.Action("Delete", "HorseTracker")';
$(document).on('click','.delete',function(){
debugger;
var id = $(this).data('id');
var row = $(this).closest('tr');
$.post(url, { id: id }, function(response) {
if (response) {
row.remove();
}
}).fail(function (response) {
alert("Can not delete record!");
});
});

Answer 1

您当前的代码正在渲染集合中每个项目的模式对话框所需的 HTML 标记！这意味着浏览器必须解析和呈现甚至可能不会向用户显示的 HTML。始终尝试呈现最少的 HTML(更少的 DOM 节点(，以更接近提供快速的 Web 体验 🚀

恕我直言，您应该考虑一种懒惰/根据需要加载方法。这意味着，当用户单击删除链接时，您将呈现模式对话框所需的 HTML。您可以对服务器进行 ajax 调用，它将在其中呈现此 HTML 标记。

因此，让我们添加一个操作方法，它将返回确认模态所需的 HTML。

public ActionResult ConfirmDelete(int id)
{
var u = db.Horses.Find(id);
return PartialView(u);
}

在强类型化为 Horse 对象的ConfirmDelete.cshtml部分视图中，您将在其中呈现模式对话框的 HTML 标记。

@model YourNamespace.Horse
<div id="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm/h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h3>
Are you sure to delete @Model.Name
</h3>
</div>
<div class="modal-footer">
<form action="@Url.Action("Delete")" id="form-delete">
<input type="hidden" name="id" value="@Model.Id" />
<button type="submit" class="btn btn-primary">Delete</button>
<button type="button" class="btn" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>

在这里，我将实体对象传递给部分视图，如果需要，您可以将其更改为仅传递您作为参数收到的Id。(您也可以接受名称和 id 作为参数并将其传递给视图，而不是再次查询表(。根据需要通过ViewBag/Viewmodel传递。这是你的召唤。

让我们对在主视图中列出数据的 HTML 标记进行一些调整。首先，我将尝试为每个表行提供一个 ID，以便稍后当用户通过模式对话框确认删除操作时，我们可以删除此表行。我将给出 Id 值的"row-{item.Id}"格式。

<table>
@foreach (var item in Model)
{
<tr id="[e-mail]">
<td> @item.HorseName</td>
<td>
<a class="modal-link" 
href="@Url.Action("ConfirmDelete",new { id=item.Id})">Delete</a>
</td>
</tr>
}
</table>

现在添加相关的 JavaScript 来启动这个模态。我们将监听任何带有 CSS clasmodal-link的链接元素，读取href值并对该 url 进行 ajax 调用(ConfirmDelete操作(。一旦我们得到响应，我们将调用modal方法(HTML 标记回来了(

$(function () {
$('body').on('click', 'a.modal-link', function (e) {
e.preventDefault();
$("#modal").remove();
var url=$(this).attr("href");
$.get(url, function (data) {
$(data).modal();
});
});
// to do : handle "delete form"
});

现在，当用户单击删除链接时，他们将看到确认对话框。确认操作返回的 HTML 标记内部有一个表单标记。因此，让我们添加更多 JavaScript 代码来处理这个问题。

// to do : handle "delete form"部分替换为以下代码。

$(document).on("submit", "#form-delete", function (e) {
e.preventDefault();
var url =$(this).attr("action");
var data = $(this).serialize();
var id = $(this).find("[name='id']").val();
var $row =$('#row-'+id);  // Get the table row
$.post(url, data).done(function (res) {
if(res.status==="success")
{
$row.fadeOut();
$("#modal").modal('hide');
}
else
{
alert(res.message);
}
});
});

假设您的Delete操作返回如下所示的 JSON 响应

[HttpPost]
public ActionResult Delete(int id)
{
try
{
// to do : code to remove from db
return Json(new { status = "success"});
}
catch(Exception ex)
{
// to do : log ex
return Json(new { status = "error", message = "Error deleting"});
}
}