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 客户端代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<
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 >
< 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 服务器端代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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;
}
{
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 完全学习手册>> 张银鹤 梁文新 李新磊 等编著