CODEWITHSUNDEEP
javascriptjqueryjsonajaxasp.net-mvc
TonE
TonE

Reputation: 3035

Handling Json results in ASP.NET MVC with jQuery

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>

Upvotes: 1

Views: 1364

Answers (1)

tvanfosson
tvanfosson

Reputation: 532465

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.

Upvotes: 1

Related Questions