-
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大型績效考核評估系統源碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)