javascript - MVC 5 中的多重提交模式 Bootstrap

Question

我有 btnAdd 按钮，它将把部分 View 加载到引导模式中，如下所示:

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

并且部分 View 加载如下:

@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？因为远程验证只是在表单加载后才起作用。为什么我不在部分 View 中加载它？当我将其加载到部分 View 中时，我收到了一些警告 XMLHttpRequest Deprecated，并且在浏览了一些文章后，此解决方案适用于该警告，但又产生了另一个问题。

我尝试在绑定(bind)数据之前单击 btnAdd 时添加一些脚本:$('#addContainer').html(""); 或 $('#addContainer').empty(); 或 $('#addModal').data('modal',null); 以及其他一些，但没有一个是在职的。

我也尝试了 unbind() 但不起作用，它仍然返回多个提交。看起来当模式关闭时 javascipt 没有卸载，就像我将脚本放在部分 View 中一样。

Answer 1

好吧，由于某种原因，打开模式时按钮单击被重新绑定(bind)。您还在部分 View 中加载一些脚本吗？

您可以尝试的是在触发类似内容时取消绑定(bind)点击事件

$('#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 Deprecated”如果您的代码正常工作