MVC3 Razor Ajax Form Submit

问题:

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?

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

回答2:

this may help

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

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

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

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

回答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>