Invoke JavaScript using the ASP.NET Wizard Control

Posted by: Malcolm Sheridan , on 7/10/2009, in Category ASP.NET
Views: 33428
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:
 
Wizard_Task
 
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:
 
Prompt
 
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 a +1 to this article if you think it was well written. Thanks!
Recommended Articles
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


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Denis on Thursday, July 30, 2009 10:19 AM
Very Good! It reached the goals!
Comment posted by Igor Zenyuk on Friday, September 11, 2009 9:33 AM
I can still navigate without confirmation using left-side links (step1, step2)
Comment posted by Malcolm Sheridan on Monday, September 14, 2009 8:03 AM
@Igor Zenyuk
That's something I didn't think of.  Thanks for the feedback.
Comment posted by kiran kamthe on Friday, December 3, 2010 1:38 AM
how to enable stepnext button  in javascript?

javascript fires on checking of the check box!

here the the javascript


<script language="javascript" type="text/javascript">
    function enableregister(chkBx) {

      
       var txt = document.getElementById('ctl00_ctl00_cph1_cph1_CustomerRegister1_CreateUserForm___CustomNav0_StepNextButton');

            if (chkBx.checked) {
                txt.enabled = true;
            }
            else {
                txt.enabled = false;
            }
        
    }



it says txt not found?    please help very urgent!
Comment posted by shilpa on Monday, September 12, 2011 7:54 AM
thanks....
it helped me a lot.....

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel