Fix Internet Explorer prompts to save JSON response when uploading files

When you upload a file using AJAX and then reply using a JSON response, Internet Explorer decides to interpret the response as something to download to disk or open. In essence, it interjects in between the Ajax post response and turns the response into a standard IE file download.

To resolve this I looked at the HTTP headers from two posts made by IE. The first is the post with a file:

POST http://localhost:9999/customer/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Content-Type: multipart/form-data; boundary=---------------------------7de3581a151560
.......removed irrelevant lines.......

The response to this looks like this:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
.......removed irrelevant lines.......

{"customerId":1003}

And then the second without a file, using a standard Ajax post:

POST http://localhost:9999/customer/edit/1003 HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/x-www-form-urlencoded
.......removed irrelevant lines.......

With the resulting response:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
.......removed irrelevant lines.......

{"Success":true}

In order to fix the problem I needed to change the content type of the response. Internet Explorer isn't accepting application/json, and that is what ASP.NET MVC is sending back by default. A quick fix is to override the JsonResult in the base controller:

protected new JsonResult Json(object data) {
    if (this.Request.AcceptTypes == null) {
        return base.Json(data);
    }

    return this.Request.AcceptTypes
        .Any(x => x.Equals("application/json", StringComparison.OrdinalIgnoreCase)) ?
        base.Json(data) : base.Json(data, "text/plain");
}

We now get text/plain back for browsers (IE) that aren't ready to accept application/json. Problem solved.