Question

您好我在我的视图CustomerName（TextBox）和ContactPerson（下拉列表）中有两个字段，我在ContactPerson附近有一个添加按钮，如下图所示。

如果我输入并选择CustomerName，则会在联系人下拉列表中自动加载与CustomerName相关的ContactPerson。假设联系人不是列表意味着我将点击该加号（+）按钮，它将打开弹出窗口以添加与客户相关的联系人。弹出窗口，如下图所示。

现在我的问题是，如果我选择客户名，然后单击+按钮表示它将在弹出窗口中传递客户名称。但是在这里它传递了CustomerID而不是图像中提到的客户名称。

在我将Cistomer Name保留为下拉列表之前，当我点击+按钮时它将传递该值。如下图所示。

我保留为下拉列表的代码。

查看代码

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

Jquery代码

         $("#modal-opener").click(function () {
            debugger
            var Customerid = $("#CustomerID").val();
            $('#customer').val(Customerid).val();
             $('#customername').text($('#CustomerID option:selected').text());
            $("#dialog-modal").dialog("open");
        });

现在我将该下拉列表更改为自动填充文本框以方便用户使用..在此我无法将值作为文本传递。它将值作为id格式传递给弹出窗口，这在第二张图片中提到。

我的观点模型

public Nullable<System.Guid> CustomerID { get; set; }
public string CustomerName { get; set; }
public Nullable<System.Guid> CustomerContactID { get; set; }
....

我的观点

@Html.LabelFor(model => Model.CustomerName, new { @class = "control-label" })
@Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control required" })
@Html.HiddenFor(model => Model.CustomerID)

@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">
        <div>Customer Name</div>
        <div id="customername"></div>
        @Html.HiddenFor(m => m.CustomerID, new { id = "customer" })
        @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>
@Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control required", type = "text", id = "CustomerContactID" })

我打开模态的jquery代码

$("#modal-opener").click(function () {
    debugger
    var Customerid = $("#CustomerID").val();                          
    $('#customer').val(Customerid).val();                          
    $('#customername').text(Customerid).text();              
    $("#dialog-modal").dialog("open");
});

当我点击+按钮时，它将传递CustomerID而不是客户名称。这是问题所在。任何人都可以帮我解决这个问题。我想传递客户名称，但是在弹出窗口中传递客户ID。任何人都可以帮我解决这个问题。

Answer 1

您使用CustomerID属性的jQuery-ui自动完成插件，该插件隐藏了@Html.DropDownListFor(model => Model.CustomerID, ...)生成的文本框，并将其替换为自己的html。您需要使用插件中的值来获取值和显示文本。你没有展示你如何附加插件，但假设它

$('#CustomerID').autocomplete({
    ....
});

然后你可以添加一个全局变量，并在select事件中设置你可以传递给模态的值

var customerID;
var customerName;

$('#CustomerID').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetVisitCustomer", "VisitorsForm")',
            datatype: "json",
            data: {
                Areas: 'Sales',
                term: request.term
            },
            success: function (data) {
                response($.map(data, function (val, item) {
                    return {
                        label: val.Name,
                        value: val.ID,
                    }                                     
                }))
            }
        })
    },
    select: function (event, ui) {
        customerID = ui.item.value;
        customerName = ui.item.label;
    }
});

然后打开对话框的代码

 $("#modal-opener").click(function () {                         
    $('#customer').val(CustomerID);                          
    $('#customername').text(customerName);              
    $("#dialog-modal").dialog("open");
})

MVC5中的弹出窗口？

1 个答案: