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<System.Guid> AreaID { get; set; }

public string Area { get; set; }

public Nullable<System.Guid> 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

 

<div id="Area">

<div class="col-sm-4">

<div class="form-group">

@Html.LabelFor(model => model.Area, new { @class = "control-label"})

@Html.DropDownList("AreaID", null, "Select", new { @class = "form-control required" })

<button id="AddArea">Area</button>

<div id="AddAreaNew"></div>

</div>

</div>

</div>

 

My j-query

 

<script src="~/Scripts/jquery-1.10.2-ui.js"></script>

<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<script type="text/javascript">

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

<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 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();

});

}

</script>

 

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