How to overcome difficulties facing in jquery ajax call and handling it to get proper response from ASP NET MVC Action Method

Difficulties facing in  jquery  Ajax call and handling it to get proper response from server side code(MVC)

1. Overview

Most of the time you may face some challenges during jquery  ajax call ,say.. you may not get expected response from server side code, showing some internal server 500,or uncaught error right?.. So.. yes, today I am going to explain you guys how to overcome this kind of rigid situation.

Assuming that you already have a MVC application. And below line of code indicates jquery Ajax call to post employee data to server and user should expect employee data for searched parameters and obviously bind them to the model ,display on the UI. So let's begin..


function SearchEmployees() {
var empName = $('#Name :selected').val();var JoinedOn= $("#JoinedOn").val();var url = '@Url.Action("SearchEmployees", "Home")?empName =' + empName + "&&JoinedOn=" + JoinedOn
$.ajax({
url: url,
type: 'POST',
dataType = "json";
contentType = "application/json";
success: function (result) {
$("#divEmployeeSearch").html('');
$("#divEmployeeSearch").html(result);
}
});

----------------------------------------------
 [HttpPost]
public ActionResult SearchEmployees(string empName , DateTime JoinedOn)
{
EmployeeData objEmployeeData = new EmployeeData ();
BOEmployeeData  objBOEmpl = new BOEmployeeData ();objEmployeeData .lstEmployees= objBOEmpl .SearchEmpRecords(empName , JoinedOn);
return PartialView("_EmployeesRecordSearch", objEmployeeData);
} 

So, in above code you can observe that we are searching employees through Ajax call by passing required parameters to the action method which in turn returns employees list data which matches the passed parameters.

Ok now if you run the application and  pass the parameters to the server, you should expect employees results on your screen right? But I say obviously you will not. Because as we have written bad line of code ,so we wont get employee data on UI.
Lets find and figure out the code which causing the error.

In  Ajax call we mentioned like ,
dataType = "json";
contentType = "application/json";

So,it clearly indicates that we are expecting result in Json data type..but what we are actually returning?did you observe?..

return PartialView("_EmployeesRecordSearch", objEmployeeData);

In above line you can observe, we are returning PartialView which contains list of employees. So what  we are expecting server to return data is not at all matching what actually server method is returning.

Solution:
So, this may result in uncaught error or some internal server 500 error. To overcome this exception, simply remove below line of code from your Ajax call
.
dataType = "json";
contentType = "application/json";

That's it. It should work :)

Note:

1. In Ajax call name of the parameters which you are sending to server method should match with server method parameters. Say, name and data type.

2.If you design server method in such a way that parameters should accept null values also, you should declare them as null able parameters otherwise Ajax call may fail if you pass null values to the method.

Thank you friends.:)
Please feel free to ask your doubts and questions. I will be glad to help you all. And Hope this article will help you guys.