局部视图中带有模态绑定的 Ajax 模态弹出窗口

Question

我正在尝试寻找解决方案一段时间，但找不到...我有一个绑定到模式的部分视图，它在网格中显示数据。类似下面的东西

@model abc
@Html.Grid(Model)
{
    grid columns
    column with edit link
}

单击网格中的编辑链接，通过 ajax，我想在绑定到另一个模型的局部视图中显示弹出窗口。这个引导弹出窗口也应该通过模型绑定来绑定，因为我需要在点击弹出窗口的提交时执行服务器端验证

@model pqr
<div>
   popup window with grid columns displayed in form for editing.
</div>

任何有关示例代码的帮助都会有很大帮助。

Answer 1

可能还有其他方法可以做到这一点，但我以前做过这样的事情：

1. 您的编辑链接必须有 id 作为要作为参数传递给控制器​​的 id

2. 获取数据并将模型传递给填充属性的局部视图

   $(".YourEditLinkClass").click(function () {
      var id = $(this).attr('id');
      $.ajax({
         url: "@Url.Action("GetDataForPopUpWindow", "YourController")",
         type: "GET",
         dataType: "html",
         data: { id: id },
         success: function (data) {
             $("#modal_" + id).html(data);//target position of modal
             $('#pqr_' + id).modal('toggle');
           }
        });
   });
   

控制器代码：

public ActionResult GetDataForPopUpWindow(int id)
{
   using (YourDBContext)
   {
      var data = YourData;
      pqr pqrModel = new pqr();
      pqrModel.YourModelProperty = data.CorrespondingProperty;
      return PartialView("_GridPartialView", pqrModel);
   }
}

您的引导模式必须在名为 _GridPartialView 的局部视图中具有 id="pqr_@Model.Id" 的 ID。希望有道理。