How to save the data from partial view popup window in mvc4?

Question

Hi i want to save data which is enterd in partial view pop up window in Db.

 

 

 

 

Partial view Popup window

 

 

 My controller

 

public PartialViewResult ShowPartailView()

{

ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");

return PartialView("ShowPartailView");

}

[HttpPost]

public ActionResult AddAreaInfo(Area area)

{

ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");

bool isSuccess = false;

if (ModelState.IsValid)

{

area.DisplayName = area.DisplayName;

area.AreaID = Guid.NewGuid();

area.IsActive = true;

area. IsDeleted = false;

area.CreatedDate = DateTime.Now;

area.EditedDate = DateTime.Now;

area.LastActiveOn = DateTime.Now;

area.RowID = Guid.NewGuid();

area.CreatedSessionID = Guid.NewGuid();

area. EditedSessionID = Guid.NewGuid();

area.OfflineMode = false;

area.OfflineID = Guid.NewGuid();

db.Areas.Add(area);

db.SaveChanges();

}

return Json(new { result = isSuccess, responseText = "Something wrong!" });

}

 

 

My View

 

 

<div id="Area">

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

<div class="form-group">

@Html.LabelFor(model => model.Area)

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

<button class="AddArea">Add Area</button>

<div id="AddNewArea"></div>

 

 My j queryCode

 

<script>

$('.AddArea').on('click', function () {

$("#AddNewArea").dialog({

autoOpen: true,

position: { my: "center", at: "top+350", of: window },

width: 1000,

resizable: false,

title: 'Add New Area',

modal: true,

open: function () {

$(this).load('@Url.Action("ShowPartailView", "Customer")');

},

buttons: {

"Add Area": function () {

addAreaInfo();

},

Cancel: function () {

$(this).dialog("close");

}

}

});

return false;

});

function addAreaInfo() {

$.ajax({

url: '@Url.Action("AddAreaInfo", "Customer")',

type: 'POST',

data: $("#myForm").serialize(),

success: function (data) {

if (data.result) {

$(':input', '#myForm')

.not(':button, :submit, :reset, :hidden')

.val('')

.removeAttr('checked')

.removeAttr('selected');

} else {

$("#showErrorMessage").append(data.responseText);

}

}

});

}

My partialView 

 

@model Sample_Customer.Area

@{

ViewBag.Title = "Create";

}

<script src="~/Scripts/bootstrap.js"></script>

<script src="~/Scripts/bootstrap.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<link href="~/Content/bootstrap.css" rel="stylesheet" />

@using (Html.BeginForm("ShowPartailView", "Customer", "POST"))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<fieldset>

<legend>Area</legend>

<div id="showErrorMessage"></div>

<form id="myForm">

<div id="AddNewArea">

<div class="col-xs-12">

<div class="container">

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

<div class="form-group">

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

@Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text" })

@Html.ValidationMessageFor(model => model.DisplayName)

</div>

</div>

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

<div class="form-group">

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

@Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text" })

@Html.ValidationMessageFor(model => model.PrintName)

</div>

</div>

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

<div class="form-group">

@Html.Label("City")

@Html.DropDownList("CityID", "Select")

</div>

</div>

</div>

</div>

</div>

</form>

</fieldset>

}

 

 

If i click the add button it open the partial view a spopup window and i enter the details and click add area it goes for  AddAreaInfo Controller action 

but it saves the value as null for DisplayName , printname, CityID as null with new ID . can any one tell me where i did mistake. becos all are working fine but it  saving the null value in Area table.please any one correct my code

 

Advance thanks