Invoke JavaScript using the ASP.NET Wizard Control
Posted by: Malcolm Sheridan ,
on 7/10/2009,
in
Category ASP.NET
Abstract: The following article demonstrates how to invoke JavaScript dialogs on each step through the ASP.NET Wizard control.
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
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @
malcolmsheridan