Friday, June 5, 2009

Inject Dynamic JavaScript into an ASP.NET UpdatePanel

I've been so caught up in my hand-rolled callback events and JQuery that I was presented with an interesting issue today: injecting JavaScript into an UpdatePanel. At first glance, it should be easy, but took a little digging. Turns out that the ScriptManager is the key.

Presented with this:

<asp:UpdatePanel ID="updPanel" UpdateMode="Conditional" runat="server">
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" />
   </Triggers>
   <ContentTemplate>
       <asp:ImageButton 
          ID="btnClick" 
          ImageUrl="button.png" 
          runat="server"
          CausesValidation="false" 
          OnClick="btnClick_Click"
          ToolTip="Click Me" 
          AlternateText="No, seriously, click me!" />
   </ContentTemplate>
</asp:UpdatePanel>

I wanted to dynamically inject some JavaScript. As long as my ScriptManager control has EnablePartialRendering set to true, it's a simple matter of registering the script. What threw me off is that you don't use the current Page or event current ScriptManager, you call the static method on the class. It looks like this:

protected void btnClick_Click(object sender, ImageClickEventArgs e)
{
   btnClick.Text = "I was clicked."
   btnClick.Disabled = true;
   ScriptManager.RegisterClientScriptBlock(updPanel, typeof(UpdatePanel),updPanel.ClientID, "alert('wow!');",true);            
}

That's it! Use the class, point it to the instance of your update panel, pass it a unique key (I'm cheating by using the ClientID but if I wanted multiple scripts I could generate multiple keys) and then the JavaScript you want, and it will be executed once the update panel is done rendering.

Jeremy Likness