在 MVC 的同一视图中填充第二个模型：防止回发

Question

我在 MVC 中有一个页面，我需要在其中显示记录的详细信息。 需要从我分别拥有模型的 2 个表中获取记录。 现在，对于需要这两个模型的这个页面，我创建了另一个模型，其中引用了这两个模型。

[请注意，以下命名仅供参考。]

public class CombinedModel
{
    public Model1 objModel1 { get; set; }
    public Model2 objModel2 { get; set; }
}

在视图 [Details.cshtml] 中，我有以下代码：

@model Application.Web.Models.CombinedModel

<div>
    @Html.Label("Label text: ", htmlAttributes: new { @class = "control-label" })
    @Html.DisplayFor(model => model.objModel1.Property1, new { htmlAttributes = new { @class = "form-control" } })
</div>

还有一个弹出代码

<div id="Modal">
    <div>
        @Html.Label("Popup label text:", htmlAttributes: new { @class = "control-label" })
        @Html.DisplayFor(vmodel => vmodel.objModel2.Property2, new { htmlAttributes = new { @class = "form-control" } })
    </div>
 </div>

页面通过控制器操作成功加载了第一个模型中的数据。 我需要弹出代码中的数据，仅当用户单击特定记录时，View 将从那里发送 ID 并显示来自第二个模型的该特定 ID 的记录。

在控制器中：

public class ControllerNameController : Controller
 {
    [HttpGet]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
    [ValidateInput(false)]
    public ActionResult Details(int? Id, string strType, string strVersionID)
    {
        var Details1 = db.Table1.FirstOrDefault(rd => rd.SomeID == Id);
        CombinedModel modelCombined = new CombinedModel();
        Model1 objectM1 = new Model1();
        objectM1.Property1 = Details1.Column1;


        var VersionDetails = db.Table2.FirstOrDefault(rvd => rvd.somePrimaryKeyID == Convert.ToInt32(strVersionID));
        if (VersionDetails != null)
        {
            Model2 objectM2 = new Model2();
            objectM2.vCreatedOn = VersionDetails.Property2;
            modelCombined.objModel2 = objectM2;
            ViewBag.VersionID = VersionDetails.VersionID;
        }

        modelCombined.objModel1 = objectM1;
        return View(rmodel);
    } 

 }

页面登陆网址是：

function JavascriptFunctionInParentView(IDToPass, strTypeToPass)
 {
    top.location.href = "@Url.Action("Details", "ControllerName")" 
                        + "?Id=" + IDToPass
                        + "&strType='" + strTypeToPass + "'"
                        + "&strVersionID='0'";
 }

所以，当第一次加载页面时，我们将 strVersionID 设为零。因此，它不会进入 VersionDetails 块，只填写 Model1 数据。

现在，当我们进入详细信息页面时，有一个网格，我需要从中填充弹出窗口中的版本详细信息，我的工作代码如下：

 function recordDoubleClickRuleVersion(args) {
            top.location.href = "@Url.Action("Details", "ControllerName")" 
                                + "?Id=" + @Url.RequestContext.HttpContext.Request.QueryString["Id"]
                                + "&strType=" + '@Url.RequestContext.HttpContext.Request.QueryString["strType"]'
                                + "&strVersionID=" + args.data.VersionID;
 }

// ....

$(function () {
        if ('@(ViewBag.VersionID)' == "") {
            $("#Modal").ejDialog("close");
        }
        if ('@(ViewBag.VersionID)' != "") {
            $("#Modal").ejDialog(
                     { enableModal: true, enableResize: false, close: "onDialogClose", width: "60%" });
            $("#Modal").ejDialog("open");
        }
    })

我的问题是，当我调用此版本详细信息弹出窗口时，页面回发，然后数据来了。我知道我已经给它@Url.Action，所以它的行为方式是这样的。 我需要它通过完整的客户端代码，我也尝试了以下代码。它会打开弹出窗口，但不会在其中填充值。

$.ajax({
        type: "GET",
        data: ({
                "Id": @Url.RequestContext.HttpContext.Request.QueryString["Id"],
                "strType": '@Url.RequestContext.HttpContext.Request.QueryString["strType"]',
                "strVersionID": args.data.VersionID }),
        url: '@Url.Action("RuleDetails", "Rules")',
    })
    .done(function (RuleVersionDetails) {
        // 1. Set popup 
        $("#Modal").ejDialog(
         { enableModal: true, enableResize: false, close: "onDialogClose", width: "60%" });
        // 2. Open popup 
        $("#Modal").ejDialog("open");
    });

你能告诉我解决方法吗？

Answer 1

您可以更改您的 Details() 操作以返回一个 Json 对象，然后用它填充对话框。

$.ajax({
    type: "GET",
    data: ({
            "Id": @Url.RequestContext.HttpContext.Request.QueryString["Id"],
            "strType": '@Url.RequestContext.HttpContext.Request.QueryString["strType"]',
            "strVersionID": args.data.VersionID }),
    url: '@Url.Action("RuleDetails", "Rules")',
})
.done(function (jsonData) {
    // **TODO: file dialog with properties of jsonData**
    // 1. Set popup 
    $("#Modal").ejDialog(
     { enableModal: true, enableResize: false, close: "onDialogClose", width: "60%" });
    // 2. Open popup 
    $("#Modal").ejDialog("open");
});

Answer 2

最适合您的情况的方法是使用引导模式。转到 here 并检查其文档以及如何配置。如果您不熟悉 bootstrap 或 modal，那真的值得学习。

但请记住，当您希望将数据发送到模态部分时，请根据您在网格中的项目 ID 使其动态化。