How to pass date from partial view to controller in MVC4?

Question

Hi I want to pass the data from partial view to controller

 

My Partial view Code

 

@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("sucess");

//window.close();

});

}

</script>

 

My Model(CustomerViewModel)

 

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

 

}

 

 

When i enter the details it get all the values in j query function it getting the value in

var Area = $("#AreaName").val();

var CityID = $("#CityID").val();

 

and also in

 

var AreaAdd = { "AreaName": '' + Area + '', "CityID": CityID };

 

and showing all alert message with values there is no problem in getting the values in j query function . The problem is in passing these values to controller the Area Value will be null but nit CityID. This is my issue . I am facing this issue from long time . please any one help me to resolve this issue..

 

 

Advance thanks..