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 完全学习手册>>　张银鹤　梁文新　李新磊　等编著