Multiview和View控件[转载]

 MultiView 和 View 控件和制作出选项卡的效果，MultiView 控件是一组 View 控件的容器。使用它可定义一组 View 控件，其中每个 View 控件都包含子控件。
    如果要切换视图，可以使用控件的ID或者View控件的索引值。在 MultiView 控件中，一次只能将一个 View 控件定义为活动视图。如果某个 View 控件定义为活动视图，它所包含的子控件则会呈现到客户端。可以使用 ActiveViewIndex 属性或SetActiveView 方法定义活动视图。如果 ActiveViewIndex 属性为空，则 MultiView 控件不向客户端呈现任何内容。如果活动视图设置为MultiView 控件中不存在的 View，则会在运行时引发 ArgumentOutOfRangeException。
    一些常用的属性、方法：
    ActiveViewIndex属性：用于获取或设置当前被激活显示的View控件的索引值。默认值为－1，表示没有View控件被激活。
    SetActiveView方法：用于激活显示特定的View控件。
    4个静态只读字段：若要允许用户在 MultiView 控件中的 View 控件之间进行导航，可将 LinkButton 或 Button 控件添加到每个 View 控件。若要利用 MultiView 控件对当前活动 View 进行自动更新，请将按钮或链接按钮的 CommandName 属性设置为与所需导航行为对应的命令名字段的值，这些命令名字段如下：PreviousViewCommandName、NextViewCommandName、SwitchViewByIDCommandName 或 SwitchViewByIndexCommandName。
    ActiveViewChanged事件：当视图切换时被激发。

应用示例：

Default.aspx

<% @ 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 > 示例8-5 </ title >
< link id ="InstanceStyle" href ="StyleSheet.css" type ="text/css" rel ="stylesheet" />
</ head >
< body >
< form id ="Form1" runat ="server" >
< div >
< fieldset style ="width: 400px" >
< legend class ="mainTitle" > MultiView和View控件典型应用 </ legend >
< br />
< table id ="Table1" height ="95%" cellspacing ="0" cellpadding ="0" width ="100%" border ="0" >
< tr >
< td >
< table id ="TopTable" runat ="server" cellspacing ="0" cellpadding ="0" width ="100%"
border ="0" >
< tr style ="height: 22px" >
< td class ="SelectedTopBorder" id ="Cell1" align ="center" width ="60" >
< asp:LinkButton ID ="LBView1" runat ="server" CssClass ="TopTitle" OnClick ="LBView1_Click" > 常规 </ asp:LinkButton >
</ td >
< td class ="SepBorder" width ="2px" >
&nbsp; </ td >
< td class ="TopBorder" id ="Cell2" align ="center" width ="60" >
< asp:LinkButton ID ="LBView2" runat ="server" CssClass ="TopTitle" OnClick ="LBView2_Click" > 硬件 </ asp:LinkButton >
</ td >
< td class ="SepBorder" width ="2px" >
&nbsp; </ td >
< td class ="TopBorder" id ="Cell3" align ="center" width ="60" >
< asp:LinkButton ID ="LBView3" runat ="server" CssClass ="TopTitle" OnClick ="LBView3_Click" > 高级 </ asp:LinkButton >
</ td >
< td class ="SepBorder" >
&nbsp; </ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td >
< table class ="ContentBorder" cellspacing ="0" cellpadding ="0" >
< tr >
< td valign ="top" >
< asp:MultiView ID ="MultiView1" runat ="server" ActiveViewIndex ="0" >
< asp:View ID ="View1" runat ="server" >
< img src ="images/tab0.jpg" />
</ asp:View >
< asp:View ID ="View2" runat ="server" >
< img src ="images/tab2.jpg" />
</ asp:View >
< asp:View ID ="View3" runat ="server" >
< img src ="images/tab3.jpg" />
</ asp:View >
</ asp:MultiView >
</ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ fieldset >
</ div >
</ form >
</ body >
</ html >

 

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{}

protected void LBView1_Click( object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0 ;
Cell1.Attributes[ " class " ] = " SelectedTopBorder " ;
Cell2.Attributes[ " class " ] = " TopBorder " ;
Cell3.Attributes[ " class " ] = " TopBorder " ;
}
protected void LBView2_Click( object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1 ;
Cell1.Attributes[ " class " ] = " TopBorder " ;
Cell2.Attributes[ " class " ] = " SelectedTopBorder " ;
Cell3.Attributes[ " class " ] = " TopBorder " ;
}
protected void LBView3_Click( object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2 ;
Cell1.Attributes[ " class " ] = " TopBorder " ;
Cell2.Attributes[ " class " ] = " TopBorder " ;
Cell3.Attributes[ " class " ] = " SelectedTopBorder " ;
}
}

 

StyleSheet.css

body
{
font-size : 11pt ;
font-family : 宋体 ;
}
.mainTitle
{
font-size : 12pt ;
font-weight : bold ;
font-family : 宋体 ;
}
.commonText
{
font-size : 11pt ;
font-family : 宋体 ;
}
.littleMainTitle
{
font-size : 10pt ;
font-weight : bold ;
font-family : 宋体 ;
}
.TopTitle
{
border : 0px ;
font-size : 10pt ;
font-weight : bold ;
text-decoration : none ;
color : Black ;
display : inline-block ;
width : 100% ;
}
.SelectedTopTitle
{
border : 0px ;
font-size : 10pt ;
text-decoration : none ;
color : Black ;
display : inline-block ;
width : 100% ;
background-color : White ;
}
.ContentView
{
border : 0px ;
padding : 3px 3px 3px 3px ;
background-color : White ;
display : inline-block ;
width : 390px ;
}
.SepBorder
{
border-top-width : 0px ;
border-left-width : 0px ;
font-size : 1px ;
border-bottom : Gray 1px solid ;
border-right-width : 0px ;
}
.TopBorder
{
border-right : Gray 1px solid ;
border-top : Gray 1px solid ;
background : #DCDCDC ;
border-left : Gray 1px solid ;
color : black ;
border-bottom : Gray 1px solid ;
}
.ContentBorder
{
border-right : Gray 1px solid ;
border-top : Gray 0px solid ;
border-left : Gray 1px solid ;
border-bottom : Gray 1px solid ;
height : 100% ;
width : 100% ;
}
.SelectedTopBorder
{
border-right : Gray 1px solid ;
border-top : Gray 1px solid ;
background : none transparent scroll repeat 0% 0% ;
border-left : Gray 1px solid ;
color : black ;
border-bottom : Gray 0px solid ;
}