ASP.NET Tutorial/ASP.net Controls/MultiView
Содержание
Active index
<source lang="csharp">
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default_aspx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> Enter your name:
First Name <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
Last Name <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:Button ID="btnView1Next" runat="server" Text="Next" /></asp:View><asp:View ID="View2" runat="server"> Birthday:
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<asp:Button ID="btnView2Previous" runat="server" Text="Previous" /> <asp:Button ID="btnView2Next" runat="server" Text="Next" /></asp:View><asp:View ID="View3" runat="server"> Thank you for registering with us.
<asp:Button ID="btnView3Finish" runat="server" Text="Finish" /> <asp:Button ID="btnView3Reset" runat="server" Text="Reset" /></asp:View></asp:MultiView>
</form>
</body> </html> File: Default.aspx.vb
Partial Class Default_aspx
Inherits System.Web.UI.Page Protected Sub btnAllButtons_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnView1Next.Click, _ btnView2Next.Click, btnView2Previous.Click, _ btnView3Finish.Click, btnView3Reset.Click Select Case CType(sender, Button).Text Case "Next" MultiView1.ActiveViewIndex += 1 Case "Previous" MultiView1.ActiveViewIndex -= 1 Case "Finish" Response.Write("You have registered as " & _ txtFirstName.Text & _ txtLastName.Text & "
") Response.Write("Birthday " & _ Calendar1.SelectedDate) btnView3Finish.Enabled = False btnView3Reset.Enabled = False Case "Reset" MultiView1.ActiveViewIndex = 0 End Select End Sub
End Class</source>
Displaying a Multi-Part Form
<source lang="csharp">
NextView: activate the next View control. PrevView: activate the previous View control. SwitchViewByID: activate the view by id. SwitchViewByIndex:activate the view by index. <%@ 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">
<asp:MultiView id="MultiView1" ActiveViewIndex="0" Runat="server"> <asp:View ID="View1" runat="server">
Step 1
<asp:Label id="lblFirstName" Text="Enter Your First Name:" AssociatedControlID="txtFirstName" Runat="server" />
<asp:TextBox id="txtFirstName" Runat="server" />
<asp:Button id="btnNext" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View2" runat="server">
Step 2
<asp:Label id="Label1" Text="Enter Your Favorite Color:" AssociatedControlID="txtColor" Runat="server" />
<asp:TextBox id="txtColor" Runat="server" />
<asp:Button id="Button1" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View3" runat="server" OnActivate="View3_Activate">
Summary
Your First Name: <asp:Label id="lblFirstNameResult" Runat="server" />
Your Favorite Color: <asp:Label id="lblColorResult" Runat="server" /> </asp:View> </asp:MultiView>
</form>
</body> </html></source>
MultiView and View Controls
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>MultiView & View Controls</title>
</head> <body>
<form id="form1" runat="server">
MultiView & View Controls
<asp:RadioButtonList AutoPostBack="True" ID="rblView" OnSelectedIndexChanged="rblView_SelectedIndexChanged" RepeatDirection="Horizontal" runat="server"> <asp:ListItem Value="-1">Nothing</asp:ListItem> <asp:ListItem Value="0" Selected="True">First</asp:ListItem> <asp:ListItem Value="1">Second</asp:ListItem> <asp:ListItem Value="2">Third</asp:ListItem> <asp:ListItem Value="3">Last</asp:ListItem> </asp:RadioButtonList>
Current Index: <asp:Label ID="lblCurrentIndex" runat="server"></asp:Label>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" OnActiveViewChanged="MultiView1_ActiveViewChanged"> <asp:View ID="vwFirst" runat="server" OnActivate="ActivateView" OnDeactivate="DeactivateView">
First View
<asp:TextBox ID="txtFirstView" runat="server"></asp:TextBox> <asp:Button CommandName="NextView" ID="btnNext1" runat="server" Text="Go To Next" /> <asp:Button CommandArgument="vwLast" CommandName="SwitchViewByID" ID="btnLast" runat="server" Text="Go to Last" /> </asp:View> <asp:View ID="vwSecond" runat="server" OnActivate="ActivateView" OnDeactivate="DeactivateView">
Second View
<asp:TextBox ID="txtSecondView" runat="server"></asp:TextBox> <asp:Button CommandName="NextView" ID="btnNext2" runat="server" Text="Go To Next" /> <asp:Button CommandName="PrevView" ID="btnPrevious2" runat="server" Text="Go to Previous" /> </asp:View> <asp:View ID="vwThird" runat="server" OnActivate="ActivateView" OnDeactivate="DeactivateView">
Third View
<asp:Button CommandName="NextView" ID="btnNext3" runat="server" Text="Go To Next" /> <asp:Button CommandName="PrevView" ID="btnPrevious3" runat="server" Text="Go to Previous" /> </asp:View> <asp:View ID="vwLast" runat="server" OnActivate="ActivateView" OnDeactivate="DeactivateView">
Last View
<asp:Button CommandName="PrevView" ID="btnPrevious4" runat="server" Text="Go to Previous" /> <asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnFirst" runat="server" Text="Go to First" /> </asp:View> </asp:MultiView>
First TextBox: <asp:Label ID="lblFirstTextBox" runat="server" />
Second TextBox: <asp:Label ID="lblSecondTextBox" runat="server" />
View Activation History:
<asp:Label ID="lblViewActivation" runat="server" />
</form>
</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; 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 _Default : System.Web.UI.Page {
protected void Page_PreRender(object sender, EventArgs e) { lblCurrentIndex.Text = MultiView1.ActiveViewIndex.ToString(); } protected void rblView_SelectedIndexChanged(object sender, EventArgs e) { MultiView1.ActiveViewIndex = Convert.ToInt32(rblView.SelectedValue); } protected void MultiView1_ActiveViewChanged(object sender, EventArgs e) { lblFirstTextBox.Text = txtFirstView.Text; lblSecondTextBox.Text = txtSecondView.Text; rblView.SelectedIndex = MultiView1.ActiveViewIndex + 1; } protected void ActivateView(object sender, EventArgs e) { string str = lblViewActivation.Text; View v = (View)sender; str += "View " + v.ID + " activated
"; lblViewActivation.Text = str; } protected void DeactivateView(object sender, EventArgs e) { string str = lblViewActivation.Text; View v = (View)sender; str += "View " + v.ID + " deactivated
"; lblViewActivation.Text = str; } }</source>
MultiView hides and display different areas of a page, useful to create a tabbed page
<source lang="csharp">
The MultiView control supports the following properties (this is not a complete list): ActiveViewIndex: select the View control by index. Views: return the list of View controls. GetActiveView: get the selected View control. SetActiveView: select the active view. ActiveViewChanged: Raised when a new View control is selected. <%@ 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">
<title>MultiView Tabs</title>
</head> <body>
<form id="form1" runat="server">
<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>
<asp:MultiView id="MultiView1" ActiveViewIndex="0" Runat="server"> <asp:View ID="View1" runat="server">
This is the first view
This is the first view
This is the first view
This is the first view </asp:View> <asp:View ID="View2" runat="server">
This is the second view
This is the second view
This is the second view
This is the second view </asp:View> <asp:View ID="View3" runat="server">
This is the third view
This is the third view
This is the third view
This is the third view </asp:View> </asp:MultiView>
</form>
</body> </html></source>
Use the MultiView control to dynamically switch views in a page
<source lang="csharp">
<%@ Page language="C#"%> <script runat="server">
void Page_Load(object sender, EventArgs e) { Tables.ActiveViewIndex = Views.SelectedIndex; }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>View controls</title>
</head> <body>
<form id="Form1" runat="server"> <tr> <td valign="top"> <asp:DropDownList Runat="server" ID="Views" AutoPostBack="true"> <asp:ListItem Value="Employees" /> <asp:ListItem Value="Products" /> <asp:ListItem Value="Customers" /> </asp:DropDownList> </td> <td valign="top" style="border:solid 1px black;"> <asp:MultiView runat="server" id="Tables" ActiveViewIndex="0" > <asp:View runat="server" id="Employees">
Employees
</asp:View> <asp:View runat="server" id="Products">
Products
</asp:View> <asp:View runat="server" id="Customers">
Customers
</asp:View> </asp:MultiView> </td> </tr> </form>
</body> </html></source>
What is an asp:MultiView (C#)
<source lang="csharp">
File: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MultiViewGreetingCardMaker" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<tr> <td> <asp:MultiView id="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> Choose a foreground (text) color:
<asp:DropDownList ID="lstForeColor" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>
Choose a background color:
<asp:DropDownList ID="lstBackColor" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>
<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" /> </asp:View> <asp:View ID="View2" runat="server"> Choose a border style:
<asp:RadioButtonList ID="lstBorder" runat="server" AutoPostBack="True" Height="59px" OnSelectedIndexChanged="ControlChanged" RepeatColumns="2" Width="177px"> </asp:RadioButtonList>
<asp:CheckBox ID="chkPicture" runat="server" AutoPostBack="True" OnCheckedChanged="ControlChanged" Text="Add the Default Picture" />
<asp:Button ID="Button3" runat="server" Text="< Prev" CommandName="PrevView" /> <asp:Button ID="Button4" runat="server" Text="Next >" CommandName="NextView" /> </asp:View> <asp:View ID="View3" runat="server"> Choose a font name:
<asp:DropDownList ID="lstFontName" runat="server" AutoPostBack="True" Height="22px" OnSelectedIndexChanged="ControlChanged" Width="194px"> </asp:DropDownList>
Specify a font size:
<asp:TextBox ID="txtFontSize" runat="server" AutoPostBack="True" OnTextChanged="ControlChanged"></asp:TextBox>
Enter the greeting text below:
<asp:TextBox ID="txtGreeting" runat="server" Height="85px" OnTextChanged="ControlChanged" TextMode="MultiLine" Width="240px" AutoPostBack="True"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="< Prev" CommandName="PrevView" /> <asp:Button ID="Button2" runat="server" Text="Apply" /> </asp:View> </asp:MultiView> </td> <td > <asp:Panel ID="pnlCard" runat="server" Height="445px" HorizontalAlign="Center" Style="z-index: 101; " Width="339px">
<asp:Label ID="lblGreeting" runat="server" Height="150px" Width="272px"></asp:Label> <asp:Image ID="imgDefault" runat="server" Height="160px" Visible="False" Width="212px" /> </asp:Panel> </td> </tr>
</form>
</body> </html>
File: Default.aspx.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; using System.Drawing; using System.ruponentModel; public partial class MultiViewGreetingCardMaker : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { string[] colorArray = Enum.GetNames(typeof(System.Drawing.KnownColor)); lstBackColor.DataSource = colorArray; lstBackColor.DataBind(); lstForeColor.DataSource = colorArray; lstForeColor.DataBind(); lstForeColor.SelectedIndex = 34; lstBackColor.SelectedIndex = 163; System.Drawing.Text.InstalledFontCollection fonts; fonts = new System.Drawing.Text.InstalledFontCollection(); foreach (FontFamily family in fonts.Families) { lstFontName.Items.Add(family.Name); } string[] borderStyleArray = Enum.GetNames(typeof(BorderStyle)); lstBorder.DataSource = borderStyleArray; lstBorder.DataBind(); lstBorder.SelectedIndex = 0; imgDefault.ImageUrl = "http://www.nfex.ru/style/logo.png"; } } protected void ControlChanged(Object sender, EventArgs e) { pnlCard.BackColor = Color.FromName(lstBackColor.SelectedItem.Text); lblGreeting.ForeColor = Color.FromName(lstForeColor.SelectedItem.Text); lblGreeting.Font.Name = lstFontName.SelectedItem.Text; try { if (Int32.Parse(txtFontSize.Text) > 0) { lblGreeting.Font.Size = FontUnit.Point(Int32.Parse(txtFontSize.Text)); } if (Int32.Parse(txtFontSize.Text) > 0) { lblGreeting.Font.Size = FontUnit.Point(Int32.Parse(txtFontSize.Text)); } }catch{ } TypeConverter cnvrt = TypeDescriptor.GetConverter(typeof(BorderStyle)); pnlCard.BorderStyle = (BorderStyle)cnvrt.ConvertFromString(lstBorder.SelectedItem.Text); if (chkPicture.Checked == true) { imgDefault.Visible = true; } else { imgDefault.Visible = false; } lblGreeting.Text = txtGreeting.Text; }
}</source>