ASP.NET AJAX Advance Tips & Tricks (3) JavaScript与Tab的交互-优快云博客

本文详细介绍了ASP.NET AJAX Control Toolkit中的Tab控件，并提供了如何通过JavaScript与其交互的示例，包括获取和设置活动TabPanel、修改Tab控件行为以支持鼠标悬停激活等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

ASP.NET AJAX Control Toolkit 中的Tab控件非常简单易用，对服务端和客户端的支持都非常不错。本篇通过几个FAQ给大家介绍Tab和JavaScript的常用交互，以及应该注意到的问题。

1. TabCantainer的JavaScript接口

目前的Tab控件很多，而Altas的Tab控件有点在于JavaScript接口非常丰富，而且非常便于理解和使用，一般常用的有以下几组：

    get_headerText //获取标题文字

    set_headerText //设置标题文字

    get_headerTab //获取标题Tab

    set_headerTab //设置标题Tab

    get_enabled //启用TabPanel

    set_enabled //禁用TabPanel

    get_owner //获取TabPanel父容器

    set_owner //设置TabPanel父容器

    get_scrollBars //获取滚动条状态

    set_scrollBars //设置滚动条状态

    get_tabIndex //获取TabPanel的序号

    _get_active//获取当前活动的TabPanel

    _set_active//设置当前活动的TabPanel

而所有的接口可以在源代码的Tabs.js文件中找到：

2. 常用例子

A. 获取TabContainer当前活动的TabPanel

        function GetActiveTab(tabControl) {

            var ctrl = $find(tabControl);

            var activeid = ctrl.get_activeTab().get_tabIndex();

            alert(activeid);

        }

B. 设置TabContainer当前活动的TabPanel

        function SetActiveTab(index) {

            var ctrl = $find("TabContainer1");

            var tabpanel = ctrl.get_tabs()[index];

            ctrl.set_activeTab(tabpanel);

        }

3. 修改Tab控件，使其支持鼠标移动激活

尽管Tab控件比较酷，也很便于使用，但它默认的事件是点击标签来激活一个TabPanel，而很多JavaScript Tab和一些第三方控件的Tab都是靠onmouseover来激活一个TabPanel。如果想要使 Tab控件通过onmouseover激活TabPanel，我们可以通过修改源代码来实现：

//in the "Tab.js" change the “_header_onmouseover” (near the 522nd line) as following:

    _header_onmouseover: function(e) {

        Sys.UI.DomElement.addCssClass(this._tab, "ajax__tab_hover");

        this.get_owner().set_activeTab(this);//添加这一行(add this line to the original code)

    },

4. ClientID问题

与一般的ASP.NET服务端容器一样，在TabPanel里的控件也会在Render的时候重命名，为其生成一个ClientID，如果需要在JavaScript中对这些控件进行操作，我们必须要获得它们的ClientID，如下的代码是一般的方法：

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    public string tabContentTableClientID

    {

        get { return tabContentTable.ClientID; }

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function getTabsOnSuccess() {

            document.getElementById('<%=tabContentTableClientID%>').innerHTML = "Hello world";

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </cc1:ToolkitScriptManager>

        <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="381px"

            Width="536px">

            <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">

                <HeaderTemplate>

                    TabPanel1

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                    <asp:Panel ID="tabContentTable" runat="server">

                    </asp:Panel>

                </ContentTemplate>

            </cc1:TabPanel>

            <cc1:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">

                <ContentTemplate>

                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </ContentTemplate>

            </cc1:TabPanel>

        </cc1:TabContainer>

        <input id="Button1" type="button" value="button" onclick="getTabsOnSuccess();" />

    </div>

    </form>

</body>

</html>

然而，如果你实验上面的代码，则会发现它是不work的，ClientID并没有正确的获得，反而产生了稀奇古怪的错误。

其原因是ASP.NET编译的顺序问题，由于AJAX控件是采用Sys.Application.add_init()添加到页面中的，而我们在上面例子中对ClientID的绑定在这个过程之前，所以产生了这种顺序错误。

解决方案很简单，就是把写在<head></head>中的JavaScript代码写到body的末尾，这样，可以确保能够在JavaScript代码中的ClientID绑定时，Tab已经成功添加到页面Control Tree，从而解决问题：

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    public string tabContentTableClientID

    {

        get { return tabContentTable.ClientID; }

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </cc1:ToolkitScriptManager>

        <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="381px"

            Width="536px">

            <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">

                <HeaderTemplate>

                    TabPanel1

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                    <asp:Panel ID="tabContentTable" runat="server">

                    </asp:Panel>

                </ContentTemplate>

            </cc1:TabPanel>

            <cc1:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">

                <ContentTemplate>

                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </ContentTemplate>

            </cc1:TabPanel>

        </cc1:TabContainer>

        <input id="Button1" type="button" value="button" onclick="getTabsOnSuccess();" />

    </div>

    </form>

    <script type="text/javascript">

        function getTabsOnSuccess() {

            document.getElementById('<%=tabContentTableClientID%>').innerHTML = "Hello world";

        }

    </script>

</body>

</html>