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.