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标记。

因此，我们添加一个action方法，该方法将返回确认模式所需的HTML。

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

并在ConfirmDelete.cshtml局部视图中（该视图是严格类型为Horse对象的），您将在其中呈现模式对话框的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接受为参数，并将其传递给view，而不是再次查询表）。视情况通过ViewBag / Viewmodel传递。是你的电话。

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

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

现在添加相关的JavaScript来启动此模式。我们将使用CSS类别modal-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标记中包含一个form标记。因此，让我们添加更多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"});
    }
}

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

1 个答案: