Question

我有一个分为标签的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" }))

每个标签上都有一个带有不同ID的保存按钮。

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

每个标签都包含一个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');
    });

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

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

现在运行它时，表单会多次提交，导致我跳入调试器，然后两次发布相同的数据。

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

我想确保代码在我真正想做的事情上是正确的。这些应该是3个单独和单独的提交。我是否将“提交”按钮更改为按钮类型而不是提交，或者是否应该在javascript中有更多内容以防止第二次提交发生？ preventDefaults还是什么？

谢谢！

编辑：还应该包含Ajax选项，它们出现在每个选项上并对应于选项卡，它们的名称都不同，但以防“Post”方法与此有关。

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

Answer 1

从评论中重新发布我的回答：

问题是提交按钮实际上是在提交表单时，而选择器$('frmCreate1').trigger('submit');没有做任何事情，因为它没有返回任何元素。当通过添加“＃”使选择器有效以便它查找id而不是标记名称时，那也会触发提交。因此双提交。如果你选择一个或那个应该停止双重提交。

Answer 2

似乎表单未提交ajaxily，请确保您已包含

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

在您的布局中

，同样要启用unobtrusiveJavascript您必须在appSetting部分下的配置文件中将相关标记设置为true

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

为什么（'＃formId'）。触发器（'submit'）导致我的表单在（'formId'）时多次发布。触发器（'submit'）不会？

2 个答案: