MVC 5中的多重提交模式引导

Question

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

和处理成功形式的CCD_ 2：

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在模态关闭时没有卸载，就像我把脚本放在部分视图中一样。

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