Question

我有一个包含ajax表单的局部视图。这个局部视图通过ajax调用加载到我的页面上。我可以编辑字段并提交表单，一切正常。但是，如果我重新加载表单N次，单击保存按钮时表单将提交N次。

这是局部视图的代码....

@model blah blah...

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript</script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"></script>

<div id="modalForm">
  @using (Ajax.BeginForm("Edit", "Info", new{id = Model.UserId}, AjaxOptions{OnSuccess = "infoUpdate" }))
  {


       //FORM FIELDS GO HERE

      <input type="submit" value="Save" />


  }
</div>

导致此行为的错误是什么？

Answer 1

每次重新加载表单时，都会触发一个触发器来提交表单。因此，如果您重新加载表单n次，则必须提交。

如果可能，请尝试仅加载一次表单。

单击提交按钮时，您可以尝试取消绑定提交触发器：

<input type="submit" value="Save" onClick="submitForm()" />

var submitForm = function() {
    $("#formAddressShipping form").trigger('submit');    
    $("#formAddressShipping form").unbind('submit');
    return false;
};

Answer 2

将jquery.unobtrusive-ajax.js移到外部，解决了我的问题。

Answer 3

我遇到了同样的问题并解决了如下问题。我有一份清单。从该列表中，我在UI对话框中调用新建，更新，删除表单。成功将关闭对话框并返回列表并更新UI。错误将显示验证消息和对话框将保持不变。原因是AjaxForm在每次提交点击中多次回发。

解决方案：

//Link click from the list -

$(document).ready(function () {
            $("#lnkNewUser").live("click", function (e) {
                e.preventDefault();
                $('#dialog').empty();
                $('#dialog').dialog({
                    modal: true,
                    resizable: false,
                    height: 600,
                    width: 800,
                }).load(this.href, function () {
                    $('#dialog').dialog('open');
                });
            });

//Form submit -
$('#frmNewUser').live('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: this.action,
                    type: this.method,
                    data: $('#frmNewUser').serialize(),
                    success: function (result) 
                    {
                        debugger;
                        if (result == 'success') {
                            $('#dialog').dialog('close');
                            $('#dialog').empty();
                            document.location.assign('@Url.Action("Index", "MyList")');
                        }
                        else {
                            $('#dialog').html(result);
                        }
                    }
                });

        return false;
    });

脚本应该在List UI中。不在部分视图中（新建，更新，删除）

//Partial View -

@model User

@Scripts.Render("~/bundles/jqueryval")

@using (Html.BeginForm("Create", "Test1", FormMethod.Post, new { id = "frmNewUser", @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.UserID)
<p>@Html.ValidationMessage("errorMsg")</p>
...

}

//Do not use Ajax.BeginForm

//Controller -

    [HttpPost]
    public ActionResult Create(User user)
    {
        if (ModelState.IsValid)
        {
            try
            {
                user.CreatedDate = DateTime.Now;
                user.CreatedBy = User.Identity.Name;

                string result = new UserRepository().CreateUser(user);
                if (result != "")
                {
                    throw new Exception(result);
                }

                return Content("succes");
            }
            catch (Exception ex)
            {
                 ModelState.AddModelError("errorMsg", ex.Message);
            }
        }
        else
        {
            ModelState.AddModelError("errorMsg", "Validation errors");
        }
        return PartialView("_Create", user);
    }

希望有人能从中得到帮助。谢谢大家的贡献。归功于http://forums.asp.net/t/1649162.aspx

Answer 4

只是因为有人仍然在寻找这个问题 - 如果你多次引用jquery.unobstrusive js，也会出现这个问题。对我来说，我有布局和部分。表格提交了4次，可能是现场统计。从部分固定它删除js。感谢这个帖子ASP.NET AJAX.BeginForm sends multiple requests

Answer 5

将dQuery脚本移动到DIV中。这似乎解决了这个问题。

权衡是每个帖子都会为每个脚本做一个get。

Answer 6

我的第一篇文章面临同样的问题

这是适合我的解决方案..

@using (Html.BeginForm("", "", FormMethod.Post, new { enctype = "multipart/form-data", id = "MyForm" }))
{
    //form fields here..
    //don't add a button of type 'submit', just plain 'button' 
    <button type="button" class="btn btn-warning" id="btnSave" onClick="submitForm()">Save</button>  

    <script type="text/javascript">
        var submitForm = function () {
            if ($("#"MyForm").valid())
            { 
                //pass the data annotation validations...                  
                //call the controller action passing the form data..
                handleSaveEvent($("#MyForm").serialize());
            } 
            return false;
        };
    <script>
}

通过ajax加载的ASP.NET MVC表单多次提交

6 个答案: