Question

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

[请注意，以下命名法仅用于举例目的。]

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数据。

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

 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

你可以改变你的细节（）动作返回一个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

您的案例的最佳方法是使用bootstrap modal.Go here并检查其文档以及如何配置。如果你不熟悉bootstrap或modal，那真的值得学习。

但请记住，当您想要将数据发送到模态部分时，请根据网格中的商品ID将其设为动态。

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

2 个答案: