opening pop-up window by clicking button multiple timesMVC4?

Question

Hi i got issue in opening pop-up window multiple times while clicking button. I will explain my issue clearly.

 

                          

 

Hi, this is my parent view Customer Form.I have one add button near to Area if i enter the CustomerName AddressType, Street, Location,Place and then select the area.Suppose if area is not in the list means i have to add that. so i click that add button it will open AreaPartial view as popup window.

                         

After i enter the details and click the create button it will save the data in db and it shows the same popup window when it was close means when i click x mark[which is in the pop up window right top corner ) . Now all are working fine.

Now my issue is i open the pop-up window by clicking the button and add the area and close the pop-up window before clicking the main save button in parent view i have to add another one area so i click the add button again but it wont opening the pop-up window . This is my issue.

My Controller code to save the data which is entered in the partial view pop-up window

 

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

}

 

 

My j-query code to display the area partial view as popup window once the add button is clicked in Parent View

 

 

<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 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() {
  debugger;
  var Area = $("#AreaName").val();
  var CityID = $("#CityID").val();
  alert(Area);
  var AreaAdd = { "Area": '' +Area + '', "CityID": CityID };
   $.post("/Customer/AddAreaInfo", AreaAdd, function(data) { 
    var option = new Option(Area, data);
        $('#AreaID').append($(option));
        alert("sucess");
        window.close();
  });
  }

 

 

This is my issue i cant able to open my pop-up window multiple times.i tried my level best to explain my issue. please any one help me to solve this issue.

Advance thanks..