Failed to execute jquery ajax success function

Question

I call the MVC controller method from jQuery ajax.

$(document).ready(function () { $.ajax({ type: "POST", url: "/Customer/GetDetails", contentType: "application/json; charset=utf-8", async: false, cache: false, success: function (data) { $.each(data, function (index, value) { alert(value); }); } }); }); 

I have an object called Client .

The controller method retrieves the record from the database and saves it as a Client List and returns this list to JsonResult.

 public JsonResult GetDetails() { CustomerDAL customer = new CustomerDAL(); IList<Customer> custList = customer.GetDetail(); return Json(custList); } 

But my ajax success function is not at all called here.

Answer 1

You do not need to specify a content-type , because it sets the type in which the server expects data, you do not send it, therefore you do not need to explicitly specify it, secondly, set dataType to json which is the format in which the client expects data from server. But I really doubt that this could be the cause of any errors.

Add an error callback to make sure that something went wrong on the way back

try

 $.ajax({ type: "POST", url: "/Customer/GetDetails", dataType:'json', async: false,//WHY?? cache: false, success: function (data) { alert("success"); }, error:function(){ alert("something went wrong"); } }); 

Using

• Firebug or chrome tools for checking ajax request and setting what returns the status code.

• Place a breakpoint inside the controller to see if the ActionResult in making the call.

EDIT

mark your JsonResult with an HttpPost annotation, e.g.

 [HttpPost] public JsonResult GetDetails() { CustomerDAL customer = new CustomerDAL(); IList<Customer> custList = customer.GetDetail(); return Json(custList); } 

Answer 2

Replace your line

  contentType: "application/json; charset=utf-8", 

with this

 contentType: "application/json", 

and add data type

 datatype: 'json' 

Answer 3

Got it today. The problem that the success event was not fired was that there really was no success from the jQuery point of view: the json code returned by the server was corrupted! So: double check your json format, i.e. From JSON Lint to http://zaach.github.com/jsonlint/ or something else. The ajax function is very "tolerant" to any false / erroneous settings, but the incorrect json code is definitely an error. While an error event occurs, an error occurs.

Answer 4

You have a list of objects as List in the ajax-success function.

to analyze it try this

 $(document).ready(function () { $.ajax({ type: "POST", url: "/Customer/GetDetails", // or better way '@Url.Action("GetDetails", "Customer")' contentType: "application/json; charset=utf-8", success: function (data) { $.each(data, function (index, customer) { alert(customer.id, customer.name, customer.surname); }); } }); }); 

controller

 public JsonResult GetDetails() { CustomerDAL customer = new CustomerDAL(); IList<Customer> custList = customer.GetDetail(); return Json(custList); } 

for example, suppose your CustomerDAL model

 class CustomerDAL { public int id { get; set; } public string name { get; set; } public string surname { get; set; } } 

Change the alert message for your CustomerDAL model. I do not know what properties are in your model.

Answer 5

Your code:

 return Json(custList); 

Change it to:

 return Json(new SelectList(custList));