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