Multiple Partial view in Same page, opened one by one on request, returns the same model on submission - asp.net-mvc-3

Question

We are using MVC3 to develop an application. We need to create multiple entities - like customers - from the Main page. Same partial view is used to create this entity. These partial views are loaded on to Jquery model dialog(Different div tags are used) one by one on demand when clicked on a link/button. When we creates the first entity, it creates successfully and corresponding key is set to the main page. But when we try to create the second entity, the data passed to the controller is same as the first one and an exception is thrown because of unique key constraint. We tried by adding Modelstate.clear() , but no success. Now the surprise is that if we add the entities from bottom by clicking the button in reverse order (ie 3,2,1) it is getting created. Can anybody solve this?
Controller for partial View Loading and submission
public PartialViewResult _CustomerCreate()
{
CustomerViewModel customerviewmodel = new CustomerViewModel();
ModelState.Clear();
return PartialView(customerviewmodel);
}
public ActionResult _CustomerCreate(CustomerViewModel customerviewmodel)
{
CustomerBL customerBL = new CustomerBL();
ModelState.Clear();
if (ModelState.IsValid)
{
string path = Request.UrlReferrer.AbsolutePath;
}
int id = customerBL.SaveData(customerviewmodel);
string customer = Convert.ToString(customerviewmodel.FSTNAME + " " + customerviewmodel.MDLNAME + " " + customerviewmodel.LSTNAME);
return Json(new { Customerid = id, CustomerName = customer });
}
Sample script on the main page which loads partial View to Jquery Dialog
<script type="text/javascript">
$(function () {
$(".divnewnominee").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
$("#NOMINAME").val(data.CustomerName);
$("#NOMINEE").val(data.Customerid);
$(".divnewnominee").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newnominee").click(function () {
$(".divnewnominee").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divnewnominee").dialog("open"); });
});
});
<script type="text/javascript">
$(function () {
$(".divfamily").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
$("#DEPOSITCUST").val(data.CustomerName);
$("#DEPOSITBY").val(data.Customerid);
$(".divfamily").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newfamily").click(function () {
$(".divfamily").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divfamily").dialog("open"); });
});
});
Partial view which is loaded into the divs
#model ccs.Models.ViewModels.CustomerViewModel
#{
ViewBag.Title = "Create";
}
<h2>Customer</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/ccsjs/ChooseFromList.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false, width: 800, height: 500, modal: true,
buttons: {
"Save": function () {
if ($("#AddressLookup").validate().form()) {
$.post("/Customer/AddressLookupCreate",
$("#AddressLookup").serialize(),
function (data) {
$("#CustAddress").val(data.address);
$("#AddrID").val(data.Adressid);
$("#dialog").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".Address").click(function () {
$("#dialog").html("")
.dialog("option", "title", "Address")
.load("/Customer/_AddressLookupCreate", function () { $("#dialog").dialog("open"); });
});
});
<script type="text/javascript" >
$(function () {
$("#addr").dialog({
autoOpen: false, width: 800, height: 550, modal: true,
buttons: {
"Add": function () {
if ($("#AddressLookupList").validate().form()) {
$.post("/Customer/_AddressLookupList",
$("#AddressLookupList").serialize(),
function (data) {
$("#CustAddress").val(data.address);
$("#AddrID").val(data.Adressid);
$("#addr").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".searchaddr").click(function () {
$("#addr").html("")
.dialog("option", "title", "Address List")
.load("/Customer/_AddressLookupList", function () { $("#addr").dialog("open"); });
});
});
<script type="text/javascript">
$(function () {
$("#divcust").dialog({
autoOpen: false, width: 250, height: 500, modal: true
});
$("#custbtn").click(function () {
$("#divcust").html("")
.dialog("option", "title", "Customer List")
.load("/Customer/_CustomerList", function () { $("#divcust").dialog("open"); });
});
});
#using (Html.BeginForm("_CustomerCreate", "Customer", FormMethod.Post, new { id="CustomerFormID" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Create</legend>
<div style="float:left; width:100%;">
<div class="row-style">
<div class="labels">
#Html.Label("Customer Code")
</div>
<div id="Cust" class="fields">
#Html.TextBoxFor(model => model.CUSTCODE)
<div>#Html.ValidationMessageFor(model => model.CUSTCODE)</div>
</div>
<div class="labels">
#Html.Label("First Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.FSTNAME)
<div> #Html.ValidationMessageFor(model => model.FSTNAME)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Middle Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.MDLNAME)
#Html.ValidationMessageFor(model => model.MDLNAME)
</div>
<div class="labels">
#Html.Label("Last Name")
</div>
<div class="fields">
#Html.EditorFor(model => model.LSTNAME)
#Html.ValidationMessageFor(model => model.LSTNAME)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Date of Birth")
</div>
<div class="fields">
#Html.TextBoxFor(model => model.DOB, new { #class = "datePicker", id = "DOB", style = "width:170px;" })
<div> #Html.ValidationMessageFor(model => model.DOB)</div>
</div>
<div class="labels">
#Html.Label("Gender")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.Gender, new SelectList(Model.Gendr, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.Gender)
</div>
</div>
<div >
<div class="labels">
#Html.Label("Address ")
</div>
<div class="fields">
#Html.TextAreaFor(model => model.ADDRESS, new { #name = "ADDRESS", #readonly = "readonly", style = "width:170px;height:50px;" ,id="CustAddress"})
<img src="../../Content/themes/base/ccsimages/Search-icon.png" class="searchaddr" alt="Account Code" />
<img src="../../Content/themes/base/ccsimages/New.jpg" alt="Account Code" class="Address" width="16Px" height="16Px"/>
#* #Html.ActionLink("New Address", "AddressCreate")*#
#Html.ValidationMessageFor(model => model.ADDRESS)
</div>
<div class="labels">
#Html.Label("Photo ")
</div>
<div class="fields">
<p>
<input type="file" id="PhotoUpload" name="PhotoUpload" />
</p>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Pan No")
</div>
<div class="fields">
#Html.EditorFor(model => model.ITPAN)
<div>#Html.ValidationMessageFor(model => model.ITPAN)</div>
</div>
<div class="labels">
#Html.Label("Tax Circle/Ward/District")
</div>
<div class="fields">
#Html.EditorFor(model => model.WARD)
#Html.ValidationMessageFor(model => model.WARD)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Mobile No")
</div>
<div class="fields">
#Html.EditorFor(model => model.MOBILE)
#*#Html.CheckBoxFor(model => model.SNDSMS, new { #value = Model.MOBILE, #onchange = "check(value)" })*#
<div> #Html.ValidationMessageFor(model => model.MOBILE)</div>
</div>
<div class="labels">
#Html.Label("Email ")
</div>
<div class="fields">
#Html.EditorFor(model => model.EMAIL)
#*#Html.CheckBoxFor(model => model.SNDMSG)*#
<div> #Html.ValidationMessageFor(model => model.EMAIL)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Phone No ")
</div>
<div class="fields">
#Html.EditorFor(model => model.PHONE)
<div> #Html.ValidationMessageFor(model => model.PHONE)</div>
</div>
<div class="labels">
#Html.Label("Fax ")
</div>
<div class="fields">
#Html.EditorFor(model => model.FAX)
<div>#Html.ValidationMessageFor(model => model.FAX)</div>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Family")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.FMLY, new SelectList(Model.Famly, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.FMLY)
</div>
<div class="labels">
#Html.Label("Customer Type")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.CUSTYPE, new SelectList(Model.CustTyp, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.CUSTYPE)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Repledge")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.REPLEDG, new SelectList(Model.Repldg, "Key", "Value", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.REPLEDG)
</div>
<div class="labels">
#Html.Label("ID Proof Type")
</div>
<div class="fields">
#Html.DropDownListFor(model => model.IDPRTYPE, new SelectList(Model.IdProoflist, "IDPRCODE", "IDPRNAME", " "), new { style = "width:205px;" })
#Html.ValidationMessageFor(model => model.IDPRTYPE)
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("ID Proof No")
</div>
<div class="fields">
#Html.EditorFor(model => model.IDPNO)
#Html.ValidationMessageFor(model => model.IDPNO)
</div>
<div class="labels">
#Html.Label("ID Proof ")
</div>
<div class="fields">
<p>
<input type="file" id="IDProofUpload" name="IDProofUpload" />
</p>
</div>
</div>
<div class="row-style">
<div class="labels">
#Html.Label("Father/Husband Name")
</div>
<div class="fields">
#Html.TextBoxFor(model => model.FNAME, new { #name = "FNAME", #class = "FNAME", style = "width:170px;" })
#*<img src="../../Content/themes/base/ccsimages/Search-icon.png" alt="Account Code" onclick="openCustPickerDialog(window, document.forms[0].FCUSTID,document.forms[0].FNAME, '/Customer/_CustomerLookupIndex/')" />*#
<img src="../../Content/themes/base/ccsimages/Search-icon.png" alt="Account Code" id="custbtn"/>
#Html.ValidationMessageFor(model => model.FNAME)
#Html.HiddenFor(model => model.FID)
</div>
</div>
</div>
#Html.HiddenFor(model => model.FCUSTID, new { #name = "FCUSTID",#class="FCUSTID", style = "width:130px;" })
<div class="fields">
#Html.HiddenFor(model => model.AVASRVCE)
</div>
<div class="fields">
#Html.HiddenFor(model => model.ADDRID, new { #name = "ADDRID", style = "width:130px;",id="AddrID" })
#Html.ValidationMessageFor(model => model.ADDRID)
</div>
#*<div id="NoteListBlock">#{Html.RenderPartial("_AddressLookupCreate");}</div>*#
<div id="dialog" title="Address Lookup"></div>
<div id="addr" title="Address"></div>
<div id="divcust" title="Customer List"></div>
<div class="row-style">
<div class="errorfield">
<div class="message"> #Html.ValidationMessageFor(model => model.CUSTCODE) #Html.ValidationMessageFor(model => model.FSTNAME) #Html.ValidationMessageFor(model => model.ADDRESS)</div>
</div>
</div>
</fieldset>
}
When First Div is submitted the data gets saved properly. When Second one submits the viewmodel retains the values from the first div

Answer 1

We solved our issue. We added on single line of code to the Java script which invoked the partial view. The code is given below
<script type="text/javascript">
$(function () {
$(".divnewnominee").dialog({
autoOpen: false, width: 800, height: 590, modal: true,
buttons: {
"Save": function () {
if ($("#CustomerFormID").validate().form()) {
$.post("/Customer/_CustomerCreate",
$("#CustomerFormID").serialize(),
function (data) {
***$(".divnewnominee").html(data);***
$("#NOMINAME").val(data.CustomerName);
$("#NOMINEE").val(data.Customerid);
$(".divnewnominee").dialog("close");
});
}
},
Cancel: function () { $(this).dialog("close"); }
}
});
$(".newnominee").click(function () {
$(".divnewnominee").html("")
.dialog("option", "title", "New Customer")
.load("/Customer/_CustomerCreate", function () { $(".divnewnominee").dialog("open"); });
});
});