post data to MVC Controller from view using Ajax.

Sachin Singh

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.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jaimin Shethiya5y ago
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 Kumar5y ago
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 Singh5y ago
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 Kumar5y ago
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 Singh5y ago
dint get any genuine solution yet.
Sachin Singh5y ago
Thanks atish for reply I already said query string works But why method 1 and 2 doesn't work most of the time.
Atish Misal5y ago
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) {
},
});