jQuery got so close to me lately that I can see myself adding the scripts to my project almost unconsciously. The thing is, jQuery is very useful for me, in almost all situations and it has been a do or die enhancement for all my project since I first put my hands on it.
Of course while using it, you encounter few situations which need a bit of research to solve, mostly when you are trying to combine it with some other technologies like: UpdatePanels and ASP.NET Ajax. For instance there are many situations when I would like to run some jQuery magic based on some decision that I make on the server side.
It’s not the case to use jQuery ajax calls here, the point is I would like to run some jQuery code after a postback or an asynchronous postback with results coming from the server. This would mean that I’d need to prepare the scripts on the server-side in my code-behind and use RegisterClientScriptBlock to run them on the browser.
The catch is that using ClientScript.RegisterClientScriptBlock simply won’t render your scripts when the request is coming from an AsyncPostbackTrigger of an UpdatePanel. In this case you’ll need to call ScriptManager.RegisterClientScriptBlock.
The whole logic sits behind this idea: We need to know if the current request is a standard synchronous Postback or if it is an AJAX Asynchronous Postback from an UpdatePanel. Therefore in my code I check if there is any ScriptManager registered with the Page (in this case ScriptManager.GetCurrent(this), ScriptManager.GetCurrent(Page) will not return null, but we still need to check whether the request was asynchronous by checking the IsAsynchPostback on the ScriptManager instance.
For sake of this post I’ve created a short example (which you can also download and view at: )
private string getjQueryCode(string jsCodetoRun)
StringBuilder sb = new StringBuilder();
getjQueryCode is the method that encloses your code that needs to run after the Postback within a jQuery $(document).ready() call.
private void runjQueryCode(string jsCodetoRun)
ScriptManager requestSM = ScriptManager.GetCurrent(this);
if (requestSM != null && requestSM.IsInAsyncPostBack)
The markup that is needed for this example is the following:
<asp:ScriptManager ID="sm" runat="server">
<asp:UpdatePanel ID="upPnl" runat="server">
<asp:Button ID="btnPostback" runat="server"
<asp:Button ID="btnAsynchPostback" runat="server"
<asp:PostBackTrigger ControlID="btnPostback" />
Please note how the first button is set as a PostBackTrigger. This will force it to reload the whole page (which in term demonstrates how the code works when there is a standard postback) even if it is declared within the UpdatePanel. The second button launches an AJAX request (which in term demonstrates how the runjQueryCode method works while fulfilling and AJAX request).
protected void btnPostback_Click(object sender, EventArgs e)
runjQueryCode("alert('After a standard postback.')");
protected void btnAsynchPostback_Click(object sender, EventArgs e)
runjQueryCode("alert('After an asynchronous postback.')");
One very important thing to note is the following:
The rendered script tag needs to be after the script tag that imports the jQuery library. If you use <Scripts> Collection from the ScriptManager, this could break the code because your scripts from the server side will get rendered before the ScriptManager renders the script tags for the js files you use with the ScriptManager.
One workaround is: add the script tags in the <head> section of your page.