Question

我使用MVC3 Helper来生成我的Ajax表单：

@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()"});
            }

我只是找不到在复选框的更改事件上提交表单的正确方法。我不希望我的用户单击提交按钮。

HTMLAttribute有效，但在更改时会发生回发而不是ajax请求。

有人知道答案吗？

Answer 1

首先，在表单中创建一个提交按钮，然后通过设置属性style="display:none;"将其隐藏。然后，不要在onchange事件中使用this.form.submit()，而是使用以下内容：

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

这将调用jquery.unobtrusive-ajax.js脚本，并完成您的Ajax提交。

Answer 2

这可能会有所帮助

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

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

Answer 3

使用jQuery触发提交怎么样？就像在这个答案How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

中一样

使用.change（）事件而不是.click（）事件，jQuery部分看起来像这样：

$(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"});
}

这是完全未经测试的代码，因此请注意拼写错误：）

Answer 4

表单是发送请求的经典方式 - 因此它是POST - 您的GET设置被onChange推翻 - 提交将始终清除内容并替换为服务器内容 - 我使用AJAX发送一些javascript - 不能看到这一点，所以我认为它确实如此。你的OnChange应该执行这个AJAX函数......

Answer 5

嗯，在我的部分视图的cshtml文件中，实际上对我有用的东西，即使是在手机上，这是一个问题区域，如下所示。它还包括灰色按钮的代码并写入“正在保存...”，直到视图回发，这避免了当人们对缓慢的SQL Server不耐烦时，人们会对提交按钮施加压力。

<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

和

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

MVC3 Razor Ajax表单提交

5 个答案: