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

来源：互联网发布：2016淘宝标题优化设计编辑：程序博客网时间：2024/06/15 07:30

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>