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.RegisterStartupScript(...)
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:
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:
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:
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.