ASP.Net/Asp Control/Multiview
Содержание
asp:multiview Demo (C#)
<%@ 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">
<p>
Please enter your name:
<br /><br />
<asp:textbox id="TB_Name" runat="server"/>
<asp:button id="BT_Submit" runat="server" text="OK" onclick="BT_Submit_Click" softkeylabel="OK" />
</p>
</asp:view>
<asp:view id="View2" runat="server">
<p>
<asp:literal id="LT_Name" runat="server"/>
<br /><br />
<asp:linkbutton id="LB_Back" runat="server" onclick="LB_Back_Click" softkeylabel="Back">Back</asp:linkbutton>
</p>
</asp:view>
</asp:multiview>
</form>
</body>
</html>
asp:MultiView set up
<%@ 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">
<div>
<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">
<b>Showing View #1</b><br />
<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" />
</asp:View>
<asp:View ID="View2" runat="server">
<b>Showing View #2</b><br />
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">
<b>Showing View #3</b><br />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<asp:Button ID="Button1" runat="server" Text="< Prev" CommandName="PrevView" />
</asp:View>
</asp:MultiView>
</div>
</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;
}
}
MultiView ActiveViewIndex Example
<%@ 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">
<h3>MultiView ActiveViewIndex Example</h3>
<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><br><br>
<asp:RadioButton id="Page1Radio1"
Text="Web Applications"
Checked="False"
GroupName="RadioGroup1"
runat="server" >
</asp:RadioButton><br>
<asp:RadioButton id="Page1Radio2"
Text="Windows Forms Applications"
Checked="False"
GroupName="RadioGroup1"
runat="server" >
</asp:RadioButton><br><br><br>
<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><br><br>
<asp:RadioButton id="Page2Radio1"
Text="Less than five years"
Checked="False"
GroupName="RadioGroup1"
runat="Server">
</asp:RadioButton><br>
<asp:RadioButton id="Page2Radio2"
Text="More than five years"
Checked="False"
GroupName="RadioGroup1"
runat="Server">
</asp:RadioButton><br><br><br>
<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><br><br>
<asp:RadioButton id="Page3Radio1"
Text="Visual Basic .NET"
Checked="False"
GroupName="RadioGroup1"
runat="Server">
</asp:RadioButton><br>
<asp:RadioButton id="Page3Radio2"
Text="C#"
Checked="False"
GroupName="RadioGroup1"
runat="Server">
</asp:RadioButton><br>
<asp:RadioButton id="Page3Radio3"
Text="C++"
Checked="False"
GroupName="RadioGroup1"
runat="Server">
</asp:RadioButton><br><br>
<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><br>
</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>
<br><br><br><br><br><br>
<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>
Multiview checkout (C#)
<%@ 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">
<div>
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0">
<asp:View ID="vContact" Runat="server">
<table>
<tr>
<td>First Name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Last name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<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>
</td>
</tr>
</table>
<br />
<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:<br /><br />
<asp:RadioButton ID="rdoUPSGround"
Runat="server"
Text="UPS Ground"
GroupName="ShipVia"
Checked="True" />
<br />
<asp:RadioButton ID="rdoUPS2Day"
Runat="server"
Text="UPS Second Day"
GroupName="ShipVia" />
<br />
<asp:RadioButton ID="rdoFedEx"
Runat="server"
Text="Federal Express Overnight"
GroupName="ShipVia" />
<br />
</asp:Panel><br />
<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:<br />
<br />
<table>
<tr>
<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>
</td>
<td>Card Number:</td>
<td>
<asp:TextBox ID="txtCardNumber" Runat="server"
Height="22px" Width="262px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiration Date:</td>
<td>
<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>
</td>
</tr>
</table>
<br />
<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:<br /><br />
<asp:TextBox ID="txtMessage" runat="server"
Height="182px" TextMode="MultiLine" Width="346px">
</asp:TextBox><br />
</asp:View>
</asp:MultiView></div>
</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;
}
}
Multiview checkout (VB)
<%@ 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">
<div>
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0">
<asp:View ID="vContact" Runat="server">
Please enter your contact information:<br /><br />
<table>
<tr>
<td>First Name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Last name:</td>
<td><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>
</td>
</tr>
<tr>
<td>Email:</td>
<td><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>
</td>
</tr>
</table>
<br />
<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:<br /><br />
<asp:RadioButton ID="rdoUPSGround"
Runat="server"
Text="UPS Ground"
GroupName="ShipVia"
Checked="True" />
<br />
<asp:RadioButton ID="rdoUPS2Day"
Runat="server"
Text="UPS Second Day"
GroupName="ShipVia" />
<br />
<asp:RadioButton ID="rdoFedEx" Runat="server"
Text="Federal Express Overnight" GroupName="ShipVia" />
<br />
</asp:Panel><br />
<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:<br />
<br />
<table>
<tr>
<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>
</td>
<td>Card Number:</td>
<td><asp:TextBox ID="txtCardNumber" Runat="server"
Height="22px" Width="262px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiration Date:</td>
<td><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>
</td>
</tr>
</table>
<br />
<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:<br /><br />
<asp:TextBox ID="txtMessage" runat="server"
Height="182px" TextMode="MultiLine" Width="346px">
</asp:TextBox><br />
</asp:View>
</asp:MultiView></div>
</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
MultiView Demo
<!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">
<p>
<asp:Button id="myButton" Text="Switch Page"
runat="server" OnClick="SwitchPage" />
</p>
<asp:MultiView ID="myMultiView" runat="server"
ActiveViewIndex="0">
<asp:View ID="firstView" runat="server">
<p>... contents of the first view ...</p>
</asp:View>
<asp:View ID="secondView" runat="server">
<p>... contents of the second view ...</p>
</asp:View>
</asp:MultiView>
</form>
</body>
</html>
<%@ 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">
<div>
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="4" OnActiveViewChanged="mvCheckout_ActiveViewChanged" >
<asp:View ID="vContact" Runat="server">
Please enter your contact information:<br /><br />
<table>
<tr>
<td>First Name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Last name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Email:</div>
</td>
<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>
</tr>
</table>
<br />
<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:<br />
<br />
<asp:RadioButton ID="rdoUPSGround" Runat="server" Text="UPS Ground" GroupName="ShipVia"
Checked="True" />
<br />
<asp:RadioButton ID="rdoUPS2Day" Runat="server" Text="UPS Second Day" GroupName="ShipVia" />
<br />
<asp:RadioButton ID="rdoFedEx" Runat="server" Text="Federal Express Overnight" GroupName="ShipVia" />
<br />
</asp:Panel>
<br />
<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:<br />
<br />
<table>
<tr>
<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>
</td>
<td>Card Number:</td>
<td><asp:TextBox ID="txtCardNumber" Runat="server" Height="22px" Width="262px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiration Date:</td>
<td>
<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>
</td>
</tr>
</table>
<br />
<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:<br />
<br />
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"></asp:TextBox><br />
<br />
<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><br />
<asp:LinkButton CommandArgument="vShippingMethod" CommandName="SwitchViewByID" ID="LinkButton2" runat="server">
View 2: Shipping Method</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="vCreditCard" CommandName="SwitchViewByID">
View 3: Credit Card Info</asp:LinkButton></asp:View>
</asp:MultiView></div>
<br />
<asp:Label ID="lblStatus" runat="server"></asp:Label><br />
</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;
}
}
<%@ 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">
<div>
<asp:MultiView ID="mvCheckout" Runat="server" ActiveViewIndex="0" >
<asp:View ID="vContact" Runat="server">
Please enter your contact information:<br /><br />
<table>
<tr>
<td>First Name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Last name:</td>
<td>
<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>
</td>
</tr>
<tr>
<td>Email:</td>
<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>
</tr>
</table>
<br />
<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:<br />
<br />
<asp:RadioButton ID="rdoUPSGround" Runat="server" Text="UPS Ground" GroupName="ShipVia"
Checked="True" />
<br />
<asp:RadioButton ID="rdoUPS2Day" Runat="server" Text="UPS Second Day" GroupName="ShipVia" />
<br />
<asp:RadioButton ID="rdoFedEx" Runat="server" Text="Federal Express Overnight" GroupName="ShipVia" />
<br />
</asp:Panel>
<br />
<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:<br />
<br />
<table>
<tr>
<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>
</td>
<td>Card Number:</td>
<td><asp:TextBox ID="txtCardNumber" Runat="server" Height="22px" Width="262px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiration Date:</td>
<td>
<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>
</td>
</tr>
</table>
<br />
<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!<br />
<br />
Here is the data your entered:<br />
<br />
<asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="346px"></asp:TextBox><br />
<br />
<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><br />
<asp:LinkButton CommandArgument="vShippingMethod" CommandName="SwitchViewByID" ID="LinkButton2" runat="server">
View 2: Shipping Method</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="vCreditCard" CommandName="SwitchViewByID">
View 3: Credit Cart Info</asp:LinkButton></asp:View>
</asp:MultiView></div>
<br />
<asp:Label ID="lblStatus" runat="server"></asp:Label><br />
</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
Multiview with style
<%@ 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">
<div id="container">
<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">
<h2>Customer"s Information</h2>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server" /></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server" /></p>
<p>Phone:<asp:TextBox ID="txtPhone" runat="server" /></p>
<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>
</div>
</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;
}
}
}