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.

 

                           

 

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 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 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..