Multiview with navigation (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>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;
}
}
Related examples in the same category