Javascript MVC5中的多提交模式引导

我有

btnAdd

按钮，它将部分视图加载到引导模式，如下所示：

$('#btnAdd').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);

        $.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
        $.getScript("/Scripts/jquery.validate-vsdoc.js");
        $.getScript("/Scripts/jquery.validate.js");
        $.getScript("/Scripts/jquery.validate.min.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

        $('#addModal').modal('show');
    });
});

@using (Ajax.BeginForm("Create", "MasterBanks", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp", OnSuccess = "CreateSuccess" }))
{
    @Html.AntiForgeryToken()
    ....
}

加载的局部视图如下所示：

$('#btnAdd').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);

        $.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
        $.getScript("/Scripts/jquery.validate-vsdoc.js");
        $.getScript("/Scripts/jquery.validate.js");
        $.getScript("/Scripts/jquery.validate.min.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

        $('#addModal').modal('show');
    });
});

@using (Ajax.BeginForm("Create", "MasterBanks", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp", OnSuccess = "CreateSuccess" }))
{
    @Html.AntiForgeryToken()
    ....
}

以及处理成功表单的

CreateSuccess

：

function CreateSuccess(data) {
    if (data !== "success") {
        $('#addContainer').html(data);
        return;
    }
    $('#addModal').modal('hide');
    $('#addContainer').html("");

    var grid = new MvcGrid(document.querySelector('#data-table'));
    grid.reload();
}

问题是当我单击按钮时，每次我打开模式时，无论是否成功，或者只是打开模式并再次关闭而不提交表单。下次我提交表单时，数据将被发布几次，就像我打开表单的次数一样

如果删除

$.getScript

，则不会出现问题

$.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
$.getScript("/Scripts/jquery.validate-vsdoc.js");
$.getScript("/Scripts/jquery.validate.js");
$.getScript("/Scripts/jquery.validate.min.js");
$.getScript("/Scripts/jquery.validate.unobtrusive.js");
$.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

为什么我要使用

$.getScript

？因为远程验证在加载表单之后才开始工作。为什么我不在局部视图中加载它？当在部分视图中加载时，我收到了一些警告

XMLHttpRequest已被弃用

，在浏览了一些文章之后，这个解决方案解决了这个警告，但产生了另一个问题

我尝试在绑定数据之前单击

btnAdd

时添加一些脚本：

$（'#addContainer'）.html（“”）

或

$（'#addContainer'）.empty（）

或

$（'#addModal'）。数据（'modal'，null）

和其他一些，但它们都不起作用

---

我也尝试了

unbind（）

，但不起作用，它仍然返回多个submit。当模式关闭时，看起来javascipt没有卸载，就像我把脚本放在部分视图中一样。

好吧，由于某种原因，打开模式时按钮点击被重新绑定。您是否也在局部视图中加载了一些脚本

您可以尝试的是在触发类似的事件时解除click事件的绑定

$('#btnAdd').unbind().click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);

        $.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
        $.getScript("/Scripts/jquery.validate-vsdoc.js");
        $.getScript("/Scripts/jquery.validate.js");
        $.getScript("/Scripts/jquery.validate.min.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

        $('#addModal').modal('show');
    });
});

此外，您还可以忽略警告消息“XMLHttpRequest已弃用”

---

如果您的代码正常工作

经过一些研究，我发现加载ajax表单后可以重新解析

不引人注目的

：

$('#btnAdd').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);
        $('#addModal').modal('show');

        $('form').each(function() {
            var $el = $(this);
            $el.data('validator', null);
            $.validator.unobtrusive.parse($el);
        })
    });
});

---

您好，我正在试图删除警告消息，方法是删除部分视图中的脚本，并将带有

$的脚本放入父视图中。getScript

和我的模式将变成如下错误。我把unbind（）脚本放在哪里了？是的，我的意思是你可以替换你的Click函数。我在Answerly中进行了编辑，奇怪的是，它仍然提交了多次，只是在单击后禁用按钮。这将防止多次重复。我认为你没有把问题读清楚。禁用按钮用于防止多次不必要的单击。