Adding JavaScript and CSS during an AJAX Partial Postback

Introduction

This article will show how to inject JavaScript and CSS into an AJAX partial postback response. If you have started using AJAX, you may have noticed that during an AJAX postback, only items inside the UpdatePanel are refreshed. This is known as an AJAX Partial Postback or an AJAX Partial Page Rendering. If you are programmatically inserting code such as custom JavaScript or CSS for a user control you have inside of an UpdatePanel, you may have noticed that the CSS or JavaScript was not sent back to the client's browser during the partial postback response. This would apply to new code being sent just in the partial postback response.

Problem Analysis

The above mentioned scenario is occurring because some of the old methods we used to programmatically insert code into a postback no longer work with an AJAX partial postback. These methods were developed before AJAX came into the picture. Examples of objects that will not work during an AJAX partial postback are:

// ClientScript (ClientScriptManager class)
// will not work on an ajax partial postback
ClientScript.RegisterStartupScript(...)     
// Page.Header.Controls.Add will not work on an ajax partial postback 
Page.Header.Controls.Add(...);

Solution

The solution is called ScriptManager. ScriptManager methods are basically the same, but take an additional parameter of either the page or a control. The ScriptManager will send everything back to the client during an AJAX partial postback. So, if we need to inject JavaScript, we must take advantage of the ScriptManager object.

Example 1: Inserting JavaScript

To insert JavaScript, use the RegisterStartupScript method as follows:

// Javascript "Hello World" alert box using RegisterStartupScript 
ScriptManager.RegisterStartupScript(this,
                                    typeof(nameOfPageOrControl),
                                    "typeAUniqueScriptNameHere1",
                                    "alert('Hello World');", true);

Notice if you are placing the script inside a user control, nameOfPageOrControl would be the name of the user control, otherwise the page class name.

Example 2: Inserting a JavaScript Include File

To insert a JavaScript include file, use the RegisterClientScriptInclude method as follows:

// Register a Javascript include file during a partial postback
ScriptManager.RegisterClientScriptInclude(this,
                                          typeof(nameOfPageOrControl),
                                          "typeAUniqueScriptNameHere2",
                                          ResolveUrl("~") + "myscript.js");

Again, if you are placing the script inside a user control, nameOfPageOrControl would be the name of the user control, otherwise the page class name.

Example 3: Inserting a CSS Include File

To insert a CSS include file, use the RegisterClientScriptBlock method as follows:

// Register a CSS file during a partial postback
ScriptManager.RegisterClientScriptBlock(this,
                                        typeof(nameOfPageOrControl),
                                        "typeAUniqueScriptNameHere3",
                                        "<link href='" +
                                        ResolveUrl("~") +
                                        "mystyle.css' rel='stylesheet' type='text/css' />",
                                        false);

Again, if you are placing the script inside a user control, nameOfPageOrControl would be the name of the user control, otherwise the page class name. Also, notice the last parameter is set to false. When this parameter is false, the script blocks are not placed in the code since CSS does not use script blocks.

Word of Caution Regarding CSS and the Example 3 Code

It is possible in some scenarios that Example 3 above needs to be wrapped in script tags and the last parameter to add the script tags be set to true instead of false:

string script1;
string script2;

script1 = "<link href='" +
          ResolveUrl("~") +
          "mystyle.css' rel='stylesheet' type='text/css' />";

script2 = "//]]></script>" +
          script1 +
          "<script type=\"text/javascript\">//<![CDATA[";

ScriptManager.RegisterClientScriptBlock(this,
                                        typeof(nameOfPageOrControl),
                                        "typeAUniqueScriptNameHere3",
                                        script2,
                                        true);

Points of Interest

It is very important that the key parameter (the last parameter in the call to RegisterClientScriptBlock) be unique. In the above examples, I used different key names such as typeAUniqueScriptNameHere1. Make sure this key is different, or your scripts will get overridden with other scripts. I hope this article will be of help in programmatically placing code into AJAX partial postbacks.

History

• 1.0 - 01/09/2008 - Original version.
• 1.1 - 01/09/2008 - Added comment regarding example 3 above.