MVC3 Razor Ajax Form Submit - ajax

Question

I use The MVC3 Helper to generate my Ajax form like this:
#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 don't find the proper way to submit the Form on the change event of the checkbox.
I don't want my users to click the submit button.
The HTMLAttribute works, but on the change a postback happens instead of an ajax request.
Does anybody know the answer?

Answer 1

First, create a submit button inside your form, and hide it by setting the attribute style="display:none;". Then, instead of using this.form.submit() in your onchange event, use the following:
$(this).parents('form:first').find(':submit')[0].click();
This will invoke the jquery.unobtrusive-ajax.js script, and complete your Ajax submission.

Answer 2

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

Answer 3

What about using jQuery to trigger the submit? Like in this answer How to post ASP.NET MVC Ajax form using JavaScript rather than submit button
Using the .change() event instead of the .click() event the jQuery part would 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 totally untested code so beware of typos :)

Answer 4

Forms are the classical way of sending a request - therefore it is POST - your GET setup is overruled by that in onChange - submits will always clear the content and replaced with server content - i do some javascript to send using AJAX - cannot see that, so I presume that it does exactly that. your OnChange should execute this AJAX function instead ...

Answer 5

Hmm, what actually worked for me, even on cell phones, which was a problem area, was the following, in my cshtml file for a Partial View. It also includes code to grey out the button and write "Saving..." until the view posts back, which avoids people pounding on the submit button when they get impatient for 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>