Partial view is not working correctly in mvc4?

Question

Hi i have one field called contact person in my view. i kept one add button near to that field if i click that button the partial view will appear as pop-up window.

My PartialView

If i enter the details and click the save button it comes to the post action to save the data. Now i got 2 issues in that.

1) The Value of CustomerName will be null.

2) After i click create button in popup window after enter the details either it have to show the same popup window or it have to show the parent view(Visitors Form) i got issue in this step. In this place it redirect to main window of partial view. which is mentioned in below image. i tried my level best to explain my issue . please any one help me to resolve this issue.

Error Op

Error Output

My View Code

 @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 ContactPerson</button>
  <div id="AddNewContactPerson"></div>

My j-query wrote in parent view

    $(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");
    });
  });

Controller Code

 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(new
      //{
      //    redirectUrl = Url.Action("create", "VisitorsForm"),
      //    isRedirect = true
      //});
      return Json("VisitorsForm", JsonRequestBehavior.AllowGet);
  }

I donno how to redirect to same pop-up window partial view or to parent view please any one correct my redirect controller code.

My Partial View Code

  <div id="AddNewContactPerson">

    @Html.Label("Customer Name")
    @Html.DropDownList("CustomerID", "Select")

    @Html.LabelFor(model => model.ContactPerson)
    @Html.EditorFor(model => model.ContactPerson)
    @Html.ValidationMessageFor(model => model.ContactPerson)

    @Html.LabelFor(model => model.Email)
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)

    @Html.LabelFor(model => model.AlternateEmail)
    @Html.EditorFor(model => model.AlternateEmail)
    @Html.ValidationMessageFor(model => model.AlternateEmail)

    @Html.LabelFor(model => model.PhoneNo)
    @Html.EditorFor(model => model.PhoneNo)
    @Html.ValidationMessageFor(model => model.PhoneNo)

    @Html.LabelFor(model => model.MobileNo)
    @Html.EditorFor(model => model.MobileNo)
    @Html.ValidationMessageFor(model => model.MobileNo)

    <p>
        <input type="submit" value="Create" onclick="SaveContact()" />
    </p>

   </div>
   </form>

  </fieldset>
  }

  <div>
  @Html.ActionLink("Back to List", "Index")
  </div>
  <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() {
    var CustomerName = $("#CustomerID").val();
    var ContactPerson = $("#ContactPerson").val();
    var Email = $("#Email").val();
    var AlternateEmail = $("#AlternateEmail").val();
    var PhoneNo = $("#PhoneNo").val();
    var MobileNo = $("#MobileNo").val();
    var CustomerContact = {
        "ContactPerson": ContactPerson, "Email": Email,
        "AlternateEmail": AlternateEmail, "PhoneNo": PhoneNo,
        "MobileNo": MobileNo, "CustomerID": CustomerName
    };

    $.post("/VisitorsForm/ContactPersonCreate", CustomerContact,
    function (data) { if (data == 0) { location = location.href; } }, 'json');
}
</script>

I posted my whole code here please any one check my code. In partial view the customer name will be null when i click create button and it didn't redirect correctly. i try my level best to explain my issue. please any one give solution for this problem.

Advance Thanks..

Answer 1

For the 1 part of your question:

CustomerName is probably null, since you have no input with that name on your partial. You only have @Html.DropDownList("CustomerID", "Select") which will pass in your CustomerID only, not the CustomerName . But I don't think that is a huge problem, I suppose you'll store the ID in the database anyway.

If you need the name, you can probably simply get it from the database based on the CustomerID value.

The second part is not completely clear for me, what should be the condition which makes a different between the two windows to show?