ASP.Net/Asp Control/Multiview — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 18:30, 26 мая 2010
Содержание
asp:multiview Demo (C#)
<source lang="csharp">
<%@ page language="C#" %> <script runat="server">
void BT_Submit_Click(object sender, System.EventArgs e) {
this.LT_Name.Text = string.Format("Your name is: {0}", this.TB_Name.Text); this.MV_Main.ActiveViewIndex = 1;
} void LB_Back_Click(object sender, System.EventArgs e) {
this.MV_Main.ActiveViewIndex = 0;
}
</script> <html> <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form runat="server"> <asp:multiview id="MV_Main" runat="server" activeviewindex="0"> <asp:view id="View1" runat="server">
Please enter your name:
<asp:textbox id="TB_Name" runat="server"/>
<asp:button id="BT_Submit" runat="server" text="OK" onclick="BT_Submit_Click" softkeylabel="OK" />
</asp:view> <asp:view id="View2" runat="server">
<asp:literal id="LT_Name" runat="server"/>
<asp:linkbutton id="LB_Back" runat="server" onclick="LB_Back_Click" softkeylabel="Back">Back</asp:linkbutton>
</asp:view> </asp:multiview> </form>
</body> </html>
</source>
asp:MultiView set up
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MultipleViews" %> <!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:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" OnActiveViewChanged="MultiView1_ActiveViewChanged"> <asp:View ID="View1" runat="server"> Showing View #1
<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" /> </asp:View> <asp:View ID="View2" runat="server"> Showing View #2
Text content. <asp:Button ID="cmdPrev" runat="server" Text="< Prev" CommandName="PrevView" /> <asp:Button ID="cmdNext2" runat="server" Text="Next >" CommandName="NextView" /> </asp:View> <asp:View ID="View3" runat="server"> Showing View #3
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <asp:Button ID="Button1" runat="server" Text="< Prev" CommandName="PrevView" /> </asp:View> </asp:MultiView>
</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; public partial class MultipleViews : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DropDownList1.DataSource = MultiView1.Views; DropDownList1.DataTextField = "ID"; DropDownList1.DataBind(); } } protected void cmdShow_Click(object sender, EventArgs e) { MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex; } protected void MultiView1_ActiveViewChanged(object sender, EventArgs e) { DropDownList1.SelectedIndex = MultiView1.ActiveViewIndex; }
}
</source>
MultiView ActiveViewIndex Example
<source lang="csharp">
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head>
<script runat="server"> Sub NextButton_Command(sender As Object, e As System.EventArgs) If (DevPollMultiView.ActiveViewIndex > -1) AND DevPollMultiView.ActiveViewIndex < 3 Then DevPollMultiView.ActiveViewIndex += 1 ElseIf DevPollMultiView.ActiveViewIndex = 3 Then Page4Save.Enabled = False Page4Restart.Enabled = False Else Throw New Exception("An error occurred.") End If End Sub Sub BackButton_Command(ByVal sender As Object, ByVal e As System.EventArgs) If (DevPollMultiView.ActiveViewIndex > 0) And DevPollMultiView.ActiveViewIndex <= 2 Then DevPollMultiView.ActiveViewIndex -= 1 ElseIf DevPollMultiView.ActiveViewIndex = 3 Then DevPollMultiView.ActiveViewIndex = 0 Else Throw New Exception("An error occurred.") End If End Sub
</script> </head> <body>
<form ID="Form1" runat="Server">
MultiView ActiveViewIndex Example
<asp:Panel id="Page1ViewPanel" Width="330px" Height="150px" HorizontalAlign =Left Font-size="12" BackColor="#C0C0FF" BorderColor="#404040" BorderStyle="Double" runat="Server"> <asp:MultiView id="DevPollMultiView" ActiveViewIndex=0 runat="Server"> <asp:View id="Page1" runat="Server"> <asp:Label id="Page1Label" Font-bold="true" Text="What kind of applications do you develop?" runat="Server"> </asp:Label>
<asp:RadioButton id="Page1Radio1" Text="Web Applications" Checked="False" GroupName="RadioGroup1" runat="server" > </asp:RadioButton>
<asp:RadioButton id="Page1Radio2" Text="Windows Forms Applications" Checked="False" GroupName="RadioGroup1" runat="server" > </asp:RadioButton>
<asp:Button id="Page1Next" Text = "Next" OnClick="NextButton_Command" Height="25" Width="70" runat= "Server"> </asp:Button> </asp:View> <asp:View id="Page2" runat="Server"> <asp:Label id="Page2Label" Font-bold="true" Text="How long have you been a developer?" runat="Server"> </asp:Label>
<asp:RadioButton id="Page2Radio1" Text="Less than five years" Checked="False" GroupName="RadioGroup1" runat="Server"> </asp:RadioButton>
<asp:RadioButton id="Page2Radio2" Text="More than five years" Checked="False" GroupName="RadioGroup1" runat="Server"> </asp:RadioButton>
<asp:Button id="Page2Back" Text = "Previous" OnClick="BackButton_Command" Height="25" Width="70" runat= "Server"> </asp:Button> <asp:Button id="Page2Next" Text = "Next" OnClick="NextButton_Command" Height="25" Width="70" runat="Server"> </asp:Button> </asp:View> <asp:View id="Page3" runat="Server"> <asp:Label id="Page3Label1" Font-bold="true" Text= "What is your primary programming language?" runat="Server"> </asp:Label>
<asp:RadioButton id="Page3Radio1" Text="Visual Basic .NET" Checked="False" GroupName="RadioGroup1" runat="Server"> </asp:RadioButton>
<asp:RadioButton id="Page3Radio2" Text="C#" Checked="False" GroupName="RadioGroup1" runat="Server"> </asp:RadioButton>
<asp:RadioButton id="Page3Radio3" Text="C++" Checked="False" GroupName="RadioGroup1" runat="Server"> </asp:RadioButton>
<asp:Button id="Page3Back" Text = "Previous" OnClick="BackButton_Command" Height="25" Width="70" runat="Server"> </asp:Button> <asp:Button id="Page3Next" Text = "Next" OnClick="NextButton_Command" Height="25" Width="70" runat="Server"> </asp:Button>
</asp:View> <asp:View id="Page4" runat="Server"> <asp:Label id="Label1" Font-bold="true" Text = "Thank you for taking the survey." runat="Server"> </asp:Label>
<asp:Button id="Page4Save" Text = "Save Responses" OnClick="NextButton_Command" Height="25" Width="110" runat="Server"> </asp:Button> <asp:Button id="Page4Restart" Text = "Retake Survey" OnClick="BackButton_Command" Height="25" Width="110" runat= "Server"> </asp:Button> </asp:View> </asp:MultiView> </asp:Panel> <asp:MultiView ID="MultiView1" runat="server"> </asp:MultiView> </form>
</body> </html>
</source>
Multiview checkout (C#)
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Checkout" %> <!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 id="Head1" runat="server">
<title>Chapter 20: Checkout MultiView</title>
</head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0"> <asp:View ID="vContact" Runat="server">
First Name: |
<asp:TextBox ID="txtFirstName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" ErrorMessage="First Name is required." ControlToValidate="txtFirstName"> </asp:RequiredFieldValidator> |
Last name: |
<asp:TextBox ID="txtLastName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" Runat="server" ErrorMessage="Last Name is required." ControlToValidate="txtLastName"> </asp:RequiredFieldValidator> |
Email: |
<asp:TextBox ID="txtEmail" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" Runat="server" ErrorMessage="Email is required." ControlToValidate="txtEmail"> </asp:RequiredFieldValidator> |
<asp:Button ID="Button1" runat="server" CommandName="NextView" Text="Next" /> </asp:View> <asp:View ID="vShippingMethod" Runat="server"> <asp:Panel ID="Panel1" Runat="server" Width="492"> Please select a shipping method:
<asp:RadioButton ID="rdoUPSGround" Runat="server" Text="UPS Ground" GroupName="ShipVia" Checked="True" />
<asp:RadioButton ID="rdoUPS2Day" Runat="server" Text="UPS Second Day" GroupName="ShipVia" />
<asp:RadioButton ID="rdoFedEx" Runat="server" Text="Federal Express Overnight" GroupName="ShipVia" />
</asp:Panel>
<asp:Button ID="Button2" runat="server" CommandName="PrevView" Text="Previous" /> <asp:Button ID="Button3" runat="server" CommandName="NextView" Text="Next" /> </asp:View> <asp:View ID="vCreditCard" Runat="server"> <asp:Panel ID="Panel2" Runat="server" Width="492px"> Please enter your credit card information:
<asp:ListBox ID="listCardType"
Runat="server"> <asp:ListItem Value="VISA" Selected="True">Visa</asp:ListItem> <asp:ListItem Value="MC"> MasterCard</asp:ListItem> <asp:ListItem Value="AMEX"> American Express</asp:ListItem> </asp:ListBox> |
Card Number: |
<asp:TextBox ID="txtCardNumber" Runat="server" Height="22px" Width="262px"></asp:TextBox> |
Expiration Date: |
<asp:DropDownList ID="ddlExpirationMonth" Runat="server"> <asp:ListItem Value="1">January</asp:ListItem> <asp:ListItem Value="2">February</asp:ListItem> <asp:ListItem Value="3">March</asp:ListItem> <asp:ListItem Value="4">April</asp:ListItem> <asp:ListItem Value="5">May</asp:ListItem> <asp:ListItem Value="6">June</asp:ListItem> <asp:ListItem Value="7">July</asp:ListItem> <asp:ListItem Value="8">August</asp:ListItem> <asp:ListItem Value="9">September</asp:ListItem> <asp:ListItem Value="10">October</asp:ListItem> <asp:ListItem Value="11">November</asp:ListItem> <asp:ListItem Value="12">December</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddlExpirationYear" Runat="server"></asp:DropDownList> |
</asp:MultiView>
<asp:Button ID="Button4" runat="server" CommandName="PrevView" Text="Previous" /> <asp:Button ID="btnFinish" Runat="server" CommandName="NextView" Text="Finish" OnClick="btnFinish_Click" /> </asp:Panel> </asp:View> <asp:View ID="vFinish" runat="server"> Here is the data you entered:
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"> </asp:TextBox>
</asp:View>
</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; public partial class Checkout : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { int year = DateTime.Now.Year; for (; year < DateTime.Now.Year + 6; year++) ddlExpirationYear.Items.Add(year.ToString()); } }
protected void btnFinish_Click(object sender, EventArgs e) { this.DisplayMessage(); } private void DisplayMessage() { string shipVia = ""; if (rdoUPSGround.Checked) shipVia = "UPSG"; else if (rdoUPS2Day.Checked) shipVia = "UPS2D"; else if (rdoFedEx.Checked) shipVia = "FEDEX"; string message = "Contact info\n" + " First name: " + txtFirstName.Text + "\n" + " Last name: " + txtLastName.Text + "\n" + " Email: " + txtEmail.Text + "\n" + "Shipping method\n" + " Ship via: " + shipVia + "\n" + "Credit card info\n" + " Type: " + listCardType.SelectedValue + "\n" + " Number: " + txtCardNumber.Text + "\n" + " Expiration date: " + ddlExpirationMonth.SelectedValue + "/" + ddlExpirationYear.SelectedValue; txtMessage.Text = message; }
}
</source>
Multiview checkout (VB)
<source lang="csharp">
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Checkout" %> <!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 id="Head1" runat="server">
<title>Checkout MultiView</title>
</head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0"> <asp:View ID="vContact" Runat="server"> Please enter your contact information:
First Name: |
<asp:TextBox ID="txtFirstName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" ErrorMessage="First Name is required." ControlToValidate="txtFirstName"> </asp:RequiredFieldValidator> |
Last name: | <asp:TextBox ID="txtLastName" Runat="server"
Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" Runat="server" ErrorMessage="Last Name is required." ControlToValidate="txtLastName"> </asp:RequiredFieldValidator> |
Email: | <asp:TextBox ID="txtEmail" Runat="server"
Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" Runat="server" ErrorMessage="Email is required." ControlToValidate="txtEmail"> </asp:RequiredFieldValidator> |
<asp:Button ID="Button1" runat="server" CommandName="NextView" Text="Next" /> </asp:View> <asp:View ID="vShippingMethod" Runat="server"> <asp:Panel ID="Panel1" Runat="server" Width="492"> Please select a shipping method:
<asp:RadioButton ID="rdoUPSGround" Runat="server" Text="UPS Ground" GroupName="ShipVia" Checked="True" />
<asp:RadioButton ID="rdoUPS2Day" Runat="server" Text="UPS Second Day" GroupName="ShipVia" />
<asp:RadioButton ID="rdoFedEx" Runat="server" Text="Federal Express Overnight" GroupName="ShipVia" />
</asp:Panel>
<asp:Button ID="Button2" runat="server" CommandName="PrevView" Text="Previous" /> <asp:Button ID="Button3" runat="server" CommandName="NextView" Text="Next" /> </asp:View> <asp:View ID="vCreditCard" Runat="server"> <asp:Panel ID="Panel2" Runat="server" Width="492px"> Please enter your credit card information:
<asp:ListBox ID="listCardType"
Runat="server"> <asp:ListItem Value="VISA" Selected="True">Visa</asp:ListItem> <asp:ListItem Value="MC"> MasterCard</asp:ListItem> <asp:ListItem Value="AMEX"> American Express</asp:ListItem> </asp:ListBox> |
Card Number: | <asp:TextBox ID="txtCardNumber" Runat="server"
Height="22px" Width="262px"></asp:TextBox> |
Expiration Date: | <asp:DropDownList ID="ddlExpirationMonth"
Runat="server"> <asp:ListItem Value="1">January</asp:ListItem> <asp:ListItem Value="2">February</asp:ListItem> <asp:ListItem Value="3">March</asp:ListItem> <asp:ListItem Value="4">April</asp:ListItem> <asp:ListItem Value="5">May</asp:ListItem> <asp:ListItem Value="6">June</asp:ListItem> <asp:ListItem Value="7">July</asp:ListItem> <asp:ListItem Value="8">August</asp:ListItem> <asp:ListItem Value="9">September</asp:ListItem> <asp:ListItem Value="10">October</asp:ListItem> <asp:ListItem Value="11">November</asp:ListItem> <asp:ListItem Value="12">December</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddlExpirationYear" Runat="server"></asp:DropDownList> |
</asp:MultiView>
<asp:Button ID="Button4" runat="server" CommandName="PrevView" Text="Previous" /> <asp:Button ID="btnFinish" Runat="server" Height="24px" Text="Finish" CommandName="NextView" /> </asp:Panel> </asp:View> <asp:View ID="vFinish" runat="server"> Here is the data you entered:
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"> </asp:TextBox>
</asp:View>
</form>
</body> </html> File: Default.aspx.vb
Partial Class Checkout
Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then Dim iYear As Integer For iYear = DateTime.Now.Year To DateTime.Now.Year + 5 ddlExpirationYear.Items.Add(iYear.ToString()) Next End If End Sub Protected Sub btnFinish_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnFinish.Click Me.DisplayMessage() End Sub Protected Sub DisplayMessage() Dim sShipVia As String = "" If (rdoUPSGround.Checked) Then sShipVia = "UPSG" ElseIf (rdoUPS2Day.Checked) Then sShipVia = "UPS2D" ElseIf (rdoFedEx.Checked) Then sShipVia = "FEDEX" End If Dim sMessage As String sMessage = _ "Contact info" & ControlChars.CrLf & _ " First name: " & txtFirstName.Text & ControlChars.CrLf & _ " Last name: " & txtLastName.Text & ControlChars.CrLf & _ " Email: " & txtEmail.Text & ControlChars.CrLf & _ "Shipping method" & ControlChars.CrLf & _ " Ship via: " & sShipVia & ControlChars.CrLf & _ "Credit card info" & ControlChars.CrLf & _ " Type: " & listCardType.SelectedValue & ControlChars.CrLf & _ " Number: " & txtCardNumber.Text & ControlChars.CrLf & _ " Expiration date: " & ddlExpirationMonth.SelectedValue & "/" & _ ddlExpirationYear.SelectedValue txtMessage.Text = sMessage End Sub
End Class
</source>
MultiView Demo
<source lang="csharp">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head> <title>MultiView Demo</title> <script runat="server" language="C#"> public void SwitchPage(Object s, EventArgs e) { myMultiView.ActiveViewIndex = (myMultiView.ActiveViewIndex + 1) % 2; } </script> </head> <body> <form runat="server">
<asp:Button id="myButton" Text="Switch Page" runat="server" OnClick="SwitchPage" />
<asp:MultiView ID="myMultiView" runat="server" ActiveViewIndex="0"> <asp:View ID="firstView" runat="server">
... contents of the first view ...
</asp:View> <asp:View ID="secondView" runat="server">
... contents of the second view ...
</asp:View> </asp:MultiView> </form> </body>
</html>
</source>
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Checkout" %> <!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 id="Head1" runat="server">
<title>Checkout MultiView Navigation</title>
</head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="4" OnActiveViewChanged="mvCheckout_ActiveViewChanged" > <asp:View ID="vContact" Runat="server"> Please enter your contact information:
First Name: |
<asp:TextBox ID="txtFirstName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" ErrorMessage="First Name is required." ControlToValidate="txtFirstName"> </asp:RequiredFieldValidator> |
|
Last name: |
<asp:TextBox ID="txtLastName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" Runat="server" ErrorMessage="Last Name is required." ControlToValidate="txtLastName"> </asp:RequiredFieldValidator> |
|
Email:</div> | <td> <asp:TextBox ID="txtEmail" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator7" Runat="server" ErrorMessage="Email is required." ControlToValidate="txtEmail"> </asp:RequiredFieldValidator> </td>
<asp:ListBox ID="listCardType" Runat="server">
<asp:ListItem Value="VISA" Selected="True">Visa</asp:ListItem> <asp:ListItem Value="MC">MasterCard</asp:ListItem> <asp:ListItem Value="AMEX">American Express</asp:ListItem> </asp:ListBox> |
Card Number: | <asp:TextBox ID="txtCardNumber" Runat="server" Height="22px" Width="262px"></asp:TextBox> |
Expiration Date: |
<asp:DropDownList ID="ddlExpirationMonth" Runat="server"> <asp:ListItem Value="1">January</asp:ListItem> <asp:ListItem Value="2">February</asp:ListItem> <asp:ListItem Value="3">March</asp:ListItem> <asp:ListItem Value="4">April</asp:ListItem> <asp:ListItem Value="5">May</asp:ListItem> <asp:ListItem Value="6">June</asp:ListItem> <asp:ListItem Value="7">July</asp:ListItem> <asp:ListItem Value="8">August</asp:ListItem> <asp:ListItem Value="9">September</asp:ListItem> <asp:ListItem Value="10">October</asp:ListItem> <asp:ListItem Value="11">November</asp:ListItem> <asp:ListItem Value="12">December</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddlExpirationYear" Runat="server"> </asp:DropDownList> |
<asp:Button ID="Button4" runat="server" CommandArgument="PrevView" Text="Previous" /> <asp:Button ID="btnFinish" Runat="server" Height="24px" Text="Finish" OnClick="btnFinish_Click" /></asp:Panel></asp:View> <asp:View ID="vFinish" runat="server"> Here is the data your entered:
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"></asp:TextBox>
<asp:LinkButton ID="LinkButton4" runat="server" CommandArgument="vNavigate" CommandName="SwitchViewByID">Navigation Menu</asp:LinkButton> </asp:View> <asp:View ID="vNavigate" runat="server"> <asp:LinkButton CommandArgument="0" CommandName="SwitchViewByIndex" ID="LinkButton1" runat="server"> View 1: Contact Info</asp:LinkButton>
<asp:LinkButton CommandArgument="vShippingMethod" CommandName="SwitchViewByID" ID="LinkButton2" runat="server"> View 2: Shipping Method</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="vCreditCard" CommandName="SwitchViewByID"> View 3: Credit Card Info</asp:LinkButton></asp:View> </asp:MultiView></div>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
</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; public partial class Checkout : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { this.DisplayStatus(); if (!IsPostBack) { int year = DateTime.Now.Year; for (; year < DateTime.Now.Year + 6; year++) ddlExpirationYear.Items.Add(year.ToString()); } }
protected void btnFinish_Click(object sender, EventArgs e) { mvCheckout.ActiveViewIndex = 3; this.DisplayMessage(); } private void DisplayMessage() { string shipVia = ""; if (rdoUPSGround.Checked) shipVia = "UPSG"; else if (rdoUPS2Day.Checked) shipVia = "UPS2D"; else if (rdoFedEx.Checked) shipVia = "FEDEX"; string message = "Contact info\n" + " First name: " + txtFirstName.Text + "\n" + " Last name: " + txtLastName.Text + "\n" + " Email: " + txtEmail.Text + "\n" + "Shipping method\n" + " Ship via: " + shipVia + "\n" + "Credit card info\n" + " Type: " + listCardType.SelectedValue + "\n" + " Number: " + txtCardNumber.Text + "\n" + " Expiration date: " + ddlExpirationMonth.SelectedValue + "/" + ddlExpirationYear.SelectedValue; txtMessage.Text = message; } protected void mvCheckout_ActiveViewChanged(object sender, EventArgs e) { this.DisplayStatus(); } private void DisplayStatus() { int viewNumber = mvCheckout.ActiveViewIndex + 1; lblStatus.Text = "View " + viewNumber + " of " + mvCheckout.Views.Count; }
}
</source>
<source lang="csharp">
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Checkout" %> <!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 id="Head1" runat="server"> </head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0" > <asp:View ID="vContact" Runat="server"> Please enter your contact information:
First Name: |
<asp:TextBox ID="txtFirstName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server" ErrorMessage="First Name is required." ControlToValidate="txtFirstName"> </asp:RequiredFieldValidator> |
Last name: |
<asp:TextBox ID="txtLastName" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" Runat="server" ErrorMessage="Last Name is required." ControlToValidate="txtLastName"> </asp:RequiredFieldValidator> |
Email: |
<asp:TextBox ID="txtEmail" Runat="server" Width="200px" Height="22px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator7" Runat="server" ErrorMessage="Email is required." ControlToValidate="txtEmail"> </asp:RequiredFieldValidator> |
<asp:Button ID="Button1" runat="server" CommandName="NextView" Text="Next" /></asp:View> <asp:View ID="vShippingMethod" Runat="server"> <asp:Panel ID="Panel1" Runat="server" Width="492"> Please select a shipping method:
<asp:RadioButton ID="rdoUPSGround" Runat="server" Text="UPS Ground" GroupName="ShipVia" Checked="True" />
<asp:RadioButton ID="rdoUPS2Day" Runat="server" Text="UPS Second Day" GroupName="ShipVia" />
<asp:RadioButton ID="rdoFedEx" Runat="server" Text="Federal Express Overnight" GroupName="ShipVia" />
</asp:Panel>
<asp:Button ID="Button2" runat="server" CommandName="PrevView" Text="Previous" /> <asp:Button ID="Button3" runat="server" CommandName="NextView" Text="Next" /></asp:View> <asp:View ID="vCreditCard" Runat="server"> <asp:Panel ID="Panel2" Runat="server" Width="492px"> Please enter your credit card information:
<asp:ListBox ID="listCardType" Runat="server">
<asp:ListItem Value="VISA" Selected="True">Visa</asp:ListItem> <asp:ListItem Value="MC">MasterCard</asp:ListItem> <asp:ListItem Value="AMEX">American Express</asp:ListItem> </asp:ListBox> |
Card Number: | <asp:TextBox ID="txtCardNumber" Runat="server" Height="22px" Width="262px"></asp:TextBox> |
Expiration Date: |
<asp:DropDownList ID="ddlExpirationMonth" Runat="server"> <asp:ListItem Value="1">January</asp:ListItem> <asp:ListItem Value="2">February</asp:ListItem> <asp:ListItem Value="3">March</asp:ListItem> <asp:ListItem Value="4">April</asp:ListItem> <asp:ListItem Value="5">May</asp:ListItem> <asp:ListItem Value="6">June</asp:ListItem> <asp:ListItem Value="7">July</asp:ListItem> <asp:ListItem Value="8">August</asp:ListItem> <asp:ListItem Value="9">September</asp:ListItem> <asp:ListItem Value="10">October</asp:ListItem> <asp:ListItem Value="11">November</asp:ListItem> <asp:ListItem Value="12">December</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddlExpirationYear" Runat="server"> </asp:DropDownList> |
</asp:MultiView>
<asp:Button ID="Button4" runat="server" CommandArgument="PrevView" Text="Previous" /> <asp:Button ID="btnFinish" Runat="server" Height="24px" Text="Finish" /></asp:Panel></asp:View> <asp:View ID="vFinish" runat="server"> Your order is complete!
Here is the data your entered:
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"></asp:TextBox>
<asp:LinkButton ID="LinkButton4" runat="server" CommandArgument="vNavigate" CommandName="SwitchViewByID">Navigation Menu</asp:LinkButton> </asp:View> <asp:View ID="vNavigate" runat="server"> <asp:LinkButton CommandArgument="0" CommandName="SwitchViewByIndex" ID="LinkButton1" runat="server"> View 1: Contact Info</asp:LinkButton>
<asp:LinkButton CommandArgument="vShippingMethod" CommandName="SwitchViewByID" ID="LinkButton2" runat="server"> View 2: Shipping Method</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="vCreditCard" CommandName="SwitchViewByID"> View 3: Credit Cart Info</asp:LinkButton></asp:View>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
</form>
</body> </html> File: Default.aspx.vb
Partial Class Checkout
Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then Me.DisplayStatus() Dim iYear As Integer For iYear = DateTime.Now.Year To DateTime.Now.Year + 5 ddlExpirationYear.Items.Add(iYear.ToString()) Next End If End Sub Protected Sub btnFinish_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnFinish.Click mvCheckout.ActiveViewIndex = 3 DisplayMessage() End Sub Protected Sub DisplayMessage() Dim shipVia As String shipVia = "" If (rdoUPSGround.Checked) Then shipVia = "UPSG" ElseIf (rdoUPS2Day.Checked) Then shipVia = "UPS2D" ElseIf (rdoFedEx.Checked) Then shipVia = "FEDEX" End If Dim message As String message = _ "Contact info" & ControlChars.Cr & _ " First name: " & txtFirstName.Text & ControlChars.Cr & _ " Last name: " & txtLastName.Text & ControlChars.Cr & _ " Email: " & txtEmail.Text & ControlChars.Cr & _ "Shipping method" & ControlChars.Cr & _ " Ship via: " & shipVia & ControlChars.Cr & _ "Credit card info" & ControlChars.Cr & _ " Type: " & listCardType.SelectedValue & ControlChars.Cr & _ " Number: " & txtCardNumber.Text & ControlChars.Cr & _ " Expiration date: " & ddlExpirationMonth.SelectedValue & "/" & _ ddlExpirationYear.SelectedValue txtMessage.Text = message End Sub Protected Sub mvCheckout_ActiveViewChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles mvCheckout.ActiveViewChanged Me.DisplayStatus() End Sub Private Sub DisplayStatus() Dim viewNumber As Integer = mvCheckout.ActiveViewIndex + 1 lblStatus.Text = "View " & viewNumber & " of " & mvCheckout.Views.Count End Sub
End Class
</source>
Multiview with style
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MultiViewTest" %> <!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 Class Example</title> <style type="text/css"> .TabContainer { font: bold 0.75em Verdana; width: 60em; margin-top: 1.5em; padding-top: 2em; } .TabItemInactive { border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid #aaaaaa; border-bottom: none; background-color: #d3d3d3; text-align: center; text-decoration: none; padding: 0.75em 0.25em 0 0.25em; } .TabItemInactive:hover { background: #808080; } .TabItemActive { border-top: 1px solid white; border-left: none; border-right: 1px solid #aaaaaa; border-bottom: none; text-decoration: none; background-color: #bbbbbb; text-align: center; padding: 0.75em 0.25em 0 0.25em; } .ContentPanel { background-color: #bbbbbb; padding: 10px 10px 10px 10px; width: 60em; font: 0.8em Verdana; } </style>
</head> <body>
<form id="form1" runat="server">
<asp:MultiView ID="mviewMain" runat="Server" ActiveViewIndex="0"> <asp:View ID="CustomerView" runat="Server"> <asp:Panel ID="panelNavigatonView1" runat="server" CssClass="TabContainer"> <asp:Label ID="labOne" runat="Server" CssClass="TabItemActive" Text="Customer Information" /> <asp:LinkButton ID="lnkb_DefaultBook" CssClass="TabItemInactive" Text="Customer Book Selections" runat="Server" OnCommand="LinkButton_Command" CommandName="Book" /> <asp:LinkButton ID="lnkb_DefaultCategories" CssClass="TabItemInactive" Text="Customer Categories" runat="server" OnCommand="LinkButton_Command" CommandName="Categories" /> </asp:Panel> <asp:Panel ID="panelView1" runat="server" CssClass="ContentPanel">
Customer"s Information
First Name:<asp:TextBox ID="txtFirst" runat="server" />
Last Name:<asp:TextBox ID="txtLast" runat="server" />
Phone:<asp:TextBox ID="txtPhone" runat="server" />
<asp:Button id="view1Next" runat="Server" Width="6em" Text="Next" CommandName="NextView" /> </asp:Panel> </asp:View> <asp:View ID="BookView" runat="Server"> <asp:Panel ID="panelNavigatonView2" runat="server" CssClass="TabContainer"> <asp:LinkButton ID="lnkb_BookCustomer" runat="Server" CssClass="TabItemInactive" Text="Customer Information" OnCommand="LinkButton_Command" CommandName="Customer" /> <asp:Label ID="Label3" runat="Server" CssClass="TabItemActive" Text="Customer Book Selections" /> <asp:LinkButton ID="lnkb_BookCategories" runat="server" CssClass="TabItemInactive" Text="Customer Categories" OnCommand="LinkButton_Command" CommandName="Categories" /> </asp:Panel> <asp:Panel ID="panelView2" runat="server" CssClass="ContentPanel"> <asp:Button id="view2Back" runat= "Server" Text="Previous" CommandName="PrevView" Width="6em" /> <asp:Button id="view2Next" runat="Server" Text="Next" CommandName="NextView" Width="6em" /> </asp:Panel> </asp:View> <asp:View ID="CategoriesView" runat="Server"> <asp:Panel ID="panelNavigatonView3" runat="server" CssClass="TabContainer"> <asp:LinkButton ID="lnkb_CategoriesCustomer" runat="Server" CssClass="TabItemInactive" Text="Customer Information" OnCommand="LinkButton_Command" CommandName="Customer" /> <asp:LinkButton ID="lnkb_CategoriesBook" runat="Server" CssClass="TabItemInactive" Text="Customer Book Selections" OnCommand="LinkButton_Command" CommandName="Book" /> <asp:Label ID="Label4" runat="Server" CssClass="TabItemActive" Text="Customer Categories" /> </asp:Panel> <asp:Panel ID="panelView3" runat="server" CssClass="ContentPanel"> <asp:Button id="view3Prev" runat= "Server" Text="Previous" CommandName="PrevView" Width="6em" /> <asp:Button id="view3First" runat= "Server" Text="Start" CommandName="SwitchViewByIndex" CommandArgument="0" Width="6em" /> </asp:Panel> </asp:View> </asp:MultiView>
</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; public partial class MultiViewTest : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { mviewMain.SetActiveView(CustomerView); } } protected void LinkButton_Command(object sender, CommandEventArgs e) { switch ((string)e.rumandName) { case "Customer": mviewMain.SetActiveView(CustomerView); break; case "Book": mviewMain.SetActiveView(BookView); break; case "Categories": mviewMain.SetActiveView(CategoriesView); break; } }
}
</source>