Useful Way to Call Controller Actions From HTML Using jQuery

1. Calling Controller Action without parameter.
   
   Controller:
   
   1. public string SaveEmployeeRecord()
   2. {
   3. string res = "this is return value";
   4. // do here some operation
   5. return res;
   6. }
   View:
   
   1. $.post("/Home/SaveEmployeeRecord",null, function (data) {
   2. alert(data);
   3. });
2. Calling Controller Action with parameter.
   
   Controller:
   
   1. public string SaveEmployeeRecord(string name)
   2. {
   3. string res = name;
   4. // do here some operation
   5. return res;
   6. }
   View:
   
   1. $.post("/Home/SaveEmployeeRecord", {name:'Deepak'}, function (data) {
   2. alert(data);
   3. });
3. Calling Controller Action with parameter returning JSON data.
   
   Controller:
   
   1. public JsonResult SaveEmployeeRecord(string id,string name)
   2. {
   3. string this_id = id;
   4. string this_name = name;
   5. // do here some operation
   6. return Json(new {id=this_id,name = this_name },JsonRequestBehavior.AllowGet);
   7. }
   View:
   
   1. $.post("/Home/SaveEmployeeRecord", {id:'67',name:'Deepak'}, function (data) {
   2. alert(data.id); // display id value which is returned from the action method
   3. alert(data.name);//display name value which is returned from the action method
   4. });

$.ajax() method

1. Calling Controller Action with parameter returning JSON data.
   
   Controller:
   
   1. public JsonResult SaveEmployeeRecord(string id,string name)
   2. {
   3. string this_id = id;
   4. string this_name = name;
   5. // do here some operation
   6. return Json(new {id=this_id,name = this_name },JsonRequestBehavior.AllowGet);
   7. }
   View:
   
   1. $.ajax({
   2. type: 'POST',
   3. dataType: 'json',
   4. url: '/Home/SaveEmployeeRecord',
   5. data: { id: '67', name: 'Deepak' },
   6. success: function (Data) {
   7. alert(data.id);
   8. alert(data.name);
   9. },
   10. error: function (XMLHttpRequest, textStatus, errorThrown) {
   12. }
   13. });