MVC3 Razor Ajax Form Submit

Question

I use the MVC3 helper to create my Ajax form as follows:

@using (Ajax.BeginForm("Attended", "Lesson", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "mdl" + item.ID })) { @Html.HiddenFor(modelItem => item.ID); @Html.CheckBox("Attended", item.Attended, new { OnChange = "javascript:this.form.submit()"}); } 

I just did not find a suitable way to submit the form to the checkbox change event. I do not want my users to click the submit button.

HTMLAttribute works, but when postback changes, it happens instead of ajax request.

Does anyone know the answer?

Answer 1

First, create a submit button inside your form and hide it by setting the style="display:none;" attribute . Then, instead of using this.form.submit() in your onchange event, use the following:

 $(this).parents('form:first').find(':submit')[0].click(); 

This will call the jquery.unobtrusive-ajax.js script and complete your Ajax presentation.

Answer 2

this can help

 @Html.CheckBox("Attended", item.Attended, new { OnChange = "submitForm"}); function submitForm(e) { document.forms[0].submit(); } 

Answer 3

How about using jQuery to trigger submit? Like in this answer How to submit an ASP.NET MVC Ajax form using JavaScript, not a submit button

Using the .change () event instead of the .click () event, the jQuery part will look something like this:

 $(function() { $('form#ajaxForm').find('input.submit').change( function() { $('form#ajaxForm').trigger('submit'); }); } @using (Ajax.BeginForm("Attended", "Lesson", new { id = Model.Id }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "mdl" + item.ID }, new { id = "ajaxForm" } )) { @Html.HiddenFor(modelItem => item.ID); @Html.CheckBox("Attended", item.Attended, new { @class = "submit"}); } 

This is a completely untested code, so beware of typos :)

Answer 4

Forms are the classic way to send a request - so this is POST - your GET setting is canceled using the onChange function - the packages will always clear the contents and be replaced by the server contents - I do some javascript to send using AJAX - can't see this, so I assume that he does just that. your OnChange should execute this AJAX function instead ...

Answer 5

Hmm, what actually worked for me, even on cell phones, which was the problem, was in my cshtml file for partial viewing. It also includes code for the gray button and the entry "Save ..." until the view is returned back, which avoids people pushing the submit button when they are impatient with slow SQL servers.

 <div id="myFutureDayEdit"> <script type="text/javascript"> $(document).ready(function () { $("#submitFutureDayEditVisibleButton").click(function () { $(this).prop('disabled', true); $("#myUserMessage").html("Saving..."); $("#myUserMessage").show(); document.getElementById("submitFutureDayEditHiddenButton").click(); }); }); </script> @Html.ValidationSummary(true) @using (Ajax.BeginForm("SaveFutureDayEdit", "Member", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myFutureDayEdit" })) { ... bla bla bla 

and

  <input id="submitFutureDayEditVisibleButton" type="button" value="Save Changes" /> <input id="submitFutureDayEditHiddenButton" style="display:none;" type="submit" value="SC" /> <div id="myUserMessage"> @if (Model.UserMessage != null) { @Model.UserMessage } </div> <input type="hidden" id="bUnsavedChanges" name="bUnsavedChanges" value="false" /> } </div> <div id="hahuloading"> <div id="hahuloadingcontent"> <p id="hahuloadingspinner"> Saving... </p> </div> </div>