post data to MVC Controller from view using Ajax.

Question

i am using ajax for 4 years , but seriously i couldn't understand it completely when it comes to post data to controller.

for me its pure luck, sometimes some method works sometimes something other and sometimes nothing works.

I have below example

Approach 1. Failed here(though it works sometimes,idk why)

$("#btnInsert").click(function () {
debugger;
var employee = {
Name: $("#txtName1").val(), // have value
Salary: $("#txtSalary1").val(), // have value
}
$.ajax({
type: "POST",
url: '/employee/AddEmployees',
data: JSON.stringify(employee), // have values
datatype: "json",
cache: false,
success: function (data) {
},
});
});
public ActionResult AddEmployees(Employee employee) // values are null
{
try
{
if (ModelState.IsValid)
{
var azuS = client.PostAsJsonAsync("api/Employee", employee).Result;
if (azuS.IsSuccessStatusCode)
{
return Json(employee, JsonRequestBehavior.AllowGet);
}
}
return RedirectToAction("GetAllEmployee", "Employee");
}
catch (Exception ex)
{
return Json(ex.Message);
}
}

second approach :- failed. (worked 70% times earlier)

$("#btnInsert").click(function () {
debugger;
var employee = {
Name: $("#txtName1").val(), // have value
Salary: $("#txtSalary1").val(), // have value
}
var model={
"emp":employee
}
$.ajax({
type: "POST",
url: '/employee/AddEmployees',
data:model, // have values
datatype: "json",
cache: false,
success: function (data) {
},
});
});
public ActionResult AddEmployees(Employee emp) // values are null
{
try
{
if (ModelState.IsValid)
{
var azuS = client.PostAsJsonAsync("api/Employee", employee).Result;
if (azuS.IsSuccessStatusCode)
{
return Json(employee, JsonRequestBehavior.AllowGet);
}
}
return RedirectToAction("GetAllEmployee", "Employee");
}
catch (Exception ex)
{
return Json(ex.Message);
}
}

Approach 3:- query string (no data, directly construct url) (Success here)

$.ajax({
type: "POST",
url: '/employee/AddEmployees?Name='+employee.Name+"Salary="+employee.Salary,
datatype: "json",
cache: false,
success: function (data) {
},
});

what is wrong with method 1 and 2.

Yes i tried with contentType:application/json;charset:utf-8;

please tell me a way which works in every situation no matter what.

Jaimin Shethiya · Answer

Hello Sachin, can you please try the below and checked it's working or not. public ActionResult AddEmployees( [FromBody] Employee emp) or also can you checked the Employee class is there not any datatype mismatched you have paased the values. Thanks

Jignesh Kumar · Answer

Have you check on this. Is it really require for you in Ajax post call. Try to remove and check or set it to true. cache: false ,

Sachin Singh · Answer

yes sir i have marked method as HttpPost and then name is also same in parameter otherwise i know model binder will not work. sir if you have time then please test the same on PC. cause i am unable to find any real reason sometimes it works , sometimes it doesn't. and sir creating object and then assigning value and directly creating object with values in javascript, are not both same? var employee = { Name: $( "#txtName1" ).val(), // have value Salary: $( "#txtSalary1" ).val(), // have value } and var employee=new Object(); employee.Name=$( "#txtName1" ).val() Are both of the above not same?

Jignesh Kumar · Answer

Hi Sachin, Have you check your Employee class and object pass from Ajax call ? Both should be same If not same then you will not get values of parameter object. One more thing I can see You did not mark your Action method as [HTTPPost] Lets say your Employee class is like this, public class Employee { public string Name { get ; set ; } public string Designation { get ; set ; } public string City{ get ; set ; } } // Your Jquery Object should be exact like this var employee = new Object(); employee.Name = $( '#txtName' ).val(); employee.Address = $( '#txtDesignation' ).val(); employee.City= $( '#txtCity' ).val(); // On Ajax post Call you need to pass above object data: JSON.stringify(employee),

Sachin Singh · Answer

dint get any genuine solution yet.

Sachin Singh · Answer

Thanks atish for reply I already said query string works But why method 1 and 2 doesn't work most of the time.

Atish Misal · Answer

Use in Body $.ajax({ type: "POST" , url: '/employee/AddEmployees?Name=' +employee.Name+ "Salary=" +employee.Salary, data: '{}' , contentType: "application/json; charset=utf-8" , datatype: "json" , cache: false , success: function (data) { }, });