pass a model from partial view to controller by ajax in mvc - asp.net-mvc

Question

My controller is
public ActionResult AddCustomer(Customer SM)
{
DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
obj.SaveCustumerDetails(SM);
ModelState.Clear();
return PartialView();
}
my model is
public class Customer
{
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_id { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Contact_Person { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Contact_Person_Designation { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_name { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Address1 { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Address2 { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_City { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_State { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Country { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_PIN { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Phone1 { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Phone2 { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Email1 { get; set; }
[DisplayFormat(ConvertEmptyStringToNull = false)]
public string Customer_Email2 { get; set; }
}
Savecutomer is the name of the button .My partaial view code is
<script>
$('#SaveCustomer').click(
function () {
$.ajax({
type: "POST",
url: '#Url.Action("AddCustomer", "Customer")',
data: ' $("myform").serialize() ,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
complete: function (data) {
},
});
});
</script>
My need is to save customer details when i click on savecustomer button I don't want to see the details on url. In this way url holds data. I need to avoid it.

Answer 1

The method you have shown is a GET but its parameter is Customer SM which means that the DefaultModelBinder will generate a query string for each property in your model. I'm guessing that (because this method returns a partial view) your calling it in the main view using #Html.Action() or ajax to load a form into the view.
Firstly you need to methods, one GET and one POST
public ActionResult AddCustomer()
{
// Initialize a new instance of your model and pass it to the view
Customer model = new Customer();
return PartialView(model);
}
[HttpPost]
public JsonResult AddCustomer(Customer SM)
{
DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
obj.SaveCustumerDetails(SM);
return Json(true); // see notes below
}
Note if you have included #Html.AntiForgeryToken in the partial, then your will also need to add [ValidateAntiForgeryToken]
Next, delete the script from your partial view and add it to the main view (scripts should never be in partials). Then change the script to
$('#SaveCustomer').click(function() {
$.ajax({
type: "POST",
url: '#Url.Action("AddCustomer", "Customer")',
data: $('#myform').serialize(), // change this to include the #
dataType: 'json',
success: function (data) {
// do something?
},
});
});
Note this assumes your form has id="myform". Note also contentType has been removed (its not required unless you stringify the data). It can also be simplified to
$.post('#Url.Action("AddCustomer", "Customer")', $('#myform').serialize(), function(data) {
// do something
});
Side notes: Its not clear what you want to do in the success callback. I would suggest that in the POST method you use return Json(true); if the save was successful, otherwise return a HTTP error code. Then in the success call back you might do something like
if (data) {
// the save was successful so reset existing form controls
$('#myform').get(0).reset();
// maybe display a message indicating success
}
and similarly you could handle an error by displaying a message indicating the the customer could not be saved.

Answer 2

When i changed to
$('#SaveCustomer').click(
function () {
$.ajax({
type: "POST",
url: '#Url.Action("AddCustomer", "Customer")',
data: "{'Customer_Name' : '" + $('#Customer_Name').val() + "' ," +
" 'Customer_Adress1' : '" + $('#Customer_Address1').val() + "'}" ,
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
})
and change controller to
public ActionResult AddCustomer(string Customer_Name, string Customer_Address1)
{
DataAccessLayer.ConClass obj = new DataAccessLayer.ConClass();
obj.SaveCustomerDetails( Customer_Name, Customer_Address1);
ModelState.Clear();
return PartialView();
}
it worksss