Sachin Singh

Sachin Singh

  • 45
  • 30.6k
  • 21.1k

post data to MVC Controller from view using Ajax.

Dec 1 2020 12:26 PM
 
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)
  1. $("#btnInsert").click(function () {  
  2.         debugger;  
  3.           
  4.   
  5.   
  6.         var employee = {  
  7.             Name: $("#txtName1").val(), // have value  
  8.             Salary: $("#txtSalary1").val(), // have value  
  9.         }  
  10.          
  11.         $.ajax({  
  12.             type: "POST",  
  13.             url: '/employee/AddEmployees',  
  14.             data: JSON.stringify(employee), // have values  
  15.             datatype: "json",  
  16.             cache: false,  
  17.             success: function (data) {  
  18.   
  19.             },  
  20.         });  
  21.   
  22.     });  
  23.   
  24.  public ActionResult AddEmployees(Employee employee) // values are null  
  25.         {  
  26.             try  
  27.             {  
  28.                 if (ModelState.IsValid)  
  29.                 {  
  30.   
  31.                     var azuS = client.PostAsJsonAsync("api/Employee", employee).Result;  
  32.                     if (azuS.IsSuccessStatusCode)  
  33.                     {  
  34.                         return Json(employee, JsonRequestBehavior.AllowGet);  
  35.                     }  
  36.   
  37.                 }  
  38.                 return RedirectToAction("GetAllEmployee""Employee");  
  39.             }  
  40.             catch (Exception ex)  
  41.             {  
  42.                 return Json(ex.Message);  
  43.             }  
  44.         }  
  45.    
 second approach :- failed. (worked 70% times earlier)
 
  1. $("#btnInsert").click(function () {      
  2.         debugger;      
  3.               
  4.       
  5.       
  6.         var employee = {      
  7.             Name: $("#txtName1").val(), // have value      
  8.             Salary: $("#txtSalary1").val(), // have value      
  9.         }      
  10.         var model={    
  11.          "emp":employee    
  12.           }    
  13.         $.ajax({      
  14.             type: "POST",      
  15.             url: '/employee/AddEmployees',      
  16.             data:model, // have values      
  17.             datatype: "json",      
  18.             cache: false,      
  19.             success: function (data) {      
  20.       
  21.             },      
  22.         });      
  23.       
  24.     });      
  25.       
  26.  public ActionResult AddEmployees(Employee emp) // values are null      
  27.         {      
  28.             try      
  29.             {      
  30.                 if (ModelState.IsValid)      
  31.                 {      
  32.       
  33.                     var azuS = client.PostAsJsonAsync("api/Employee", employee).Result;      
  34.                     if (azuS.IsSuccessStatusCode)      
  35.                     {      
  36.                         return Json(employee, JsonRequestBehavior.AllowGet);      
  37.                     }      
  38.       
  39.                 }      
  40.                 return RedirectToAction("GetAllEmployee""Employee");      
  41.             }      
  42.             catch (Exception ex)      
  43.             {      
  44.                 return Json(ex.Message);      
  45.             }      
  46.         }      
  47.        
 Approach 3:- query string (no data, directly construct url) (Success here)
  1. $.ajax({        
  2.             type: "POST",        
  3.             url: '/employee/AddEmployees?Name='+employee.Name+"Salary="+employee.Salary,        
  4.              
  5.             datatype: "json",        
  6.             cache: false,        
  7.             success: function (data) {        
  8.         
  9.             },        
  10.         });     
 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.
 

Answers (7)