ASP.NET初学笔记:MiltiView控件和Wizard控件

MultiView控件

MultiView控件用于隐藏和显示页面的不同区域。在需要创建选项卡式页面和把一个长表单分成多个表单时它很有用。这个控件在前面的笔记中介绍过，现在只记录它的这两个用途。

1. 显示选项卡式页面视图。

使用Menu控件关联的MultiView控件，可以创建选项卡式页面视图。且看示例。

MultiViewTabs.aspx

<%@ Page Language="C#" %>

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

<script runat="server">

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

{

int index = Int32.Parse(e.Item.Value);

MultiView1.ActiveViewIndex = index;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<style type="text/css">

html

{

background-color:silver;

}

.tabs

{

position:relative;

top:1px;

left:10px;

}

.tab

{

border:solid 1px black;

background-color:#eeeeee;

padding:2px 10px;

}

.selectedTab

{

background-color:white;

border-bottom:solid 1px white;

}

.tabContents

{

border:solid 1px black;

padding:10px;

background-color:white;

}

</style>

<title>MultiView Tabs</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Menu

id="Menu1"

Orientation="Horizontal"

StaticMenuItemStyle-CssClass="tab"

StaticSelectedStyle-CssClass="selectedTab"

CssClass="tabs"

OnMenuItemClick="Menu1_MenuItemClick"

Runat="server">

<Items>

<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />

<asp:MenuItem Text="Tab 2" Value="1" />

<asp:MenuItem Text="Tab 3" Value="2" />

</Items>

</asp:Menu>

<div class="tabContents">

<asp:MultiView

id="MultiView1"

ActiveViewIndex="0"

Runat="server">

<asp:View ID="View1" runat="server">

<br />This is the first view

<br />This is the first view

<br />This is the first view

<br />This is the first view

</asp:View>

<asp:View ID="View2" runat="server">

<br />This is the second view

<br />This is the second view

<br />This is the second view

<br />This is the second view

</asp:View>

<asp:View ID="View3" runat="server">

<br />This is the third view

<br />This is the third view

<br />This is the third view

<br />This is the third view

</asp:View>

</asp:MultiView>

</div>

</div>

</form>

</body>

</html>

上面代码中Munu控件关联CSS类tabs。该类的相对地址下移1像素，使Menu控件的下边框和包含MultiView控件的<div>标签的上边框合并。因为被选中的选项卡有白色的边框，所以看不到选项卡与它的内容之间的边框。

2. 显示多部分表单

可以使用MultiView控件把一个大表单分成几个子表单。可以为MultiView控件中的按钮控件关联特殊的命令，使按钮被点击时，改变MultiView控件的激活视图。通过设置按钮控件的CommandName属性，可以对任意按钮控件使用这些命令。如果是SwitchViewById和SwitchByIndex，则使用CommandArgument属性。下面代码展示如何使用NextView命令来创建多部分表单。

MultiViewForm.aspx<%@ Page Language="C#" %>

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

<script runat="server">

protected void View3_Activate(object sender, EventArgs e)

{

lblFirstNameResult.Text = txtFirstName.Text;

lblColorResult.Text = txtColor.Text;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>MultiView Form</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:MultiView

id="MultiView1"

ActiveViewIndex="0"

Runat="server">

<asp:View ID="View1" runat="server">

<h1>Step 1</h1>

<asp:Label

id="lblFirstName"

Text="Enter Your First Name:"

AssociatedControlID="txtFirstName"

Runat="server" />

<br />

<asp:TextBox

id="txtFirstName"

Runat="server" />

<br /><br />

<asp:Button

id="btnNext"

Text="Next"

CommandName="NextView"

Runat="server" />

</asp:View>

<asp:View ID="View2" runat="server">

<h1>Step 2</h1>

<asp:Label

id="Label1"

Text="Enter Your Favorite Color:"

AssociatedControlID="txtColor"

Runat="server" />

<br />

<asp:TextBox

id="txtColor"

Runat="server" />

<br /><br />

<asp:Button

id="Button1"

Text="Next"

CommandName="NextView"

Runat="server" />

</asp:View>

<asp:View ID="View3" runat="server" OnActivate="View3_Activate">

<h1>Summary</h1>

Your First Name:

<asp:Label

id="lblFirstNameResult"

Runat="server" />

<br /><br />

Your Favorite Color:

<asp:Label

id="lblColorResult"

Runat="server" />

</asp:View>

</asp:MultiView>

</div>

</form>

</body>

</html>
Wizard控件

这个控件在前面也做过笔记了，现在从简。该控件也能用来把一个大的表单分成多个子表单，但它有很多明显的优点。它最重要的属性是StepType属性，它决定Wizard如何呈现。StepType默认值为Auto，这时Wizard控件在WizardSteps集合中的位置决定它如何呈现。StepType的值有Start,Step,Finish和Complete。下面给个示例。

ShowWizard.aspx<%@ Page Language="C#" %>

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

<script runat="server">

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

{

lblSSNResult.Text = txtSSN.Text;

lblPhoneResult.Text = txtPhone.Text;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<style type="text/css">

.wizard

{

border:solid 1px black;

font:14px Verdana,Sans-Serif;

width:400px;

height:300px;

}

.header

{

color:gray;

font:bold 18px Verdana,Sans-Serif;

}

.sideBar

{

background-color:#eeeeee;

padding:10px;

width:100px;

}

.sideBar a

{

text-decoration:none;

}

.step

{

padding:10px;

}

</style>

<title>Show Wizard</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Wizard

id="Wizard1"

HeaderText="Product Survey"

OnFinishButtonClick="Wizard1_FinishButtonClick"

CssClass="wizard"

HeaderStyle-CssClass="header"

SideBarStyle-CssClass="sideBar"

StepStyle-CssClass="step"

Runat="server">

<WizardSteps>

<asp:WizardStep ID="WizardStep1" Title="Introduction">

Please complete our survey so that we can improve our

products.

</asp:WizardStep>

<asp:WizardStep ID="WizardStep2" Title="Step 1">

<asp:Label

id="lblSSN"

Text="Social Security Number:"

AssociatedControlID="txtSSN"

Runat="server" />

<br />

<asp:TextBox

id="txtSSN"

Runat="server" />

</asp:WizardStep>

<asp:WizardStep ID="WizardStep3" Title="Step 2" StepType="Finish">

<asp:Label

id="lblPhone"

Text="Phone Number:"

AssociatedControlID="txtPhone"

Runat="server" />

<br />

<asp:TextBox

id="txtPhone"

Runat="server" />

</asp:WizardStep>

<asp:WizardStep ID="WizardStep4" Title="Summary" StepType="Complete">

<h1>Summary</h1>

Social Security Number:

<asp:Label

id="lblSSNResult"

Runat="server" />

<br /><br />

Phone Number:

<asp:Label

id="lblPhoneResult"

Runat="server" />

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

</div>

</form>

</body>

</html>

ASP.NET初学笔记:MiltiView控件和Wizard控件

继续阅读

转：2008年微软Windows硬件工程(WinHEC)大会

ASP编程中20个非常有用的例子

ASP编程中15个非常有用的例子

ASP.NET中存取图片到数据库的示例(C#)

制作一个小小的游戏

在一个非套接字上尝试了一个操作

How run Powershell ISE on WIndows Server2008

2010年终总结--技术篇

VS2008 不在支持 Attributed ATL

ASP.NET大型绩效考核评估系统源码

门户通专访月光博客：第一博客是如何打造成的

如何成为一名.net 工程师?

apache httpd 配置

IE8 CSS设置DIV居中，添加“margin:0 auto”

Windows下配置Apache的SSL服务

GridView终极用法(一)