MVC 5 中的多个提交模式引导程序答案

【问题标题】：Multiple Submit Modal Bootstrap in MVC 5MVC 5 中的多个提交模式引导程序
【发布时间】：2019-01-16 20:40:29
【问题描述】：

我有 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()
    ....
}

和处理成功表单的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 Deprecated，在浏览了一些文章后，这个解决方案适用于这个警告，但产生了另一个问题。

我尝试在绑定数据之前单击btnAdd 时添加一些脚本：$('#addContainer').html(""); 或$('#addContainer').empty(); 或$('#addModal').data('modal',null); 和其他一些，但它们都不起作用。

我也尝试了unbind()，但没有成功，它仍然返回多个提交。看起来当模态关闭时 javascipt 没有卸载，就像我将脚本放在局部视图中一样。

【问题讨论】：

点击后禁用按钮。它将防止多个。
@Tomato32 我认为您没有清楚地阅读这个问题。禁用按钮是为了防止多次不必要的点击。

标签： javascript asp.net-mvc-5 bootstrap-modal

【解决方案1】：

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

你可以尝试在点击事件触发时解除绑定

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

【讨论】：

嗨，我试图通过删除部分视图中的脚本来删除警告消息，并将带有$.getScript 的脚本放在父级中，我的模态变成这样的错误。我把那个 unbind() 脚本放在哪里了？
是的，我的意思是你可以替换你的点击功能。我已经编辑了答案
奇怪的是还是提交了多次prntscr.com/m8a0or

【解决方案2】：

经过一番研究，我发现unobtrusive 可以在加载 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);
        })
    });
});

【讨论】：