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

以下是运行时的截图:

前台aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiViewDemo.aspx.cs" Inherits="MultiViewDemo" %>

<!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>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
: 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;
}
    
</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, EventArgs e)
    {

    }
    
protected void lButtonCompany_Click(object sender, EventArgs e)
    {
        mvCompany.ActiveViewIndex 
= 0;
        Cell1.Attributes[
"class"= "SelectedTopBorder";
        Cell2.Attributes[
"class"= "TopBorder";
        Cell3.Attributes[
"class"= "TopBorder";
    }
    
protected void lButtonProduct_Click(object sender, EventArgs e)
    {
        mvCompany.ActiveViewIndex 
= 1;
        Cell1.Attributes[
"class"= "TopBorder";
        Cell2.Attributes[
"class"= "SelectedTopBorder";
        Cell3.Attributes[
"class"= "TopBorder";
    }
    
protected void lButtonContact_Click(object sender, EventArgs e)
    {
        mvCompany.ActiveViewIndex 
= 2;
        Cell1.Attributes[
"class"= "TopBorder";
        Cell2.Attributes[
"class"= "TopBorder";
        Cell3.Attributes[
"class"= "SelectedTopBorder";
    }
}
这里你可以修改页面中的css样式代码,更改成适合自己风格的色彩和样式。