Question

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

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

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

这是我的jQuery UI Tabs选择器中的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）直到获得响应，然后通过更改更宽范围的变量返回你想要的内容

带有服务器端验证的jQuery Tabs向导

1 个答案: