ASP.NET AJAX Control Toolkit 中的Tab控件非常简单易用,对服务端和客户端的支持都非常不错。本篇通过几个FAQ给大家介绍Tab和JavaScript的常用交互,以及应该注意到的问题。(1. TabCantainer的JavaScript接口 2. 常用例子 3. 修改Tab控件,使其支持鼠标移动激活 4. ClientID问题)
前言
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,如下的代码是一般的方法:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code1
<%@ 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,从而解决问题:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code2
<%@ 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>