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?

score 9 · Accepted Answer · answered Aug 30 '11 at 17:29

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.

score 2 · Answer 2 · edited Apr 02 '12 at 19:46

2

this may help

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

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

edited Apr 02 '12 at 19:46

µBio

10,668
6
38
56

answered Nov 28 '11 at 13:24

Mandoleen

2,591
2
20
17

score 1 · Answer 3 · edited May 23 '17 at 10:27

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

score 0 · Answer 4 · answered Sep 23 '12 at 22:01

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>

score 0 · Answer 5 · answered Aug 30 '11 at 12:28

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

MVC3 Razor Ajax Form Submit

5 Answers5

Linked