Invoke JavaScript using the ASP.NET Wizard Control
The ASP.NET Wizard control is not one I use often, but I was recently asked on how to add a JavaScript confirmation box on the Next and Previous steps. This seemed pretty straightforward at first, but there’s a slight trick to making this work. There are two ways to do this but the best way is to convert the wizard steps to a navigation templates.
Let’s get started by opening Visual Studio 2008 and choose File > New > Web > ASP.NET Web Application. Open the Default.aspx page and drag a Wizard control to the page. If you left the wizard control in the default configuration you would have this code:
<asp:Wizard ID="Wizard1" runat="server">
<WizardSteps>
<asp:WizardStep runat="server" title="Step 1">
</asp:WizardStep>
<asp:WizardStep runat="server" title="Step 2">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
But where’s the button? If you ran the project the button is automatically generated by Visual Studio and placed at the bottom of each step. If you want total control over how it’s rendered, you need to convert the steps to navigation templates. To convert these steps open the designer tab inside Visual Studio. Click the smart tag and there will be an option to Convert to StartNavigationTemplate:
Clicking this will convert the code to the following:
<asp:Wizard ID="Wizard2" runat="server">
<StartNavigationTemplate>
<asp:Button ID="StartNextButton" runat="server" CommandName="MoveNext"
Text="Next" />
</StartNavigationTemplate>
<WizardSteps>
<asp:WizardStep runat="server" title="Step 1">
</asp:WizardStep>
<asp:WizardStep runat="server" title="Step 2">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
The Button is clearly visible inside the StartNavigationTemplate. Now we have full control over how the button is rendered. To add the JavaScript confirmation to the button, add the following code to the Page Load event:
C#
Button btn = Wizard1.FindControl("StartNavigationTemplateContainerID").FindControl("StartNextButton") as Button;
if (btn != null)
{
btn.OnClientClick = "return confirm('Are you sure you want to move away from the beginning?')";
}
VB.NET
Dim btn As Button = TryCast(Wizard1.FindControl("StartNavigationTemplateContainerID").FindControl("StartNextButton"), Button)
If btn IsNot Nothing Then
btn.OnClientClick = "return confirm('Are you sure you want to move away from the beginning?')"
End If
If you run the project now and click Next you will be prompted for a response:
Each step in the wizard control can be converted to a navigation template using the smart tag in Visual Studio. The common navigation templates are:
-
StartNavigationTemplate – used solely for the beginning step
-
StepNavigationTemplate – used for each step after the beginning and before the final step
-
FinishNavigationTemplate – used solely for the final step
For this example I’ve converted each step into a navigation template so that the user is prompted when they move forward or backward. Add the following code to the page load event to invoke the JavaScript on each step:
C#
Button btn = Wizard1.FindControl("StartNavigationTemplateContainerID").FindControl("StartNextButton") as Button;
if (btn != null)
{
btn.OnClientClick = "return confirm('Are you sure you want to move away from the beginning?')";
}
btn = Wizard1.FindControl("StepNavigationTemplateContainerID").FindControl("StepNextButton") as Button;
if (btn != null)
{
btn.OnClientClick = "return confirm('Are you positive you want to move next?')";
}
btn = Wizard1.FindControl("StepNavigationTemplateContainerID").FindControl("StepPreviousButton") as Button;
if (btn != null)
{
btn.OnClientClick = "return confirm('Are you sure you want to go back?')";
}
btn = Wizard1.FindControl("FinishNavigationTemplateContainerID").FindControl("FinishPreviousButton") as Button;
if (btn != null)
{
btn.OnClientClick = "return confirm('Almost there!?')";
}
VB.NET
Dim btn As Button = TryCast(Wizard1.FindControl("StartNavigationTemplateContainerID").FindControl("StartNextButton"), Button)
If btn IsNot Nothing Then
btn.OnClientClick = "return confirm('Are you sure you want to move away from the beginning?')"
End If
btn = TryCast(Wizard1.FindControl("StepNavigationTemplateContainerID").FindControl("StepNextButton"), Button)
If btn IsNot Nothing Then
btn.OnClientClick = "return confirm('Are you positive you want to move next?')"
End If
btn = TryCast(Wizard1.FindControl("StepNavigationTemplateContainerID").FindControl("StepPreviousButton"), Button)
If btn IsNot Nothing Then
btn.OnClientClick = "return confirm('Are you sure you want to go back?')"
End If
btn = TryCast(Wizard1.FindControl("FinishNavigationTemplateContainerID").FindControl("FinishPreviousButton"), Button)
If btn IsNot Nothing Then
btn.OnClientClick = "return confirm('Almost there!?')"
End If
If you wanted to take this code to the next level you could use the jQuery BlockUI plugin to give your project a sleek look. Hopefully this code gives you an insight of what is possible with the wizard control.
The entire source code of this article can be downloaded from here
Give me a +1 if you think it was a good article. Thanks!