Handling Json results in ASP.NET MVC with jQuery

Question

I am working on a view containing two forms, handled by separate controller actions which return a string serilaized to Json:

return Json(message);

The forms are submitted using jQuery, by clicking on a button outside the two forms. The button handler:

$('#inviteForm').ajaxSubmit({
 success: function(html, status) {
 $("#response").text(html);
 }
})
$('#trialForm').ajaxSubmit({
 success: function(html, status) {
 $("#response").append(html);
 }
});

The browser receives the result and prompts the user to download as it is interpreted as "application/json".

However, if I only submit one of these forms in the jQuery, the resulting Json message is displayed as a string in the #response element as desired.

Why does adding a second ajaxSubmit() cause this different behaviour?

Thanks.

The view contains the following forms:

<form action="/Controller1/SaveAttachments/<%=Model.ObjectId %>" id="trialForm" method="post" enctype="multipart/form-data">
 <input type="file" name="trialForm" size=30/>
 <input type="file" name="trialSheet" size=30/>
 <input type="file" name="trialApproval" size=30/>
</form>

and...

<form action="/Controller1/UpdateTemplate/<%=Model.ObjectId %>" id="inviteForm" method="post" enctype="multipart/form-data"> 
 <%=Html.TextArea("invitationSheet", Model.InvitationSheet,
 new { @name = "invitationSheet"})
 <script type="text/javascript">
 window.onload = function() {
 var sBasePath = '<%=Url.Content("~/Content/FCKeditor/")%>';
 var oFCKeditor = new FCKeditor('invitationSheet');
 oFCKeditor.BasePath = sBasePath;
 oFCKeditor.HtmlEncodeOutput = true;
 oFCKeditor.ReplaceTextarea();
 }
 </script> 
</form>

• tvanfosson: Have you tried changing the second submit to setting the text instead of appending to the DOM? That's the glaring difference between the two, but I'm not sure why it would cause that behavior.
• TonE: Thanks for your suggestion. I've tried both .text() and .append() with no difference in behaviour. A further point is the result of the first ajaxSubmit is displayed in #response - it is the result of the second ajaxSubmit which is interpreted as "application/json".
• TonE: I've just tried commented out all code from the controller actions, so the code is now return Json("Action1") and return Json("Action2"). Still getting the same behaviour. Will add the code for the forms on the view to my original post...
• tvanfosson: After thinking about it more, I think the issue is client-side. See my answer for a couple of idea.
• tvanfosson: The problem is the file inputs. See my updated answer.

Answer 1

Update:

You can't upload files directly via AJAX so it is doing an actual post of the form containing file inputs. You should look at a plugin that will let you upload files using the hidden iframe technique that works asynchronously instead of trying to upload using AJAX.

• TonE: The controller action receives the files as HttpPostedFileBase objects which are then saved. Returning the status message as Content(message) rather than Json(message), or using Json(message,"text/html") seems to fix the problem...
• tvanfosson: I still think that it's doing a full post though, not an ajax post which is where your error was coming from. It could be that the plugin hides this from you. I'm not familiar with the plugin so I can't say for sure.
• tvanfosson: ...that is, when submitting "ajax" file uploads it invokes the hidden iframe technique for you and receives the result back in the iframe. The download of the application/json into the iframe is what would be popping up the download box. Changing it to normal content (text/html) would allow the browser to receive the data normally and the plugin to retrieve it from the iframe contents.
• TonE: Thanks for the help tvanfosson, that makes sense. Whilst the controller action only needs to return a status message I will specify the content as text/html to avoid the problem.