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> 

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.