为什么('#formId').trigger('submit')导致我的表单多次发布，而‘formId').trigger('submit')却没有?

I have a MVC3 page that is split into tabs. Each tab has a partial view on it with an AJAX form with different ids.

我有一个MVC3页面，它被拆分为选项卡。每个选项卡都有一个带有不同id的AJAX表单的部分视图。

@using (Ajax.BeginForm("Create1", "ControllerName", ajaxOptions, new { id = "frmCreate1" }))
...
@using (Ajax.BeginForm("Create2", "ControllerName", ajaxOptions, new { id = "frmCreate2" }))
...
@using (Ajax.BeginForm("Create3", "ControllerName", ajaxOptions, new { id = "frmCreate3" }))

Each tab has a save button on it with different ids.

每个选项卡上都有一个带有不同id的save按钮。

<input type="submit" id="btnSave1" />
...
<input type="submit" id="btnSave2" />
...
<input type="submit" id="btnSave3" />
...

Each tab includes a javascript file that has handlers for the buttons:

每个选项卡包含一个javascript文件，其中包含按钮的处理程序:

// Submit Button
    $('#btnSave1').button({ label: "Save" });
    $('#btnSave1').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 1, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate1').trigger('submit');
    });

...
// Submit Button
    $('#btnSave2').button({ label: "Save" });
    $('#btnSave2').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 2, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate2').trigger('submit');
    });
...

// Submit Button
    $('#btnSave3').button({ label: "Save" });
    $('#btnSave3').click(function () {
        $.blockUI({ message: 'We are constructing your new Type 3, please wait just a moment...', theme: true, title: 'Saving' });
        $('frmCreate3').trigger('submit');
    });

Everything is submitting properly to the back end and it's getting the data it needs from the form. However I changed the selector in the method to

所有东西都正确地提交到后端，它从表单中获取它需要的数据。但是，我将方法中的选择器更改为

$('#frmCreate1).trigger('submit');

and now when running it the form gets submitted more than once causing me to jump in the debugger and subsequently post the same data twice.

现在，当运行它时，表单被提交了不止一次，导致我在调试器中跳转并随后发布两次相同的数据。

I'm guessing that it's submitting the form via Ajax with the right selector and then subsequently firing the actual submit for the form again but I'm not for sure what's happening.

我猜它是用正确的选择器通过Ajax提交表单，然后再次触发表单的实际提交，但我不确定发生了什么。

I want to make sure the code is correct in terms of what I'm really trying to do. These should be 3 single and separate submits. Do I change the "Submit" buttons to just button types instead of submit or should there be more in the javascript to prevent that second submit from happening? preventDefaults or something?

我想确保代码在我真正想做的方面是正确的。这些应该是3个单独的和单独的提交。我是将“提交”按钮更改为按钮类型而不是提交，还是应该在javascript中添加更多的按钮来防止第二次提交?preventDefaults还是什么?

Thanks!

谢谢!

Edit: Should also include the Ajax Options, they occur on each and correspond to the tabs, they are all named differently but just in case the "Post" method had anything to do with this.

编辑:还应该包括Ajax选项，它们分别出现在每个选项卡上，它们都以不同的方式命名，但是以防“Post”方法与此有任何关系。

@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        HttpMethod = "Post",
        UpdateTargetId = "tabs-1",
    };
}

2 个解决方案

#1

Re-posting my answer from the comments:

在评论中重新发布我的答案:

The issue was that the submit button was actually submitting the form while the selector $('frmCreate1').trigger('submit'); was doing nothing since it didn't return any elements. When the selector was made valid by adding the '#' so that it looked for an id rather than a tag name, then that triggered the submit as well. Hence the double submit. If you pick one or the other that should stop the double submit.

问题是，submit按钮实际上是在提交表单，而selector $('frmCreate1').trigger('submit');因为它不返回任何元素，所以什么都不做。当选择器通过添加“#”使其查找id而不是标记名而有效时，也会触发submit。因此,提交的两倍。如果你选择一个或另一个应该停止双重提交。

#2

it seems like the form is not submitting ajaxily make sure that you have included

看起来这个表单并没有半吊子地提交，确保你已经包含了

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

in your layout, also to enable unobtrusiveJavascript you have to set related flags to true in your config file under the appSetting section

在布局中，也要启用unobtrusiveJavascript，必须在appset部分的配置文件中将相关标志设置为true

  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

#1