MVC3 Razor Ajax Form Submit

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?

Solution 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.

Solution 2

this may help

@Html.CheckBox("Attended", item.Attended, new { OnChange = "submitForm"});

function submitForm(e)
{
    document.forms[0].submit();
}

Solution 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 :)