如何将父视图的特定字段的值传递给 MVC4 中的子视图？

Question

您好，我必须将 Id（从特定字段中选择）从父视图传递到子视图。我会清楚地解释我的问题。

父视图

在我的父视图中，我有两个字段。客户名称和联系人。两者都是下拉菜单。两者都是级联下拉菜单。如果我选择 CustomerName，则与 CustomerName 相关的 ContactPerson 将自动加载到 ContactPerson 下拉列表中。

假设如果 ContactPerson 名称不在列表中，则意味着我将单击 ContactPerson 附近的 + 按钮。它将打开一个弹出窗口。弹出窗口在下面

弹出窗口（子视图）

现在一切正常。现在我有一个新问题。也就是说，如果我选择 CustomerName 然后选择 ContactPerson 但联系人姓名不在列表中。所以我点击 + 按钮，它将打开弹出窗口，同时它必须将 ID 从父视图（我在父视图 CustomerName 下拉列表中选择的 CustomerID）传递到 CustomerName 字段（在弹出窗口中窗口子视图）。我如何做到这一点。任何人都可以帮助我解决这个问题。我试图根据我的最佳水平解释我的问题任何理解我的问题的人都可以对这个问题提出一些解决方案或建议。

我的查看代码

父视图下拉列表

@Html.Label("Customer Name", new { @class = "control-label" })
@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

模态表单视图

<div class="col-sm-3">
    <span style="color: #f00">*</span>
    @Html.Label("Contact Person", new { @class = "control-label" })<a href="#" class="btn btn-primary" id="modal-opener" style="float: right; Width: 28px; height: 28px; ">+</a>
    <div id="dialog-modal" title="Add New Contact Person" style="display:none">
        <div class="box-body">
            @Html.Label("Customer Name")
            @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text", id = "CustomerName" })

            @Html.LabelFor(model => model.ContactPerson)
            @Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control", type = "text" })
            @Html.ValidationMessageFor(model => model.ContactPerson)

            ....

            <div class="box-footer">
                <input id="Button1" class="btn btn-primary" type="button" value="Save" onclick="SaveContact()" />
            </div>
        </div>
    </div>
</div>

我的 J-query 代码

$(function () {
    $("#modal-opener").click(function () {
        debugger
        $("#dialog-modal").dialog("open");
    });
    ....
})

提前谢谢。

Answer 1

您当前生成的 html 具有重复的 id 属性的 CustomerID 来自两个模式，这是无效的 html，因此首先您需要更改模型中的一个或其他属性名称或覆盖默认的 id视图中的一个或其他表单控件中的属性。

下一个问题是您不应该在弹出表单中为CustomerID 生成下拉列表（因为它已经在主视图中被选中），而是为选定的CustomerID 添加隐藏输入（因此可以将其发布到控制器）和<div> 元素用于选定的客户名称（然后您可以将其设置为看起来像一个文本框）。

将子（弹出）视图代码更改为

<div class="box-body">
    <div>Customer Name</div> // you don't have a control so a label is not appropriate
    <div id="customername"></div> // style this to look like a textbox
    @Html.HiddenFor(m => m.CustomerID, new { id = "customer" }) // add hidden input

    @Html.LabelFor(model => model.ContactPerson)
    @Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control", type = "text" })
    @Html.ValidationMessageFor(model => model.ContactPerson)

    .... // other controls

注意 id 赋予隐藏输入的属性，因此它不是重复的

然后修改你的脚本来打开模型

$("#modal-opener").click(function () {
    // set the value of the hidden input
    $('#customer').val($('#CustomerID').val());
    // set the value of the customer name
    $('#customername').text($('#CustomerID option:selected').text());
    // display the dialog
    $("#dialog-modal").dialog("open");
});

附注：您应该检查您的 html 中是否有其他可能重复的 id 属性（例如，父视图和子视图似乎都有 Email 属性的表单控件）并根据需要进行更改