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

Question

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

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

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

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

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 或其他东西)直到获得响应，然后通过更改更广泛范围的变量来返回你想要的内容