代码之家 › 专栏 › 技术社区 › JasCav

构建jquery选项卡的更好方法

asp.net-mvc-2 jquery-ui jquery

JasCav · 技术社区 · 14 年前

我正在ASP.NET MVC 2 Web应用程序中使用jquery用户界面选项卡。应用程序的一部分要求当我从选项卡切换开时进行错误检查。我是通过包含选项卡的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语句中的ever case语句,这似乎是一种浪费。)

另外,作为一个附加说明,我正在为每个选项卡使用ASP控件来保存各种数据(这些数据也是单个窗体所在的位置)。这可能会对解决方案产生影响。

1 回复 | 直到 14 年前

Simen Echholt 14 年前

当用户离开一个选项卡时,这段代码将遍历您要离开的选项卡上的每个表单,并像在代码中那样发送一个Ajax请求。区别在于它根据表单的 action 属性,而不必在switch语句中指定它。这意味着 PersonalForm 的action属性必须为 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 如果只有某些表单应该以这种方式提交,则可以向它们添加一个类来筛选所选内容。