jQuery Form, ASP.NET MVC JSon Result

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.") } };
    }

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);
    }
});

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.

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");