Execute JavaScript when an UpdatePanel is updated

I’ve just spent a few hours banging my head against a wall trying to get ASP.NET to execute a JavaScript function each time an UpdatePanel is updated. Simply putting the script within the ContentTemplate tags does not work.  Instead, to get the JavaScript to execute on PostBack you need to use ScriptManager.RegisterStartupScript to register the script to be run.

Let’s look at the code we need:

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(
                        upPanel,
                        this.GetType(),
                        "MyAction",
                        "doMyAction();",
                        true);
}

RegisterStartupScript is a static method on the ScriptManager class.  You do not need to have an actual ScriptManager in scope to call this function (for example, you might be coding within a UserControl and have the ScriptManager on the Page).

The first parameter is the UpdatePanel you want to associate the script with.  The second parameter is a type parameter, we’ll just use the type of the current object for this.  Now we get to the interesting bits.  The third parameter, “MyAction”, is a key to identify the script, allowing you to reference or update it in the future if you wish.  Next we have the script itself.  This can be a block of inline JavaScript but I prefer to wrap everything I want to happen in a function and call that instead.   The final parameter is a flag to indicate whether the ScriptManager should wrap your code in script tags.   You can do this manually if you want, but I prefer to set this flag to true and let somebody else worry about it.

ASP.NET will output the following code at the bottom of your page and execute it on PostBack. Provided you have defined the function doMyAction() somewhere everything should work as you expect.

<script type="text/javascript">
    doMyAction();
</script>

If you set the final parameter to false you would get the following:

    doMyAction();

You can pass variables from your C# code to your JavaScript by including them in your function call:

protected void Page_Load(object sender, EventArgs e)
{
    int myVar = 5;
    ScriptManager.RegisterStartupScript(
                        upPanel,
                        this.GetType(),
                        "MyAction",
                        "doMyAction(" + myVar + ");",
                        true);
}

We’d then get the following output:

<script type="text/javascript">
    doMyAction(5);
</script>

By Adam Pope

Adam is our tech God, and it's not just his name that's holy - his knowledge of code borders on the supernatural, and whilst he doesn't like to brag, he finished top of his class at university. (Yep, the very top).

When he isn't crafting masterpieces on the web he is knocking them up in the kitchen, his legendary curry being an office mainstay here at Storm.

Adam was recently named as one of South West Business Insider's 42 under 42 for 2012.

stormconsultancy.co.uk →

12 comments

  1. Very inofrmative. I was breaking my head to get this to work and this post solved my issue. Thanks a lot.

  2. Thanks!
    How could i add then the doMyAction(); to some OnClientClick Event inside the same UpdatePanel !?
    Have any idea?a

  3. Thanks for posting your experience. It helped me out when I thought that nothing could help me out. Thanks again!!!

  4. Thanks!
    Something simple that is passing of right control(updatepanel) to RegisterStartUp method in Scriptmanager. I couldn’t figure it out until I visit your page.