javascript - 在 MVC 中的同一 View 中填充第二个模型 : Prevent postback

Question

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

[请注意，以下术语仅用于示例目的。]

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

在 View [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>

页面通过 Controller 操作成功加载第一个模型中的数据。 我需要在弹出代码中提供数据，只有当用户单击特定记录时，View 才会从其中发送 ID 并显示第二个模型中该特定 ID 的记录。

在 Controller 中:

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 block ，只填充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() Action 以返回 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");
});