带有服务器端验证的 jQuery 选项卡向导

Question

我在 Asp.Net MVC 3 网站中利用 jQuery UI 选项卡创建了一个“签出”向导。向导中的每个选项卡都会加载包含表单的部分视图。如果表单有效，我将发布表单数据并将其保存到数据库中。

目前，我可以检查客户端验证，如果当前选项卡无效，则使用此处描述的方法单击下一个或上一个按钮时阻止选择下一个/上一个选项卡 http://jqueryui.com/demos/tabs/#...prevent_switching_to_the_tab_on_click_depending_on_form_validation。

但是，并非所有验证都可以在客户端完成，因为我们需要执行一些服务器端检查。因此，如果选项卡通过了客户端验证，那么我会提交表单并检查从服务器返回的响应。如果服务器端验证通过，则返回空字符串，但如果失败，我会返回该选项卡的相同部分视图。

这是我的 jQuery UI 选项卡选择器中的 select 函数：

select: function (event, ui) {

            var checkOutTabs = $(".checkout-tabs").tabs();
            var currentTabIndex = checkOut.getSelectedTabIndex();
            var currentTab = $(".checkout-step").get(currentTabIndex);

            var isValid = checkOut.validateTab(currentTab, ui.index);

            //prevent tab change
            if (!isValid) {
                return false;
            }

            var form = $(currentTab).find("form");

            //Submit this tab
            $.post(form.attr("action"), form.serialize(), function (data) {

                if (!data) {
                    checkOutTabs.tabs("enable", ui.index + 1);
                    return true;
                } else {
                    $(currentTab).find(".checkout-step").parent().html(data);
                    return false;
                }

            });
        }

我遇到的问题是，一旦我调用 jQuery $.post() 方法，选项卡就会切换到下一个选项卡，无论我返回 true 还是 false。我发现一篇文章（ Better Way to Build jQuery Tabs ）正在做类似的实施，但他们没有报告有这个问题。我做错了什么，还是这是预期的行为？

Answer 1

$.post 立即返回，因为它是异步的

，也许您必须阻塞（在 $.ajaxOptions 或其他内容中使用 async = false ）直到获得响应，然后通过更改范围更广的变量返回您想要的内容