MVC 5 中的多个提交模式 Bootstrap

Question

我有 btnAdd 按钮，它将部分视图加载到 bootstrap 模态中，如下所示：

$('#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); 和其他一些，但是 none 他们正在工作。

我也尝试过 unbind() 但没有用，它仍然 return 多次提交。看起来当模式关闭时 javascipt 没有卸载，就像我把脚本放在局部视图中一样。

Answer 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" 如果您的代码正常工作

Answer 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);
        })
    });
});

MVC 5 中的多个提交模式 Bootstrap

Multiple Submit Modal Bootstrap in MVC 5

javascript

bootstrap-modal

asp.net-mvc-5