我陷入了一个非常奇怪的境地。解释起来很复杂，但我会尽力。
问题详细解释：
在每次顶部导航单击（绿色甜甜圈/圆圈）或下一步按钮时，我必须提交表单（如果存在且有效）。如果无效，form.valid() 会触发验证错误并返回 false 将停止任何进一步的传播。这个设置运行得非常完美，直到我注意到一种奇怪的行为，这种行为不是很持久。具体来说，我的第三个选项卡上的表单数据量很大。当我点击下一步按钮时，它实际上应该经历相同的过程：检查现有表单（如果有效），然后提交。 Submit 调用 POST 操作方法，当 post 完成时，它会获取下一个选项卡的视图。它的工作方式有 5/10 次，但有时 GET 在 POST 之前执行，这会导致下一页加载不完整的数据。当我设置断点进行调试时，我看到下一个选项卡的 GET 在当前选项卡的 POST 之前执行。
用户界面解释：
我有一个带有 4 个导航的 UI<a>顶部的按钮 - 在中心总是有一个表单 - 在底部我有上一个和下一个按钮。
表单是在 MVC 中使用构建的Ajax.BeginForm
对于每个导航链接<a>元素在顶部，我有一个 JavaScript 函数
var LoadTabs = function (e, arg) {
// This is to validate a form if one of the top links is clicked and form has incomplete fields...
if (arg !== "prev" && arg !== "next") {
if (!window.ValidateForm(false)) return false;
}
var url = $(this).attr('data'); // this contains link to a GET action method
if (typeof url != "undefined") {
$.ajax(url, { context: { param: arg } }).done(function (data) {
$('#partialViewContainer').html(data);
});
}
}
上面的这个函数绑定到页面加载时的每个顶部链接。
$('.navLinks').on('click', LoadTabs);
我的下一个和上一个按钮基本上会触发单击事件，即LoadTabs功能。
$('button').on('click', function () {
if (this.id === "btnMoveToNextTab") {
if (!window.ValidateForm(true)) return false;
$.ajax({
url: url,
context: { param: 'next' },
method: "GET",
data: data,
success: function(response) {
if (typeof response == 'object') {
if (response.moveAhead) {
MoveNext();
}
} else {
$('#mainView').html(response);
}
ScrollUp(0);
}
});
}
if (this.id === "btnMoveToPreviousTab") {
MoveBack();
}
return false;
});
MoveNext() Implementation is as below:
function MoveNext() {
var listItem = $('#progressbarInd > .active').next('li');
listItem.find('.navLink').trigger('click', ['next']);
ScrollUp(0);
}
问题是，由于某些原因，当导航链接 3 处于活动状态并且我点击“下一步”按钮时 - 不是首先通过 form.submit() 发布表单 - 导航 4 被触发 - 因此导航 4 的 GET 在导航的表单 POST 之前运行3.
我的 ValidateForm 方法基本上只是检查表单是否存在并且有效，然后提交，否则返回 false。其如下：
function ValidateForm(submit) {
var form = $('form');
// if form doesn't exist on the page - return true and continue
if (typeof form[0] === "undefined") return true;
// now check for any validation errors
if (submit) {
if (!$(form).valid()) {
return false;
} else {
$(form).submit();
}
}
else {
return true;
}
return true;
}
我的猜测是 form.submit 确实会被触发，但由于提交需要更长的时间才能完成，因此它会继续按钮中的下一个代码块onclick event.
我首先认为这是一个服务器端问题，因为在 POST 中我用几个循环保存了大量数据，并且任何处理繁重的代码块我都有该部分
var saveTask = Task.Factory.StartNew(() => ControllerHelper.SomeMethod(db, model)); Task.WaitAll(saveTask);
WaitAll 将等待并暂停执行，直到 SomeMethod 完成执行。我不确定如何在 JavaScript 中锁定进程并等待它完成执行。因为我想如果我可以以某种方式锁定 ValidateForm 中的 form.submit() 直到其完成处理..也许通过回调方法...
如果有人能引导我走向正确的方向，我将非常感谢您的帮助。如果您需要更多信息，请告诉我，我很乐意提供！
Ajax 是异步的，您的表单提交正在使用Ajax.BeginForm()正在使用ajax。发生的情况是，当您单击“下一步”按钮时，会触发$('button').on('click', function () { code:
ValidateForm()函数（并假设其有效），
你的$(form).submit();代码行开始进行 ajax POSTreturn true;行而ajax
呼叫正在执行。ValidateForm()函数返回true，则$.ajaxGET 调用现在开始，但此时 ajax POST 在ValidateForm()函数可能尚未完成执行导致
您的 GET 方法返回无效数据您需要更改代码，以便在 POST 方法调用完成后立即进行 GET 调用。自从你使用$.ajax()整个代码中的方法，以及$.ajax()给你更多的灵活性，似乎没有必要使用Ajax.BeginForm()（以及包括的额外开销jquery.unbtrusive-ajax.js脚本）。您还应该处理表格.submit()函数（如果您不希望“下一步”按钮成为表单中的提交按钮，您可以触发.submit()按钮中的事件.click()处理程序）
$(document).on('submit', 'form', function(e) {
e.preventDefault(); // cancel default submit
var form = $(this);
if (!form.valid()) {
return; // will display the validation errors
}
.... // get the relevant urls to the GET and POST methods etc
$.post(postUrl, form.serialize(), function(data) {
.... // not clear if your [HttpPost] method returns anything
}).done(function() {
$.get(getUrl, someData, function(response) {
.... // Update the DOM with the next form?
.... // Re-parse the validator for client side validation
}
}).fail(function() {
.... // code that you might run if the code in the [HttpPost] method fails
});
});
您还应该考虑返回适当的“下一个”视图[HttpPost]方法，这样您就不需要再次调用服务器来获取它。
也值得一读延迟对象文档以及使用$.when(), $.then() etc.