ASP.NET AJAX Advance Tips & Tricks (3) JavaScript與Tab的交互

2019-11-11 03:32:31

字體：大中小

供稿：網(wǎng)友

前言

asp.net Ajax Control Toolkit 中的Tab控件非常簡(jiǎn)單易用，對(duì)服務(wù)端和客戶端的支持都非常不錯(cuò)。本篇通過(guò)幾個(gè)FAQ給大家介紹Tab和javaScript的常用交互，以及應(yīng)該注意到的問(wèn)題。

1. TabCantainer的Javascript接口

目前的Tab控件很多，而Altas的Tab控件有點(diǎn)在于JavaScript接口非常豐富，而且非常便于理解和使用，一般常用的有以下幾組：

get_headerText //獲取標(biāo)題文字 set_headerText //設(shè)置標(biāo)題文字 get_headerTab //獲取標(biāo)題Tab set_headerTab //設(shè)置標(biāo)題Tab get_enabled //啟用TabPanel set_enabled //禁用TabPanel get_owner //獲取TabPanel父容器 set_owner //設(shè)置TabPanel父容器 get_scrollBars //獲取滾動(dòng)條狀態(tài) set_scrollBars //設(shè)置滾動(dòng)條狀態(tài) get_tabIndex //獲取TabPanel的序號(hào) _get_active//獲取當(dāng)前活動(dòng)的TabPanel _set_active//設(shè)置當(dāng)前活動(dòng)的TabPanel 復(fù)制代碼

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

2. 常用例子

A. 獲取TabContainer當(dāng)前活動(dòng)的TabPanel

function GetActiveTab(tabControl) { var ctrl = $find(tabControl); var activeid = ctrl.get_activeTab().get_tabIndex(); alert(activeid); }

B. 設(shè)置TabContainer當(dāng)前活動(dòng)的TabPanel

function SetActiveTab(index) { var ctrl = $find("TabContainer1"); var tabpanel = ctrl.get_tabs()[index]; ctrl.set_activeTab(tabpanel); }

3. 修改Tab控件，使其支持鼠標(biāo)移動(dòng)激活

盡管Tab控件比較酷，也很便于使用，但它默認(rèn)的事件是點(diǎn)擊標(biāo)簽來(lái)激活一個(gè)TabPanel，而很多JavaScript Tab和一些第三方控件的Tab都是靠onmouSEOver來(lái)激活一個(gè)TabPanel。如果想要使 Tab控件通過(guò)onmouseover激活TabPanel，我們可以通過(guò)修改源代碼來(lái)實(shí)現(xiàn)：

//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) }, 復(fù)制代碼

4. ClientID問(wèn)題

與一般的ASP.NET服務(wù)端容器一樣，在TabPanel里的控件也會(huì)在Render的時(shí)候重命名，為其生成一個(gè)ClientID，如果需要在JavaScript中對(duì)這些控件進(jìn)行操作，我們必須要獲得它們的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>

然而，如果你實(shí)驗(yàn)上面的代碼，則會(huì)發(fā)現(xiàn)它是不work的，ClientID并沒有正確的獲得，反而產(chǎn)生了稀奇古怪的錯(cuò)誤。

其原因是ASP.NET編譯的順序問(wèn)題，由于AJAX控件是采用Sys.application.add_init()添加到頁(yè)面中的，而我們?cè)谏厦胬又袑?duì)ClientID的綁定在這個(gè)過(guò)程之前，所以產(chǎn)生了這種順序錯(cuò)誤。

解決方案很簡(jiǎn)單，就是把寫在<head></head>中的JavaScript代碼寫到body的末尾，這樣，可以確保能夠在JavaScript代碼中的ClientID綁定時(shí)，Tab已經(jīng)成功添加到頁(yè)面Control Tree，從而解決問(wèn)題：

<%@ 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>

上一篇：JavaScript: Passing by Value or by Reference

下一篇：ASP.NET AJAX Advance Tips & Tricks (3) JavaScript與Tab的交互