How to pass data from Partial view to post method in MVC4?

Question

Hi i have one view called Customer .In that view i have one field called Area . I kept one add button near to area. suppose if area is not in the list means i click that add button it open AreaPartialView as popup window. Now i have one issue in that. That is the data is not passing from partial view to post action method of controller. My Model   public Nullable AreaID { get; set; } public string Area { get; set; } public Nullable CityID{ get; set; } public string City { get; set; }     My Controller   public ActionResult AreaPartialView() { ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName"); return View("AreaPartialView"); } [HttpPost] public ActionResult AddAreaInfo(CustomerViewModel objareaVM) { var objAreaID = Guid.NewGuid(); ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID); var ObjArea = new Area() { AreaID =objAreaID, DisplayName = objareaVM.Area, PrintName = objareaVM.Area, CityID = objareaVM.CityID, 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() }; db.Areas.Add(ObjArea); db.SaveChanges(); ModelState.Clear(); return Json("Customer", JsonRequestBehavior.AllowGet); }   My View   @Html.LabelFor(model => model.Area, new { @class = "control-label"}) @Html.DropDownList("AreaID", null, "Select", new { @class = "form-control required" }) Area   My j-query   $("#AddArea").click(function () { $('#AddAreaNew').dialog("open"); }); $(function () { $('#AddAreaNew').dialog({ autoOpen: false, width: 400, height: 500, resizable: false, title: 'Add Area', modal: true, open: function (event, ui) { $(this).load("@Url.Action("AreaPartialView", "Customer")"); }, buttons: { "Close": function () { $(this).dialog("close"); } } }); });   My Partial View     @Html.Label("Area" , new { @class = "control-label" }) @Html.TextBoxFor(model => model.Area, new { @class = "form-control", type = "text" ,id ="AreaName"}) @Html.ValidationMessageFor(model => model.Area) @Html.Label("City") @Html.DropDownList("CityID", null, "Select", new { @class = "form-control " }) function SaveArea() { var Area = $("#AreaName").val(); var CityID = $("#CityID").val(); alert(Area); var AreaAdd = { "AreaName": Area, "CityID": CityID }; alert(AreaAdd.AreaName); alert(AreaAdd.CityID); $.post("/Customer/AddAreaInfo", AreaAdd, function (data) { if (data == 0) { location = location.href; } }, 'json').success(function (data) { alert("success"); //window.close(); }); }   if i click the add button Area partial view will open as popup window and if i enter the details and click Create button it get the values and showing all alert messages. But the problem is it does not pass the Area value to post action method it pass the City ID value but it doesn't pass the Area value to post method. The Area value will be always null. Please any one cross check my code and tell me the solution . Advance Thanks..

Sneha K · Answer

MY Model name is CustomerViewModel and i call that model only in my controller..

Shuvojit Halder · Answer

Did you match the same name of jquery model field  and  your server model field which you have passed the controller?

Sneha K · Answer

Shuvojit Halder it getting the value in var AreaAdd  but when i pass these two values to controller the Area value will be null but not city . this is the issue.

Sneha K · Answer

ok i have a try

Sneha K · Answer

ok i have a try

Shuvojit Halder · Answer

Check your model there is  Area field but you are using Areaname in your jquery model. That is why it is null. use    var AreaAdd = { " Area ": Area, "CityID": CityID };

Sneha K · Answer

Shuvojit i gave my id as AreaName and it getting the value var AreaAdd = {
"AreaName": Area, "CityID": CityID
};
alert(AreaAdd.AreaName);
alert(AreaAdd.CityID); it shows the both alert message with the values which i enter but it pass the values to post action method the area value will be null but not cityID

Shuvojit Halder · Answer

var Area = $("#AreaName").val();-------- This will Be   var Area = $("#Area").val();