jQuery Form, ASP.NET MVC JSon Result

Question

I'm trying to return a json result from a jQuery Form instance - but it keeps prompting me to download a file instead of displaying it in the window like it is supposed to...

 $("#ajaxImageForm").ajaxForm({ iframe: true, type: "GET", dataType: "json", beforeSubmit: function() { $("#ajaxImageForm").block({ message: '<img src="/content/images/loader.gif" /> Uploading . . .' }); }, success: function(result) { $("#ajaxImageForm").unblock(); $.growlUI(null, result.message); } }); [AcceptVerbs(HttpVerbs.Post)] public JsonResult Edit(FormCollection collection) { // return Json to the jQuery Form Result return new JsonResult { Data = new { message = string.Format("edited successfully.") } }; } 

Answer 1

You are requesting a GET from your jQuery code, but you are stating that the action is only for POST. Change one of those and you should be good.

$("#ajaxImageForm").ajaxForm({ iframe: true, type: "POST", dataType: "json", beforeSubmit: function() { $("#ajaxImageForm").block({ message: '<img src="/content/images/loader.gif" /> Uploading . . .' }); }, success: function(result) { $("#ajaxImageForm").unblock(); $.growlUI(null, result.message); } }); 

Answer 2

You're setting the ajax request type to "GET", but your action method is set to only accept requests of type POST.

Try changing it to POST instead.

Answer 3

I have seen a similar issue, although not sure the reasoning was the same. The way I found to fix this was to return a content result instead with the content type set to text/html.

i.e.

return Content("{message: 'edited successfully'}", "text/html");