AjaxToolKit学习笔记 之 TabContainer

1.功能描述

Windows中的选项卡大家应该并不陌生，此方式可以节约页面中的空间．此控件提供了直接生成选项卡的功能．

 

2.属性说明

OnClientActiveTabChanged ：用于指定单击选项卡时触发的事件．

CssClass ：tab的自定义样式．

ActiveTabIndex ：第一个看到的tab．

Height ：标签内内容模板的高度.

Width ：标签内内容模板的宽度．

ScrollBars ：是否显示滚动条（取值：None, Horizontal, Vertical, Both, Auto）．

 

Enabled ：是否显示标签．

OnClientClick ：标签点击时触发的功能函数（JS　Function）．

HeaderText ：标签标题．

HeaderTemplate ：标题头模板．

ContentTemplate ：内容模板．

 

3.实例代码

3.1　客户端代码

代码

< asp:TabContainer  ID ="TabContainer1"  runat ="server"  ActiveTabIndex ="1" >
         < asp:TabPanel  runat ="server"  HeaderText ="TabPanel1"  ID ="TabPanel1" >
         < HeaderTemplate > 手机 </ HeaderTemplate >
         < ContentTemplate >
             < asp:GridView  ID ="GridView1"  runat ="server" >
             </ asp:GridView >
         </ ContentTemplate >
         </ asp:TabPanel >
         < asp:TabPanel  runat ="server"  HeaderText ="TabPanel2"  ID ="TabPanel2" >
         < HeaderTemplate > 数码 </ HeaderTemplate >
         < ContentTemplate >
             < asp:GridView  ID ="GridView2"  runat ="server" >
             </ asp:GridView >
         </ ContentTemplate >
         </ asp:TabPanel >
     </ asp:TabContainer >

 

 

3.2　服务器端代码

代码

protected   void  Page_Load( object  sender, EventArgs e)
    {
        DataTable dt  =  GetCityTable();
        DataTable dt2  =  GetProvinceTable();
         this .GridView1.DataSource  =  dt.DefaultView;
         this .GridView1.DataBind();
         this .GridView2.DataSource  =  dt2.DefaultView;
         this .GridView2.DataBind();
    }
     public  DataTable GetProvinceTable()
    {
        DataTable dt  =   new  DataTable();
        DataColumn dc;
        DataRow dr;

        dc  =   new  DataColumn();
        dc.ColumnName  =   " province_name " ;
        dt.Columns.Add(dc);

        dc  =   new  DataColumn();
        dc.ColumnName  =   " province_value " ;
        dt.Columns.Add(dc);

        dr  =  dt.NewRow();
        dr[ " province_name " ]  =   " 广东 " ;
        dr[ " province_value " ]  =   " guangdong " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_name " ]  =   " 江西 " ;
        dr[ " province_value " ]  =   " jiangxi " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_name " ]  =   " 山西 " ;
        dr[ " province_value " ]  =   " shanxi " ;
        dt.Rows.Add(dr);

         return  dt;
    }

     public  DataTable GetCityTable()
    {
        DataTable dt  =   new  DataTable();
        DataColumn dc;
        DataRow dr;

        dc  =   new  DataColumn();
        dc.ColumnName  =   " province_value " ;
        dt.Columns.Add(dc);

        dc  =   new  DataColumn();
        dc.ColumnName  =   " city_name " ;
        dt.Columns.Add(dc);

        dc  =   new  DataColumn();
        dc.ColumnName  =   " city_value " ;
        dt.Columns.Add(dc);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " guangdong " ;
        dr[ " city_name " ]  =   " 广州 " ;
        dr[ " city_value " ]  =   " guangzhou " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " guangdong " ;
        dr[ " city_name " ]  =   " 深圳 " ;
        dr[ " city_value " ]  =   " shengzhen " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " jiangxi " ;
        dr[ " city_name " ]  =   " 南昌 " ;
        dr[ " city_value " ]  =   " nanchang " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " jiangxi " ;
        dr[ " city_name " ]  =   " 上饶 " ;
        dr[ " city_value " ]  =   " shangrao " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " shanxi " ;
        dr[ " city_name " ]  =   " 太原 " ;
        dr[ " city_value " ]  =   " taiyuan " ;
        dt.Rows.Add(dr);

        dr  =  dt.NewRow();
        dr[ " province_value " ]  =   " shanxi " ;
        dr[ " city_name " ]  =   " 刑台 " ;
        dr[ " city_value " ]  =   " xingtai " ;
        dt.Rows.Add(dr);

         return  dt;
    }

 

 

4.试验过程中碰到的问题

无

5.总结

无

6.参考文档

http://www.asp.net/ajaxlibrary/act_TabContainer.ashx

<<Ajax 完全学习手册>>　张银鹤　梁文新　李新磊　等编著