asp.net2.0中MultiView应用实例

在asp.net1.1中曾经推出了TreeView、MultiPage等插件（因为不是vs2003内置的），需要下载安装相关的插件才能使用，这些当年我也曾用过，不过感觉用起来不是太方便（到服务器上部署时还需要安装一遍），现在到vs2005中这些都成为内置控件了，极大的方便了开发和部署，TreeView控件似乎没有太多要说的，今天我就展示一下MultiPage控件的升级产品MultiView控件。

设计时视图：

以下是运行时的截图：

前台aspx代码如下：

<% @PageLanguage = " C# " AutoEventWireup = " true " CodeFile = " MultiViewDemo.aspx.cs " Inherits = " MultiViewDemo " %>

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > MultiView应用实例 </ title >
< style type ="text/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 : 3px3px3px3px ;
background-color : White ;
display : inline-block ;
width : 390px ;
}
.SepBorder
{
border-top-width : 0px ;
border-left-width : 0px ;
font-size : 1px ;
border-bottom : Gray1pxsolid ;
border-right-width : 0px ;
}
.TopBorder
{
border-right : Gray1pxsolid ;
border-top : Gray1pxsolid ;
background : #DCDCDC ;
border-left : Gray1pxsolid ;
color : black ;
border-bottom : Gray1pxsolid ;
}
.ContentBorder
{
border-right : Gray1pxsolid ;
border-top : Gray0pxsolid ;
border-left : Gray1pxsolid ;
border-bottom : Gray1pxsolid ;
height : 100% ;
width : 100% ;
}
.SelectedTopBorder
{
border-right : Gray1pxsolid ;
border-top : Gray1pxsolid ;
background : nonetransparentscrollrepeat0%0% ;
border-left : Gray1pxsolid ;
color : black ;
border-bottom : Gray0pxsolid ;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< fieldset style ="width:400px" >
< legend > MultiView应用实例 </ legend >
< table cellpadding ="0" cellspacing ="0" width ="100%" border ="0" >
< tr >
< td >
< table runat ="server" cellpadding ="0" cellspacing ="0" width ="100%" border ="0" >
< tr style ="height:22px" >
< td class ="SelectedTopBorder" id ="Cell1" align ="center" style ="width:80px;" >
< asp:LinkButton ID ="lButtonCompany" runat ="server" OnClick ="lButtonCompany_Click" > 公司介绍 </ asp:LinkButton ></ td >
< td class ="SepBorder" style ="width:2px;height:22px;" ></ td >
< td class ="TopBorder" id ="Cell2" align ="center" style ="width:80px;" >
< asp:LinkButton ID ="lButtonProduct" runat ="server" OnClick ="lButtonProduct_Click" > 产品介绍 </ asp:LinkButton ></ td >
< td class ="SepBorder" style ="width:2px;height:22px;" ></ td >
< td class ="TopBorder" id ="Cell3" align ="center" style ="width:80px;" >
< asp:LinkButton ID ="lButtonContact" runat ="server" OnClick ="lButtonContact_Click" > 联系我们 </ asp:LinkButton ></ td >
< td class ="SepBorder" style ="width:2px;height:22px;" ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td >
< table class ="ContentBorder" cellpadding ="0" cellspacing ="0" width ="100%" >
< tr >
< td valign ="top" >
< asp:MultiView ID ="mvCompany" runat ="server" ActiveViewIndex ="0" >
< asp:View ID ="View1" runat ="server" >
我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人，博士后32人，博士63人，研究生120人，本科生356人，具有非常强大研发实力。 </ asp:View >
< asp:View ID ="View2" runat ="server" >
我们有丰富的产品线，还可以为用户单独定制。目前有吹牛软件、撒谎软件、包二奶软件等等，正在研发的软件有火星定位软件、超时空软件等等。 </ asp:View >
< asp:View ID ="View3" runat ="server" >
我们的联系方式是119，传真是110，是120，售后电话114。 </ asp:View >
</ asp:MultiView > &nbsp;
</ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ fieldset >

</ div >
</ form >
</ body >
</ html >

后台cs代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 MultiViewDemo:System.Web.UI.Page
{
protected void Page_Load( object sender,EventArgse)
{

}
protected void lButtonCompany_Click( object sender,EventArgse)
{
mvCompany.ActiveViewIndex = 0 ;
Cell1.Attributes[ " class " ] = " SelectedTopBorder " ;
Cell2.Attributes[ " class " ] = " TopBorder " ;
Cell3.Attributes[ " class " ] = " TopBorder " ;
}
protected void lButtonProduct_Click( object sender,EventArgse)
{
mvCompany.ActiveViewIndex = 1 ;
Cell1.Attributes[ " class " ] = " TopBorder " ;
Cell2.Attributes[ " class " ] = " SelectedTopBorder " ;
Cell3.Attributes[ " class " ] = " TopBorder " ;
}
protected void lButtonContact_Click( object sender,EventArgse)
{
mvCompany.ActiveViewIndex = 2 ;
Cell1.Attributes[ " class " ] = " TopBorder " ;
Cell2.Attributes[ " class " ] = " TopBorder " ;
Cell3.Attributes[ " class " ] = " SelectedTopBorder " ;
}
}

这里你可以修改页面中的css样式代码，更改成适合自己风格的色彩和样式。