IE WebControl之TabStrip和MultiPage示例

 

                          IE WebControl之TabStrip和MultiPage示例

登峰/2005-5-16

前些日子在选WEB控件，感觉Infragistics功能是强大，但速度比较慢，一般的项目中，用ms自带的就够了．我还是喜欢轻巧的东西，做软件就是考虑将来的扩展性，但目前满足需求即可，扯远了：）

首先在页面上插入一个二行一列的表格,上面放个TabStrip1,下面放个MultiPage1,如下图1

 

             
  图1

接着把TabStrip1的TargetID改成MultiPage1,如图2

                 图2

下面是最为关键了,就是如何让标签Tab1, Tab2等和他相关的面板(MultiPage1)对应起来呢,其实是有下面这样的关系的

TabStrip                           MultiPage

 

Tab1                                  PageView

 

Tab2                                 PageView

…                                                                     …

请注意这种顺序关系,即Tab1.Tab2与代码里的<mytab:PageView></ mytab:PageView>对应顺序

 接着我们可以<mytab:PageView></ mytab:PageView>之间嵌入任何HTML代码和Asp.Net控件,当然这要在编辑视图下,并不是在可视IDE下.

或许大家有疑问,我如果有多个<mytab:PageView>呢,我想在IDE可视下看每个控制页效果,这好办看下面

图３

这是Tab1的控制页面,那怎么换到Tab2的控制页呢

请按下图操作

                        图４

             现在转到在Tab2的控制页面了

图５

 好了,似乎到这里快结束了,慢,Tab的事件怎么解决? 比如我单击Tab2后,要从数据库里读取相关的记录,好,没问题,再看下面

private void TabStrip1_SelectedIndexChange(object sender, System.EventArgs e){       

           }

怎么关联?这都不知道?简单的做法就是在可视页面下选定Tabstrip控件，在属性标签选定事件，双击SelectedIndexChange项，就产生了上面的代码，其实你也可以在页面初始的时候给控件加上事件，如

this.TabStrip1.SelectedIndexChange += new System.EventHandler(this.TabStrip1_SelectedIndexChange);

奇怪的是这事件居然没有反应？？

图６ 

SelectedIndexChange事件根本没有执行

哈哈，初学者会犯的毛病,要把AutoPostBack设置True；这样就ＯＫ了,下面就是得到当前选定项的值

string  strSelTabText=this.TabStrip1.Items[this.TabStrip1.SelectedIndex].Text;

到这里基本的问题都已经解决了，如果有问题的话我们再交流