<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left:10px;" valign="middle">
asp:Wizard control</td>
</tr>
<tr>
<td class="ArticleContents">
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.
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<div class="ArticleContents">
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.
<p>
Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
are implemented through style properites of <table> tag.
</p>
Following are some important properties that are very useful.
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
<td class="DemoCP">ActiveStepChanged</td>
<td>
Method that fires when you click Next/Previous button(When Active step changes).
</td>
</tr>
<tr>
<td class="DemoCP">OnFinishButtonClick</td>
<td>
Method that fires when Finish button is clicked.
</td>
</tr>
<tr>
<td class="DemoCP">OnSideBarButtonClick</td>
<td>
Method that fires when sidebar links are clicked.
</td>
</tr>
</table>
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle">
DEMO : Wizard
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/wizard.aspx" target="_blank">Show Source Code</a>
</td>
</tr>
<tr>
<td>
<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>
</td>
<td>
<asp:Label ID="Label1" runat="server" BackColor="Coral" ForeColor="blue" BorderColor="ActiveBorder" BorderStyle="dashed" BorderWidth="1" Height="20" Text="Result appears here." style="padding:10px;" EnableViewState="False" ></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<pre>
// 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;
}
</pre>
</td>
</tr>
</table>
<!-- END - Demo Section -->
</div>
<br />
<script language="javascript" type="text/javascript">
function GiveAlertToUser()
{
alert("Hi Dear, Client side method worked.");
}
</script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>
Go Top