ASP.NET中使用MultiView和View以及Menu实现Tablecontrol的功能

在参考了别人的方法后,我自己也做了一个,在这儿也把自己做的过程拿出来,与大家分享,共同进步 .

1:首先创建一个新Web应用.

2:在页面上添加一个Menu控件,然后在Menu里添加三项(注:每一项都有一个Value值,从0开始计算,此处是为了和view的编号对应).然后Menu下方添加MultiView和View控件,(此处我仅作三个分页的例子).MultiView控件一个,View控件三个:

 

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > TableControl示例 </ title >
    
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < asp:Menu ID = " Menu1 "  runat = " server "  Orientation = " Horizontal "  Width = " 300px "  Height = " 30px "
                  EnableViewState = " False "  DisappearAfter = " 100 "  SkipLinkText = ""  StaticDisplayLevels = " 2 "  Font - Size = " Small " >
             < Items >
                 < asp:MenuItem Text = " TableControl1 "  Value = " 0 " ></ asp:MenuItem >
                 < asp:MenuItem Text = " TableControl2 "  Value = " 1 " ></ asp:MenuItem >
                 < asp:MenuItem Text = " TableControl3 "  Value = " 2 " ></ asp:MenuItem >
             </ Items >
         </ asp:Menu >
         < asp:MultiView ID = " MultiView1 "  runat = " server "  ActiveViewIndex = " 0 " >
             < asp:View ID = " View1 "  runat = " server " >
                deanlee1982 ------------ 1 </ asp:View >
             < asp:View ID = " View2 "  runat = " server " >
                deanlee1982 ------------ 2 </ asp:View >
             < asp:View ID = " View3 "  runat = " server " >
                deanlee1982 ------------ 3 </ asp:View >
         </ asp:MultiView >
     </ div >
     </ form >
</ body >
</ html >

3:在Menu的MenuItemClick事件中写如下代码:

protected   void  Menu1_MenuItemClick( object  sender, MenuEventArgs e)
     ... {
        MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
    }

4:功能基本上实现了,现在加入样式表,美化一下:),样式表如下

.tabItem
... {
    border: 1px solid #778;
    background: #aaa;
    text-decoration: none;
    width:120px;
    height: 20px;
    padding-top: 3px;
    text-align: center;
    font-size:small;
    color:White;
}
.tabSelected
... {
    color:Black;
    background-color: #eee;
    border-bottom: 1px solid white;
}
.tabHover
... {
    color: #000;
    background: white;
}
.tabbernav
... {
    margin: 0;
    font: bold 12px Verdana , sans-serif;
    font:
    vertical-align: bottom;
    width: 10px;
}
.tabbernav1
... {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
    width: 5px;
}
.tabbernav2
... {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
}
.tabcontent
... {
    padding: 5px;
    border: 1px solid #aaa;
   border-top: 0; 
}

最后也加入了淡入淡出效果,具体的看附件里面的吧:)