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

Question

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

家长视图

在我的父视图中，我有两个字段。客户名称和ContactPerson。两者都是下拉列表。两个都是级联下拉列表。如果我选择一个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生成下拉列表（因为它已在主视图中选中），而是为所选{添加隐藏输入{1}}（因此可以发布到控制器）和所选客户名称的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

附注：您应该检查html是否存在其他潜在的重复$("#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"); }); 属性（例如，父视图和子视图似乎都具有id属性的表单控件）并根据需要进行更改