IE tries to download JSON in ASP. NET MVC 3

Question

I was trying to return Json from my action and after that IE tried to download it and showed me save dialog. I tested it in Firefox, and there it works fine.

return Json(new { success = false, message = ex.Message }, "application/json");

What is the reason of that behavior and how can I solve that issue?

After that in Javascript part I try this

 if (responseJSON.success == false) {
                        alert(responseJSON.message);
                        cancel();
                    }

But IE doesn't show alert anyway. It brings me save dialog.

I tried to change "application/json" with "text/plain" and save dialog disappeared, but I am not able to see alert yet. What am I missing?

EDIT:

Here is my complect Javascript, I am using Valums qquploader(ex-Ajaxupload) for uploading images

 var uploader = new qq.FileUploader({
                element: document.getElementById("image-upload"),
                action: '/Home/ImageUpload',
                allowedExtensions: ['jpg', 'png', 'gif'],
                sizeLimlit: 2048,onComplete: function (id, fileName, responseJSON) {
                    if (responseJSON.success == false) {
                        alert(responseJSON.message);
                        cancel();
                    }
                    else {
                         alert("success");
                          //some code here
                        }
                     }
                   });

I had tested with alert("success"); in my else part and forwarded json as "text/plain" and after that I saw the alert. But in that time responseJSON.success != false for me. Have you any suggestions about that?

Answer 1

I've solved that with this trick

return Json(new { success = false, message = ex.Message }, "text/html");

And now it works. But can me anyone explain why it works with text/html, and didn't work with application/json and text/plain. First is trying to download JSON and second is returning undefined properties for JSON fields.

Answer 2

This problem occurs when using an upload plugin that uses an iframe to do the upload with IE (tested on 9.0).

IE sets the header Accept: text/html, , application/xhtml+xml, */* and so when you reply with Content-type: application/json, it assumes it's the file (or at least that's the only explanation I could find on the web).

Thus, to circumvent that, you need to set Content-type: text/html or Content-type: text/plain.

I would recommend implementing this using an ActionFilter; instead of manually changing the content type, detect IE and a multipart POST and change the content-type accordingly.

Answer 3

Possibly you are not setting a correct mime type for your json content (for IE try text/plain)

See: What problems may using the MIME type application/json cause?

Answer 4

I was using this same uploader and had the same problem.

It has to do with the request headers sent. IE needs the request to have an accept header that indicates json.

xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");

If you insert this after this line:

xhr.setRequestHeader("Content-Type", "application/octet-stream");

in the js file (mine is called fileuploader.js) then you should no longer have the problem, and don't need to indicate text/html in your return.

p.s. I commented out the content-type line, but am no longer sure why. If just adding this the accept line does not work, try commenting out the content-type header as well.

Edit:

I looked at my file again, and it seems like also made another change.

Instead of the line:

xhr.send(file)

I put in:

var formData = new FormData();
formData.append("image", file);
xhr.send(formData);

This comes after the setrequesrheader line above.

I am not sure if this change will work for all uses, like multiple file upload. I only upload a single image for my use.