Asp.net wizard control templates

Suggested Videos
Part 36 - Wizard control in asp.net
Part 37 - Asp.net Wizard control properties
Part 38 - Asp.net Wizard control events
Part 39 - UseSubmitBehavior property of the Button control

In Part 36, of this video series we have discussed about an example that makes use of the wizard control. In this video, we will look at the advanced features of the wizard control like
1. Set focus to the first control in the wizard step when the page loads, so that the user can start typing into the textbox directly.
2. Attach javascript to the Next, Previous and Finish buttons, to display a confirmation dialog box before the user moves to the next step.
3. Setting UseSubmitBehavior="true" for the Previous button in the wizard control.



In the HTML below, we have a wizard control with 3 steps. Each step has a TextBox control. 
<asp:Wizard ID="Wizard1" runat="server">
    <WizardSteps>
        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
            <asp:TextBox ID="Step1TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
            <asp:TextBox ID="Step2TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3">
            <asp:TextBox ID="Step3TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>



The following code, sets the focus to the correct textbox, based on the ActiveStepIndex. Make sure you have this code in the Page_PreRender event. Copying this code in the Page_Load() event will not work correctly. This is because the ActiveStepIndex is changed on the Button click event which happens after the Page_Load() event. As the Page_PreRender() events occurs after the Button_Click event, the code works correctly as expected.
protected void Page_PreRender(object sender, EventArgs e)
{
    if (Wizard1.ActiveStepIndex == 0)
    {
        Step1TextBox.Focus();
    }
    else if (Wizard1.ActiveStepIndex == 1)
    {
        Step2TextBox.Focus();
    }
    else if (Wizard1.ActiveStepIndex == 2)
    {
        Step3TextBox.Focus();
    }
}

To attach, javascript to the buttons in the navigation bar(next, previous, Finish), we need to use Navigation Templates. By default, the wizard control generates these buttons automatically. To make the wizard control use navigation templates and attach javascript
1. Right click on the wizard control and select "Show smart tag"
2. Click on "Convert To Start Navigation Template".
3. Now in the HTML source, specify the javascript that needs to be executed in response to the OnClientClick event.
<asp:Wizard ID="Wizard1" runat="server">
    <StartNavigationTemplate>
        <asp:Button ID="StartNextButton" runat="server" CommandName="MoveNext" Text="Next" 
            OnClientClick="return confirm('Are you sure you want to go to next step');" />
    </StartNavigationTemplate>
    <WizardSteps>
        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
            <asp:TextBox ID="Step1TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
            <asp:TextBox ID="Step2TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3">
            <asp:TextBox ID="Step3TextBox" runat="server"></asp:TextBox>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

Use StepNavigationTemplate, to attach javascript to the Next and Previous buttons on all wizard steps, where StepType="Step"
Use FinishNavigationTemplate, to attach javascript to the Finish button on the last step of the wizard control.

It is also possible to add javascript in code. To add the javascript using code for the Next button, in a wizard step, where StepType="Step"
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Button btnNext = (Button)Wizard1.FindControl("StepNavigationTemplateContainerID").FindControl("StepNextButton");
        btnNext.Attributes.Add("onclick", "return confirm('Are you sure you want to move to the next step');");
    }
}

To make the next button of the wizard control the default button, set UseSubmitBehavior=False for the Previous button. So that, when the user hits the Enter key, after entering the required data, the user moves to the next step and not the previous step.

No comments