The Wizard control is a more advanced version of the MultiView control. It has built-in yet customizable behavior, including sidebar with step links, style, and navigation buttons.
Generally, Wizards represent a single task and user moves, from the current step to the next or immediately preceeding step in case he/she wants modification.
Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc.
are implemented through style properites of <table> tag.
Following are some important properties that are very useful.
| ActiveStepChanged |
Method that fires when you click Next/Previous button(When Active step changes).
|
| OnFinishButtonClick |
Method that fires when Finish button is clicked.
|
| OnSideBarButtonClick |
Method that fires when sidebar links are clicked.
|
|
DEMO : Wizard
|
Show Source Code
|
|
|
Result appears here.
|
// Wizard /////////////////////////////
<asp:Wizard ID="Wizard1" runat="Server" BackColor="#C4E6E4" BorderWidth="1px" CellPadding="4" CellSpacing="2"
SideBarStyle-VerticalAlign="Top" OnActiveStepChanged="StepChanged" OnFinishButtonClick="FinishButtonClicked"
OnSideBarButtonClick="SideBarLinksClicked" >
<HeaderTemplate>
Example of Wizard Control<br />
<i><%= "Step " + (Wizard1.ActiveStepIndex + 1) + " of " + Wizard1.WizardSteps.Count%></i>
</HeaderTemplate>
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Personal Information" StepType="start">
<b>Name</b> <asp:TextBox ID="txtName" runat="Server"></asp:TextBox>
<asp:RequiredFieldValidator ID="Req1" runat="Server" ControlToValidate="txtName" Text="Please enter name."></asp:RequiredFieldValidator>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Contact Information" StepType="Step">
<table>
<tr>
<td><b>Contact Number</b></td>
<td>
<asp:TextBox ID="txtNumber" runat="Server"></asp:TextBox>
</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>
<asp:TextBox ID="txtEmail" runat="Server"></asp:TextBox>
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="Address Details" StepType="finish">
<table>
<tr>
<td><b>Address</b></td>
<td>
<asp:TextBox ID="txtAddress" runat="Server"></asp:TextBox>
</td>
</tr>
<tr>
<td><b>City</b></td>
<td>
<asp:TextBox ID="txtCity" runat="Server"></asp:TextBox>
</td>
</tr>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="Server" Title="Thanks" StepType="complete">
Thanks, Your details are as follows .... >>>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
// CODE BEHIND ////////////////////////////////
// Fires when Active Steps changed
protected void StepChanged(object sender, EventArgs e)
{
Label1.Text += "<br /><b>Steps changed.<b />";
}
// Fires when Side bar links are clicked
protected void SideBarLinksClicked(object sender, EventArgs e)
{
Label1.Text = "<b>Side bar link clicked.<b />";
}
// Fires when Finish button clicked
protected void FinishButtonClicked(object sender, WizardNavigationEventArgs e)
{
Label1.Text = "Following are your details: <br />" +
"Name: " + txtName.Text + "<br />" +
"Contact Number: " + txtNumber.Text + "<br />" +
"Email: " + txtEmail.Text + "<br />" +
"Address: " + txtAddress.Text + "<br />" +
"City: " + txtCity.Text;
}
|