Adding Onclick to an asp.net Wizard Control

After looking around the internet I could not find anybody adding an onClick event or an onSubmit event to a asp.net Wizard control ( asp:Wizard ). After looking into it further I found that you can not do an Wizard.Finishbutton.Attributes.Add().

You can edit the wizard control template and create your own custom template but this was overkill for what I wanted to do.

So I decided to use a JavaScript Event Listener to capture my FinishButtonClick.

The code for this is actually pretty simple: (please see the Zip File for complete code sample)

First on the server side code I added a call to a new function I created called AddJsEventListeners
in the wizards NextButtonClick event like so:

    protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
    {
        AddJsEventListeners();
    }

Next I created a function to build my JavaScript event listener and register it with page.

Note: This attachEvent javascript works on IE only for a cross browser listener you will need to find additional javascript on the web.

    private void AddJsEventListeners()
    {
   
        StringBuilder sb = new StringBuilder();
        sb.Length = 0; //wipes all information in stringbuilder

        if (!Page.ClientScript.IsStartupScriptRegistered(Page.GetType(), "FinishButton"))
        {
            sb.Append("<script language='javascript'> \r\n");
            sb.Append("function finishButtonClicked(evt) {  \r\n");
            sb.Append("    alert('finishbutton was clicked.');  \r\n");
            sb.Append("}  \r\n");
            sb.Append("</script>  \r\n");

            sb.Append("<script language='javascript'>  \r\n");
            sb.Append("    var finishButton = document.getElementById('Wizard1_FinishNavigationTemplateContainerID_FinishButton');  \r\n");
            sb.Append("        // IE Code Only  \r\n");
            sb.Append("        finishButton.attachEvent('onclick',finishButtonClicked); \r\n");
            sb.Append(" \r\n");
            sb.Append("</script> \r\n");
            this.Page.ClientScript.RegisterStartupScript(Page.GetType(), "FinishButton", sb.ToString());
        }
    }

posted @ Monday, June 18, 2007 11:15 PM

Print

Comments on this entry:

# re: Adding Onclick to an asp.net Wizard Control

Left by Frank Butcher at 1/2/2008 11:34 AM
Gravatar
Hmmm, not really best practice to being hardcoding a client side id like that...

# re: Adding Onclick to an asp.net Wizard Control

Left by Frank Butcher at 1/2/2008 11:37 AM
Gravatar
Oh, and you should be using type="text/javascript" rather than language="javascript" one your script tags as the language attribute has been deprecated

# re: Adding Onclick to an asp.net Wizard Control

Left by Larry at 7/13/2008 12:42 AM
Gravatar
Yes but this was just and example - I would normally include my script in the code behind or as a user control os dome sort.

# re: Adding Onclick to an asp.net Wizard Control

Left by Girish at 4/1/2009 2:52 AM
Gravatar
How can I call different JavaScript function for different wizard steps next buuton.

# re: Adding Onclick to an asp.net Wizard Control

Left by Larry at 4/4/2009 2:19 PM
Gravatar
If you look at the code in the zip file on how to add the code javascript at run time. Then in the code behind on each specific step you can register / unregister different javascripts to handle whatever you desire

# re: Adding Onclick to an asp.net Wizard Control

Left by software development company at 8/17/2009 11:30 AM
Gravatar
Nice post,

Amazing, I could never thought of that

Thanks

# re: Adding Onclick to an asp.net Wizard Control

Left by flex video conferencing at 3/22/2010 4:46 AM
Gravatar
Just wanted to say that you have some great content on your blog. Your posts are informative and beneficial in nature. Keep up the good work

# re: Adding Onclick to an asp.net Wizard Control

Left by Yael at 5/28/2010 10:40 AM
Gravatar
I love this site; this is my second time in visiting it. And again it still provides me the information that I need.
rover 75 parts

Your comment:



 (will not be displayed)


 
 
 
Please add 7 and 7 and type the answer here:
 

Live Comment Preview:

 
«July»
SunMonTueWedThuFriSat
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567