The value is displaying two times in drop down after adding the data using pop-up window in MVC4?

Hi i like to explain my issue with perfect example. I have two drop downs in my view one is CustomerName and another one is ContactPerson if i select the CustomerName the customer name related ContactPerson will load automatically in contact person drop down. its like cascading drop down.

Suppose if i select the CustomerName and select the ContactPerson and the contact person name is not in the list means i have to add that. so i kept one add button near to contact person. if the contact person name is not in the list means i click that add button it open the partial view as popup window(i created one partial view and call that view in pop-up window).

Partial View Popup window

Now i enter all the details and click the create button. it will save the value in db and i close the pop-up window.Now here only i got issue. That is after closing the popup window and if i select the contact person i shows the value two times in drop down but it save in db one time correctly. value showing Two times

In the above image you people can see the value is displaying two times after adding the value using popup window.This is the issue. please any one help me to clear this issue.

My View Model

   public class VisitorsViewModel
   {
    public Nullable<System.Guid> CustomerID { get; set; }
    public string CustomerName { 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; }
    }

I created the properties for both partial view(child view) and main view(parent view) in same View Model.

My controller code to save data which is entered in pop-up window.

 public ActionResult ContactPersonPartialView()
   {
    ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName");   
    return View("ContactPersonPartialView");
   }
    [HttpPost]

 public JsonResult ContactPersonCreate(VisitorsViewModel VVviewmodel)
   {
     ViewBag.CustomerID = new SelectList(db.Customers, "CustomerID", "DisplayName", VVviewmodel.CustomerID);
        var ContactIDObj = Guid.NewGuid();
        var CustomerContactIDObj = Guid.NewGuid();

        var CustomerContactObj = new CustomerContact()
        {
            CustomerContactID = CustomerContactIDObj,
            CustomerID = VVviewmodel.CustomerID,
            ContactReference = VVviewmodel.ContactPerson,
            ContactID = ContactIDObj,
            IsActive = true,
            IsDeleted = false,
            CreatedDate = DateTime.Now,
            EditedDate = DateTime.Now,
            LastActiveOn = DateTime.Now,
            RowID = Guid.NewGuid(),
            CreatedSessionID = Guid.NewGuid(),
            EditedSessionID = Guid.NewGuid(),
            OfflineMode = false,
            OfflineID = Guid.NewGuid()
        };
        var ContactObj = new Contact()
        {
            ContactID = ContactIDObj,
            DisplayName = VVviewmodel.CustomerID.ToString(),
            PrintName = VVviewmodel.CustomerID.ToString(),
            Phone1 = VVviewmodel.PhoneNo,
            Mobile1 = VVviewmodel.MobileNo,
            Email1 = VVviewmodel.Email,
            Email2 = VVviewmodel.AlternateEmail

        };

        db.Contacts.Add(ContactObj);
        db.CustomerContacts.Add(CustomerContactObj);
        db.SaveChanges();
        ModelState.Clear();
       return Json(CustomerContactIDObj);
       }

My Parent View Code

 @Html.Label("Employee Name", new { @class = "control-label" })
 @Html.DropDownList("EmployeeID", null, "Select", new { @class = "form-control" })

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

 @Html.Label("Contact Person", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })
            <button id="AddContactPerson">Add </button>
             <div id="AddNewContactPerson"></div>

My Main View J query code to open popup window

   $(function () {
     $('#AddNewContactPerson').dialog({
       autoOpen: false,
       width: 400,
       height:500,
       resizable: false,
       title: 'Add New',
       modal: true,
       open: function(event, ui) {
       $(this).load("@Url.Action("ContactPersonPartialView", "VisitorsForm")");
       },
       buttons: {
       "Close": function () {
        $(this).dialog("close");
        }
        }
    });

        $("#AddContactPerson").click(function () {
        $("#AddNewContactPerson").dialog("open");
       });
       });

My Partial View code

        @Html.Label("Customer Name")
        @Html.DropDownList("CustomerID", null, "Select", new { @class = "form-control " ,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)


  <script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
  <link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
  <script type="text/javascript">
   function SaveContact() {
    debugger;
    var CustomerID = $("#Customer").val();
    var ContactPerson = $("#ContactPerson").val();
    var Email = $("#EmailID").val();
    var AlternateEmail = $("#AlternateEmail").val();
    var PhoneNo = $("#PhoneNo").val();
    var MobileNo = $("#MobileNumber").val();
    alert(CustomerID);
    alert(Email);
    alert(MobileNo);

    var CustomerContact = {
        "ContactPerson":  '' +ContactPerson+'', "Email": '' +Email+ '',
        "AlternateEmail": '' +AlternateEmail+ '', "PhoneNo": '' +PhoneNo+ '',
        "MobileNo": ''+ MobileNo+ '', "CustomerID": ''+CustomerID+''
        };
   $.post("/VisitorsForm/ContactPersonCreate", CustomerContact, function (data) {
   $('#CustomerContactID').append($('<option><option>').val(data).text(ContactPerson));

        alert("sucess");
   });
   }

I hope i try my level best to tell my issue with you peoples please any one give me solution to solve this problem. I know that my issue is too long but any one understand my issue and give me solution.

Advance Thanks...

Answers 1

  • Replace

    $('#CustomerContactID').append($('<option>option>').val(data).text(ContactPerson));
    

    with

    var option = new Option(ContactPerson, data);
    $('#CustomerContactID').append($(option));
    

Related Articles