ASP.NET Tutorial/ASP.net Controls/Wizard

Содержание

1 A simple Wizard control (C#)
2 A simple Wizard control (VB)
3 Custom wizard
4 Custom wizard navigation
5 Displaying a Wizard
6 Help Example Wizard
7 Wizard and its steps (C#)
8 WizardStep
9 Wizard template

A simple Wizard control (C#)

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Wizard server control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Wizard ID="Wizard1" Runat="server" SideBarEnabled="true" 
         ActiveStepIndex="0">
            <WizardSteps>
                <asp:WizardStep ID="WizardStep1" Runat="server" Title="Step 1">
                    This is the first step.</asp:WizardStep>
                <asp:WizardStep ID="WizardStep2" Runat="server" Title="Step 2">
                    This is the second step.</asp:WizardStep>
                <asp:WizardStep ID="WizardStep3" Runat="server" Title="Step 3">
                    This is the third and final step.</asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
    </form>
</body>
</html>

A simple Wizard control (VB)

<%@ Page Language="VB"%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Wizard server control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Wizard ID="Wizard1" Runat="server" SideBarEnabled="true" 
         ActiveStepIndex="0">
            <WizardSteps>
                <asp:WizardStep ID="WizardStep1" Runat="server" Title="Step 1">
                    This is the first step.</asp:WizardStep>
                <asp:WizardStep ID="WizardStep2" Runat="server" Title="Step 2">
                    This is the second step.</asp:WizardStep>
                <asp:WizardStep ID="WizardStep3" Runat="server" Title="Step 3">
                    This is the third and final step.</asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
    </form>
</body>
</html>

Custom wizard

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CustomWizard" %>
<!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>Custom Wizard</title>
   <style type="text/css">
    .wizardStepContent { padding: 5px; }
    .wizardNavContent { padding: 4px; }
    </style>
</head>
<body>
   <form id="form1" runat="server">
   <asp:Wizard ID="myWizard" 
               runat="server" 
               HeaderText="Checkout" 
               BackColor="#CCCC99"
               BorderColor="#999999" 
               BorderWidth="1px" 
               Height="200" 
               OnActiveStepChanged="myWizard_ActiveStepChanged" 
               OnNextButtonClick="myWizard_NextButtonClick"
               OnFinishButtonClick="myWizard_FinishButtonClick" 
               OnPreviousButtonClick="myWizard_PreviousButtonClick"
               OnSideBarButtonClick="myWizard_SideBarButtonClick">
      <HeaderStyle BackColor="#FFFFFF" Font-Size="Medium" VerticalAlign="Top" />
      <HeaderTemplate>
         <div style="margin: 5px 5px 5px 5px">
         <img src="images/title_checkout_step<%= myWizard.ActiveStepIndex+1 %>.gif" 
           alt="Checkout <%= myWizard.ActiveStep.Title%>" />
         </div>
      </HeaderTemplate>
      <SideBarStyle VerticalAlign="Top" BackColor="#FFFFCC" Font-Size="small" />
      <SideBarTemplate>
         <asp:Panel Style="padding: 10px 10px 10px 10px" 
                    ID="panSide" 
                    runat="server">
            <asp:DataList ID="SideBarList" 
                          runat="server">
               <ItemTemplate>
                  <asp:ImageButton ID="SideBarButton" 
                                   runat="server" 
                                   CommandName="MoveTo" 
                                   ImageUrl="<%# GetStepImage((string)Eval("Title"))%>" />
               </ItemTemplate>
               <SelectedItemTemplate>
                  <asp:ImageButton ID="SideBarButton" 
                                   runat="server" 
                                   CommandName="MoveTo" 
                                   ImageUrl="<%# GetSelectedStepImage((string)Eval("Title"))%>" />
               </SelectedItemTemplate>
            </asp:DataList>
         </asp:Panel>
      </SideBarTemplate>
      
      <StepStyle CssClass="wizardStepContent" VerticalAlign="Top" />
      <NavigationStyle BackColor="white" VerticalAlign="Bottom" />
      <NavigationButtonStyle BackColor="#FFFFCC" ForeColor="#666633" />
      
      <StartNavigationTemplate>
         <asp:Panel ID="panStart" runat="server" CssClass="wizardNavContent">
            <asp:ImageButton runat="server" ID="imgStart" 
               ImageUrl="~/images/button_checkout_start.gif"
               CommandName="MoveNext" AlternateText="Sign-In" />
         </asp:Panel>
      </StartNavigationTemplate>
      
      <StepNavigationTemplate>
         <asp:Panel ID="panStep" runat="server" CssClass="wizardNavContent">
            <asp:ImageButton runat="server" ID="imgPrev" 
               ImageUrl="~/images/button_checkout_previous.gif"
               CommandName="MovePrevious" AlternateText="Previous" />
            <asp:ImageButton runat="server" ID="imgNext" 
               ImageUrl="~/images/button_checkout_next.gif"
               CommandName="MoveNext" AlternateText="Next" />
         </asp:Panel>
      </StepNavigationTemplate>
      
      <FinishNavigationTemplate>
         <asp:Panel ID="panFinish" runat="server" CssClass="wizardNavContent">
            <asp:ImageButton runat="server" ID="imgPrev" 
               ImageUrl="~/images/button_checkout_previous.gif"
               CommandName="MovePrevious" AlternateText="Previous" />
            <asp:ImageButton runat="server" ID="imgPayment" 
               ImageUrl="~/images/button_checkout_finish.gif"
               CommandName="MoveComplete" AlternateText="Make Payment" />
         </asp:Panel>
      </FinishNavigationTemplate>
      
      <WizardSteps>
         <asp:WizardStep ID="WizardStep1" runat="server" 
            Title="Login" StepType="Start">
            Email<br />
            <asp:TextBox ID="txtEmail" runat="server" /><br />
            Password<br />
            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
         </asp:WizardStep>
         
         <asp:WizardStep ID="WizardStep2" runat="server" Title="Address">
            Address Line 1:
            <br />
            <asp:TextBox runat="server" ID="txtAddress1" Width="314px" />
            <br />
            Address Line 2:
            <br />
            <asp:TextBox runat="server" ID="txtAddress2" Width="314px" />
            <br />
            City:
            <br />
            <asp:TextBox runat="server" ID="txtCity" Width="155px" />
            <br />
            State:
            <br />
            <asp:TextBox runat="server" ID="txtState" Width="75px" />
            <br />
            ZIP/Postal Code:
            <br />
            <asp:TextBox runat="server" ID="txtZip" Width="50px" />
         </asp:WizardStep>
         
         <asp:WizardStep ID="WizardStep3" runat="server" Title="Shipping">
            Shipper<br />
            <asp:DropDownList ID="drpShipper" runat="server">
               <asp:ListItem>Air Mail</asp:ListItem>
               <asp:ListItem>Xpresspost</asp:ListItem>
               <asp:ListItem>Fed Ex</asp:ListItem>
            </asp:DropDownList>
         </asp:WizardStep>
         <asp:WizardStep ID="WizardStep4" runat="server" 
            Title="Payment" StepType="Finish"
            AllowReturn="false">
            Payment Type<br />
            <asp:DropDownList ID="drpPayment" runat="server">
               <asp:ListItem>American Express</asp:ListItem>
               <asp:ListItem>Visa</asp:ListItem>
               <asp:ListItem>Mastercard</asp:ListItem>
            </asp:DropDownList>
            <br />
            Expiry Month:
            <br />
            <asp:DropDownList ID="drpMonth" runat="server">
               <asp:ListItem>01</asp:ListItem>
               <asp:ListItem>02</asp:ListItem>
               <asp:ListItem>03</asp:ListItem>
               <asp:ListItem>04</asp:ListItem>
               <asp:ListItem>05</asp:ListItem>
               <asp:ListItem>06</asp:ListItem>
               <asp:ListItem>07</asp:ListItem>
               <asp:ListItem>08</asp:ListItem>
               <asp:ListItem>09</asp:ListItem>
               <asp:ListItem>10</asp:ListItem>
               <asp:ListItem>11</asp:ListItem>
               <asp:ListItem>12</asp:ListItem>
            </asp:DropDownList>
            <br />
            Expiry Year:
            <br />
            <asp:DropDownList ID="drpYear" runat="server">
               <asp:ListItem>2005</asp:ListItem>
               <asp:ListItem>2006</asp:ListItem>
               <asp:ListItem>2007</asp:ListItem>
               <asp:ListItem>2008</asp:ListItem>
               <asp:ListItem>2009</asp:ListItem>
               <asp:ListItem>2010</asp:ListItem>
            </asp:DropDownList>
            <br />
         </asp:WizardStep>
         
         <asp:WizardStep ID="WizardStep5" runat="server" Title="Confirmation" StepType="Complete">
            <asp:Label ID="labConfirmation" runat="server"></asp:Label>
         </asp:WizardStep>
      </WizardSteps>
   </asp:Wizard>
   <asp:Label ID="myLabel" 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 CustomWizard : System.Web.UI.Page
{
    public object GetStepImage(string title)
    {
        return "images/sidebar_" + title + ".gif";
    }
    public object GetSelectedStepImage(string title)
    {
        return "images/sidebar_" + title + "_selected.gif";
    }
    protected void myWizard_ActiveStepChanged(object sender, EventArgs e)
    {
    }
    protected void myWizard_NextButtonClick(object sender, WizardNavigationEventArgs e)
    {
    }
    protected void myWizard_PreviousButtonClick(object sender, WizardNavigationEventArgs e)
    {
    }
    protected void myWizard_FinishButtonClick(object sender, WizardNavigationEventArgs e)
    {
        Label labConfirm = (Label)myWizard.FindControl("labConfirmation");
        labConfirm.Text = "Order has been processed for " + txtEmail.Text;
        labConfirm.Text += "<br/>Shipped via " + drpShipper.SelectedValue;
        labConfirm.Text += "<br/>Payment from " + drpPayment.SelectedValue;
    }
    protected void myWizard_SideBarButtonClick(object sender, WizardNavigationEventArgs e)
    {
        e.Cancel = true;
    }
}

Custom wizard navigation

<%@ Page Language="C#" 
         AutoEventWireup="true" 
         CodeFile="Default.aspx.cs"
         Inherits="CustomNavigationWizard" %>
<!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>Custom Navigation Wizard</title>
  <style type="text/css">
    .wizardStepContent { padding: 5px; }
    .wizardNavContent { padding: 4px; }
    </style>
</head>
<body>
  <form id="form1" runat="server">
  <asp:Wizard ID="myWizard" runat="server" HeaderText="Checkout" BackColor="#CCCC99"
    BorderColor="#999999" BorderWidth="1px" Font-Names="Verdana,Arial,Helvetica" Font-Size="Small"
    Height="200">
    <HeaderStyle BackColor="#FFFFFF" Font-Size="Medium" VerticalAlign="Top" />
    <HeaderTemplate>
      <div style="margin: 5px 5px 5px 5px">
        <img src="images/title_checkout_step<%= myWizard.ActiveStepIndex+1 %>.gif" alt="Checkout <%= myWizard.ActiveStep.Title%>" />
      </div>
    </HeaderTemplate>
    <SideBarStyle VerticalAlign="Top" BackColor="#FFFFCC" Font-Size="small" />
    <SideBarTemplate>
      <asp:Panel Style="padding: 10px 10px 10px 10px" ID="panSide" runat="server">
        <asp:DataList ID="SideBarList" runat="server">
          <ItemTemplate>
            <asp:ImageButton ID="SideBarButton" runat="server" CommandName="MoveTo" ImageUrl="<%# GetStepImage((string)Eval("Title"))%>" />
          </ItemTemplate>
          <SelectedItemTemplate>
            <asp:ImageButton ID="SideBarButton" runat="server" CommandName="MoveTo" ImageUrl="<%# GetSelectedStepImage((string)Eval("Title"))%>" />
          </SelectedItemTemplate>
        </asp:DataList>
      </asp:Panel>
    </SideBarTemplate>
    <StepStyle CssClass="wizardStepContent" VerticalAlign="Top" />
    <NavigationStyle BackColor="white" VerticalAlign="Bottom" />
    <NavigationButtonStyle BackColor="#FFFFCC" ForeColor="#666633" />
    <StartNavigationTemplate>
      <asp:Panel ID="panStart" runat="server" CssClass="wizardNavContent">
        <asp:ImageButton runat="server" ID="imgStart" ImageUrl="~/images/button_checkout_start.gif"
          CommandName="MoveNext" AlternateText="Sign-In" />
      </asp:Panel>
    </StartNavigationTemplate>
    <StepNavigationTemplate>
      <asp:Panel ID="panStep" runat="server" CssClass="wizardNavContent">
        <asp:ImageButton runat="server" ID="imgPrev" ImageUrl="~/images/button_checkout_previous.gif"
          CommandName="MovePrevious" AlternateText="Previous" />
        <asp:ImageButton runat="server" ID="imgNext" ImageUrl="~/images/button_checkout_next.gif"
          CommandName="MoveNext" AlternateText="Next" />
      </asp:Panel>
    </StepNavigationTemplate>
    <FinishNavigationTemplate>
      <asp:Panel ID="panFinish" runat="server" CssClass="wizardNavContent">
        <asp:ImageButton runat="server" ID="imgPrevFin" ImageUrl="~/images/button_checkout_previous.gif"
          CommandName="MovePrevious" AlternateText="Previous" />      
        <asp:ImageButton runat="server" ID="imgFinish" ImageUrl="~/images/button_checkout_finish.gif"
          CommandName="MoveFinish" AlternateText="Make Payment" />
      </asp:Panel>
    </FinishNavigationTemplate>
    <WizardSteps>
      <asp:WizardStep ID="WizardStep1" runat="server" Title="Login">
        <asp:Label ID="label1" runat="server">Name</asp:Label>
        <asp:TextBox ID="txtName" runat="server" /><br />
        <asp:Label ID="label2" runat="server">Email</asp:Label>
        <asp:TextBox ID="txtEmail" runat="server" />
      </asp:WizardStep>
      <asp:WizardStep ID="WizardStep2" runat="server" Title="Address">
        <asp:Label ID="label3" runat="server">Address</asp:Label>
      </asp:WizardStep>
      <asp:WizardStep ID="WizardStep3" runat="server" Title="Shipping">
        <asp:Label ID="label4" runat="server">Shipping</asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server">
          <asp:ListItem>Air Mail</asp:ListItem>
          <asp:ListItem>Fed Ex</asp:ListItem>
        </asp:DropDownList>
      </asp:WizardStep>
      <asp:WizardStep ID="WizardStep4" runat="server" Title="Payment">
        <asp:Label ID="label5" runat="server">Payment</asp:Label>
      </asp:WizardStep>
      <asp:WizardStep ID="WizardStep5" runat="server" Title="Confirmation">
        <asp:Label ID="label6" runat="server">Confirmation</asp:Label>
      </asp:WizardStep>
    </WizardSteps>
  </asp:Wizard>
  </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 CustomNavigationWizard: System.Web.UI.Page
{
    public object GetStepImage(string title)
    {
        return "images/sidebar_" + title + ".gif";
    }
    public object GetSelectedStepImage(string title)
    {
        return "images/sidebar_" + title + "_selected.gif";
    }
}

Displaying a Wizard

ActiveStep:                 get the active WizardStep control.
ActiveStepIndex:            set or get the index of the active WizardStep control.
CancelDestinationPageUrl:   URL when clicking Cancel button.
DisplayCancelButton:        hide or display the Cancel button.
DisplaySideBar:             hide or display the Wizard control"s sidebar. 
FinishDestinationPageUrl:   URL when clicking the Finish button.
HeaderText:                 header text that appears at the top of the Wizard control.
WizardSteps:                get the WizardStep controls.

The Wizard control supports the following templates:

FinishNavigationTemplate:    appearance of the navigation area of the finish step.
HeaderTemplate:              appearance of the header area.
SideBarTemplate:             appearance of the sidebar area.
StartNavigationTemplate:     appearance of the navigation area of the start step.
StepNavigationTemplate:      appearance of the navigation area of steps that are not start, finish, or complete steps.
The Wizard control also supports the following methods:
GetHistory():     return the collection of WizardStep controls that have been accessed.
GetStepType():    return the type of WizardStep at a particular index. 
                  Possible values are Auto, Complete, Finish, Start, and Step.
MoveTo():         move to a particular WizardStep.

The Wizard control also supports the following events:
ActiveStepChanged:        Called when a new WizardStep becomes the active step.
CancelButtonClick:        Called when the Cancel button is clicked.
FinishButtonClick:        Called when the Finish button is clicked.
NextButtonClick:          Called when the Next button is clicked.
PreviousButtonClick:      Called when the Previous button is clicked.
SideBarButtonClick:       Called when a sidebar button is clicked.
The WizardStep control supports the following properties:
AllowReturn:      prevent or allow a user to return to this step from a future step.
Name:             return the name of the WizardStep control.
StepType:         get or set the type of wizard step. 
                  Possible values are Auto, Complete, Finish, Start, and Step.
Title:            get or set the title of the WizardStep. 
                  The title is displayed in the wizard sidebar.
Wizard:           get the Wizard control containing the WizardStep.
The WizardStep also supports the following two events:
Activate:        Raised when a WizardStep becomes active.
Deactivate:      Raised when another WizardStep becomes active.
<%@ 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">
    <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>

Help Example Wizard

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HelpExampleWizard" %>
<!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" >
  <body>
    <form id="form1" runat="server">    
      <asp:Wizard id="Wizard1" 
        runat="server" 
        onfinishbuttonclick="OnFinishButtonClick" 
        backcolor="#EFF3FB" 
        font-names="Verdana" 
        font-size="0.8em"
        borderwidth="1px" 
        bordercolor="#B5C7DE" 
        style="font-size: medium; font-family: Verdana;" 
        onactivestepchanged="OnActiveStepChanged">       
      <StepStyle forecolor="#333333" 
        font-size="0.8em" />
        <WizardSteps>        
          <asp:WizardStep id="Step1" 
            title="One"
            allowreturn="false" 
            runat="server" >
            Welcome to the Wizard example.  This step"s AllowReturn property is set 
            to false, so after you leave this step you will not be able to return to it.
          </asp:WizardStep>          
          <asp:WizardStep id="Step2"
            title="Two" 
            runat="server" >
            <!-- ... Put UI elements here ... -->
            Please enter your billing information.
            <br />
            Name:<br />
            <asp:TextBox runat="server" 
              id="BillingName" 
              width="226px" 
              height="17px" /> 
            <br />
            E-mail Address:<br />
            <asp:TextBox runat="server" 
              id="EmailAddress" 
              width="224px" 
              height="17px" />
            <br />
            Address Line 1: <br />
            <asp:TextBox runat="server" 
              id="BillingAddressLine1" 
              width="314px" 
              height="17px" />
            <br />
            Address Line 2: <br />
            <asp:TextBox runat="server" 
              id="BillingAddressLine2" 
              width="314px" 
              height="17px" />
            <br />
            City: <br />
            <asp:TextBox runat="server" 
              id="BillingCity" 
              width="155px" 
              height="17px" /> 
            <br />
            State: <br />
            <asp:TextBox runat="server" 
              id="BillingState" 
              width="75px" 
              height="17px" /> 
            <br />
            ZIP Code: <br />
            <asp:TextBox runat="server" 
              id="BillingZip" 
              height="17px" />
            <br /><br />
            <asp:CheckBox runat="server" 
              id="SeparateShippingCheckBox" 
              text="Please check here if you would like to add a separate shipping address." />
          </asp:WizardStep>          
          <asp:WizardStep id="Step3" 
            title="Three" 
            runat="server" >
            <!-- Gather the shipping address in this step if CheckBox1 was selected. -->
            Please enter your shipping information.
            <br />
                Name:<br />
                <asp:TextBox runat="server" 
                  id="ShippingName" 
                  height="17px" /> 
                <br />
                Address Line 1: <br />
                <asp:TextBox runat="server" 
                  id="ShippingAddress1" 
                  width="370px" 
                  height="17px" />
                <br />
                Address Line 2: <br />
                <asp:TextBox runat="server" 
                  id="ShippingAddress2" 
                  width="370px" 
                  height="17px" />
                <br />
                City: <br />
                <asp:TextBox runat="server" 
                  id="ShippingCity" 
                  height="17px" /> 
                <br />
                State: <br />
                <asp:TextBox runat="server" 
                  id="ShippingState" 
                  width="65px" 
                  height="17px" />
                <br /> 
                ZIP Code: <br />
                <asp:TextBox runat="server" 
                  id="ShippingZip" 
                  height="17px" />
          </asp:WizardStep>
          <asp:WizardStep id="Finish" 
            title="Finish"
            runat="server" >
            <!-- Put UI elements here for the Finish step. -->
            <asp:Button runat="server" 
              id="GoBackButton" 
              text="Go Back to Step 2" 
              onclick="OnGoBackButtonClick"
              forecolor="#284E98" 
              font-names="Verdana"
              font-size="1.0em" 
              borderstyle="Solid" 
              borderwidth="1px" 
              bordercolor="#507CD1" 
              backcolor="White" /> 
          </asp:WizardStep>          
          <asp:WizardStep runat="server" 
            steptype="Complete" 
            title="Complete" 
            id="Complete">
            <asp:Label runat="server" 
              id="CompleteMessageLabel" 
              width="408px" 
              height="24px">
            </asp:Label>
          </asp:WizardStep>
        </WizardSteps> 
        <NavigationButtonStyle forecolor="#284E98" 
          font-names="Verdana"
          font-size="1.0em" 
          borderstyle="Solid" 
          borderwidth="1px" 
          bordercolor="#507CD1" 
          backcolor="White" />
        <HeaderStyle forecolor="White" 
          horizontalalign="Center" 
          font-size="0.9em" 
          font-bold="True"
          backcolor="#284E98" 
          borderstyle="Solid" 
          bordercolor="#EFF3FB" 
          borderwidth="2px" />
        <SideBarStyle verticalalign="Top" 
          horizontalalign="Center"
          font-size="0.8em" 
          forecolor="#000099"
          backcolor="#EFF3FB"
          width="45px" />
        <HeaderTemplate>
          <b>Wizard Example</b>
        </HeaderTemplate>
      </asp:Wizard>
    </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 HelpExampleWizard : System.Web.UI.Page
{
  protected void OnFinishButtonClick(Object sender, WizardNavigationEventArgs e)
  {
    Label tempLabel = (Label)Wizard1.FindControl("CompleteMessageLabel");
    if (tempLabel != null)
    {
      tempLabel.Text = "An e-mail will be sent to " + (EmailAddress.Text.Length == 0 ? "your e-mail address" : EmailAddress.Text) + ".";
    }
  }
  protected void OnGoBackButtonClick(object sender, EventArgs e)
  {
    if (Step1.AllowReturn)
    {
      Wizard1.ActiveStepIndex = Wizard1.WizardSteps.IndexOf(this.Step1);
    }
    else
    {
      Wizard1.ActiveStepIndex = Wizard1.WizardSteps.IndexOf(this.Step2);
      Response.Write("ActiveStep is set to Step2 because Step1 has AllowReturn set to false.");
    }
  }
  protected void OnActiveStepChanged(object sender, EventArgs e)
  {
    if (Wizard1.ActiveStepIndex == Wizard1.WizardSteps.IndexOf(this.Step3))
    {
      if (this.SeparateShippingCheckBox.Checked)
      {
        Wizard1.MoveTo(this.Step3);
      }
      else
      {
        Wizard1.MoveTo(this.Finish);
      }
    }
  }
}

Wizard and its steps (C#)

File: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WizardGreetingCardMaker" %>
<!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>Greeting Card Wizard</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" BackColor="LemonChiffon" BorderStyle="Groove" BorderWidth="2px" CellPadding="10" OnFinishButtonClick="Wizard1_FinishButtonClick" Width="456px">
            <WizardSteps>
                <asp:WizardStep runat="server" Title="Step 1 - Colors">
                Choose a foreground (text) color:<br  />
                <asp:DropDownList ID="lstForeColor" runat="server" Width="194px">
                </asp:DropDownList><br/>
                <br  />
                Choose a background color:<br  />
                <asp:DropDownList ID="lstBackColor" runat="server" Width="194px">
                </asp:DropDownList>                          
                
                </asp:WizardStep>
                <asp:WizardStep runat="server" Title="Step 2 - Background">
                
                    Choose a border style:<br  />
                <asp:RadioButtonList ID="lstBorder" runat="server" 
                    Height="59px" RepeatColumns="2" Width="177px">
                </asp:RadioButtonList><br  />
                <br  />
                <asp:CheckBox ID="chkPicture" runat="server" 
                    Text="Add the Default Picture"  />                
                
                </asp:WizardStep>
                <asp:WizardStep runat="server" Title="Step 3 - Text">
                
                
                Choose a font name:<br  />
                <asp:DropDownList ID="lstFontName" runat="server"  Width="194px">
                </asp:DropDownList><br  />
                <br  />
                Specify a font size:<br  />
                <asp:TextBox ID="txtFontSize" runat="server" ></asp:TextBox><br  />
                <br  />
                Enter the greeting text below:<br  />
                <asp:TextBox ID="txtGreeting" runat="server" 
                    TextMode="MultiLine" Width="240px" ></asp:TextBox>
                
                </asp:WizardStep>
                <asp:WizardStep runat="server" StepType="Complete" Title="Greeting Card">
                <asp:Panel ID="pnlCard" runat="server" Height="445px" HorizontalAlign="Center" Style="z-index: 101;" Width="339px">
            <br />
            &nbsp;
            <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>
                </asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
    
    </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;
using System.Drawing;
using System.ruponentModel;
public partial class WizardGreetingCardMaker : 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 Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs 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;
    }
}

WizardStep

<%@ Page Language="C#" %>
<!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>Sample Simple Wizard</title>
</head>
<body>
   <form id="form1" runat="server">
      <div id="container">
      <h1>Sample Wizard</h1>
      <asp:Wizard ID="myWizard" runat="server" HeaderText="Sample Wizard" >
         <WizardSteps>
            <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
               <b>Step One</b><br />
               <asp:Label ID="label1" runat="server">Name</asp:Label>
               <asp:TextBox ID="txtName" runat="server" /><br />
               <asp:Label ID="label2" runat="server">Email</asp:Label>
               <asp:TextBox ID="txtEmail" runat="server" />
            </asp:WizardStep>
            <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
               <b>Step Two</b><br />
               <asp:Label ID="label3" runat="server">Shipping</asp:Label>
               <asp:DropDownList ID="drpShipping" runat="server">
                  <asp:ListItem>Air Mail</asp:ListItem>
                  <asp:ListItem>Fed Ex</asp:ListItem>
               </asp:DropDownList>
            </asp:WizardStep>
         </WizardSteps>
      </asp:Wizard>
      </div>
   </form>
</body>
</html>

Wizard template

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Temp" %>
<!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" >
  <body>
    <form id="form1" 
      title="FinishNavigationTemplate Example" 
      runat="server">
      <asp:Wizard ID="Wizard1" 
        Runat="server" 
        ActiveStepIndex="0" 
        OnFinishButtonClick="OnFinishButtonClick">
        <WizardSteps>
          <asp:WizardStep ID="WizardStep1" Runat="server" 
            Title="Step 1">
            <!-- Put UI elements for Step 1 here. -->
            This is step one.
          </asp:WizardStep>
          <asp:WizardStep ID="WizardStep2" Runat="server" 
            Title="Step 2">
            <!-- Put UI elements for Step 2 here. -->
            This is step two.
          </asp:WizardStep>
        </WizardSteps>
        <FinishNavigationTemplate>
          Please enter your email address if you would like a confirmation email:
          <asp:TextBox ID="emailTextBox" 
            Runat="server">
          </asp:TextBox>
          &nbsp;<br />
          <asp:Button ID="Button1" CommandName="MovePrev"
              Runat="server" 
              Text="Previous" />
          <asp:Button ID="Button2" CommandName="MoveComplete" 
            Runat="server" 
            Text="Finish" />
        </FinishNavigationTemplate>
        <HeaderTemplate>
          <b>FinishNavigationTemplate Example</b>
        </HeaderTemplate>
      </asp:Wizard>
      <asp:Label ID="myLabel" 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 Temp : System.Web.UI.Page
{
    public void OnFinishButtonClick(object sender, EventArgs e)
    {
        myLabel.Text += "FinishButtonClick called<br/>"; 
    }
}

ASP.NET Tutorial/ASP.net Controls/Wizard

Содержание

A simple Wizard control (C#)

A simple Wizard control (VB)

Custom wizard

Custom wizard navigation

Displaying a Wizard

Help Example Wizard

Wizard and its steps (C#)

WizardStep

Wizard template

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация