Popup window in MVC5?

Question

Hi i have two fields in my view CustomerName (TextBox) and ContactPerson(dropdown) and i have one add button near to ContactPerson which is mentioned in the below image.

If i type and select the CustomerName the CustomerName related ContactPerson will load automatically in contact person dropdown. Suppose if the contact person is not list means i will click that Plus(+) button it will open he pop-up window to add the Customer related contact person. The pop-up window which is mention in the below image.

Now my issue is if i select the customername and and click the + button means it will pass the customername in the pop-up window. But here it passing the CustomerID instead of customer name which is mention in the image.

Before I kept the Cistomer Name as dropdown so when i click the + button it will pass the value . which is mention in the below image.

Code which i kept as dropdown.

View Code

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

Jquery Code

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

Now i change that dropdown as autocomplete textbox for user friendly.. In this i cant able to pass the value as text . it pass the value as id format to pop-up window which is mention in the second image.

My view model

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

My View

@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" })

My jquery code for opening the modal

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

When i Click the + button it will pass the CustomerID instead of customer name. This is the issue. Anyone help me to resolve this issue. I want to pass the customer name but here it passing the customer ID in pop-up window. Any one help me to resolve this issue.

Answer 1

Your using a jQuery-ui autocomplete plugin for the CustomerID property which hides the textbox that @Html.DropDownListFor(model => Model.CustomerID, ...) generates and replaces it with its own html. You need to use the values from the plugin to get both the value and display text. You have not shown how you have attached the plugin, but assuming its

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

then you can add a global variables and in the select event, set the values which you can then pass to the modal

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;
    }
});

and then the code to open the dialog

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