构建 jQuery 选项卡的更好方法

Question

我在 ASP.NET MVC 2 Web 应用程序中使用 jQuery UI 选项卡。应用程序的一部分要求我在离开选项卡时进行错误检查。我正在通过包含选项卡的 aspx 文件中的此脚本来执行此操作。

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            cache: true,
            select: function (event, ui) {
                var $tabs = $('#tabs').tabs();
                switch ($tabs.tabs('option', 'selected')) {
                    case 0:
                        $.post("User/Personal", $("#PersonalForm").serialize(), function (data, success) {
                            if (success) {
                                $("#PersonalForm").html(data);
                            }
                        });
                        break;

                    case 1:
                        $.post("User/Account", $("#AccountForm").serialize(), function (data, success) {
                            if (success) {
                                $("#AccountForm").html(data);
                            }
                        });
                        break;

                    default:
                        break;
                }

                return true;
            },
            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab. We will fix this as soon as possible.");
                }
            }
        });
    });
</script>

还有其他 switch 语句（为简洁起见已删除）。基本上，此代码允许通过数据注释在选项卡上进行 MVC 验证 - 工作得非常好。无论如何，我想知道是否可以根据文档中的任何选项卡“生成”此代码。 （如果不是，我基本上必须在 switch 语句中手动编写 case 语句，这似乎有点浪费。）

另外，作为旁注，我对每个选项卡使用 ASP 控件来保存各种数据（这也是各个表单所在的位置）。这可能会对解决方案产生影响。

Answer 1

当用户离开选项卡时，此代码会遍历您要离开的选项卡上的每个表单，并像在您的代码中一样发送一个 ajax 请求。不同之处在于它根据表单的action 属性确定将其发送到何处，而不必在 switch 语句中指定。这意味着PersonalForm 的动作属性必须是User/Personal 等等。

select: function(e, ui) {
    var tab_index = $('#tabs').tabs('option', 'selected');
    var panel_id = $("ul li a:eq(" + tab_index + ")", this).attr("href");
    var panel = $(panel_id); //the content of the tab

    //For each form in the panel, submit it via AJAX and update its html according to the answer
    $(panel).find("form").each(function() {
        var that = this;
        $.post( $(this).attr("action"), $(this).serialize(), function(data, success) {
            if (success) {
                $(that).html(data);
            }
        });
    });
}

当然，如果页面上的表单不超过一个，您可以跳过each，如果只有某些表单应该以这种方式提交，您可以向它们添加一个类来过滤选择