Popup window in MVC5?

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 model (Visitors View Model)

    public Nullable<System.Guid> CustomerID { get; set; }
    public string CustomerName { get; set; }
    public Nullable<System.Guid> CustomerContactID { get; set; }
    public Nullable<System.Guid> ContactID { get; set; }
    public string ContactPerson { get; set; }
    public string PhoneNo { get; set; }
    public string MobileNo { get; set; }
    public string Email { get; set; }
    public string AlternateEmail { 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)

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

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

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

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

<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

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

        function onSuccess() {
            $("#dialog-modal").dialog("close");
        }


    $(function () {
            debugger
            $("#dialog-modal").dialog({
                resizable: false,
                width: 500,
                maxHeight: 800,
                draggable: true,
                dialogClass: 'main-dialog-class',
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                },
                open: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
                },
                close: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.html('');
                },
            });
          });

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.

Advance thanks..