{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
JavaScript files with RegisterClientScriptInclude and ScriptManager
Summary
Needless to say, the JavaScript files are essential to adding AJAX functionality to ASP.NET sites or ASP.NET custom controls. If you are using ASP.NET AJAX client libraries, the ScriptManager should recognize your .js files. This article looks at how to make ScriptManager recognize your existing JavaScript files.
 
Table of Contents

Adding JS file to a custom control without ASP.NET AJAX

Adding JS file to a custom control with ASP.NET AJAX

Figure 1. The relationship between the ScriptManager and ScriptReference

What are the changes?

Embed the .js file

Don’t have to tell the Page

Related Articles

 

In your existing custom control (i.e. the custom control prior to ASP.NET AJAX), if you had a JavaScript file (.js file), you probably did the following to embed it in the custom control assembly.

Adding JS file to a custom control without ASP.NET AJAX

First, you used the WebResource to include that js file in the assembly. Here the name of the JavaScript file is AJAXWrite.js and it is in the js directory and the custom control assembly is AJAXWrite – that’s what the notation below says.

[assembly: WebResource("AJAXWrite.js.AJAXWrite.js", "application/javascript", PerformSubstitution = true)]

You will then let the Page know that it should be aware of a JavaScript file:

this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "AJAXWrite", Page.ClientScript.GetWebResourceUrl(this.GetType(), "AJAXWrite.js.AJAXWrite.js"));

This process is described in detail in the following article:

Embedding JavaScript files in your custom controls

However, now you have decided to add the ASP.NET AJAX functionality to the above JavaScript file. Meaning, if you called any ASP.NET AJAX classes that are in the MicrosoftAjax.js and other files, those files should be loaded and available when your .js file needs them.

The ASP.NET AJAX mechanism that takes care of loading the appropriate JavaScript files is ScriptManager. If you used registerNamespace or registerClass in your .js file, then the browser should be able to find these methods when it needs them. Adding ScriptManager to your page will eventually load all the client-side files from ASP.NET AJAX, but it might do it after your js file is loaded. This will cause errors because the browser won’t find registerNamespace when it’s needed.

First of all, the following article describes in detail how to add ScriptManager to the custom control:

Incorporating ASP.NET AJAX into existing Custom Controls and JavaScript files

Adding JS file to a custom control with ASP.NET AJAX

Once you have done that (adding and checking for the ScriptManager), you need to add the script references to the ScriptManger that’s on the current page. You do that with the following code:

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
if (scriptManager == null)
    throw (new Exception("ASP.NET AJAX Required. Please add ScriptManager to the page."));

// Add the script references
ScriptReference sRef = new ScriptReference();
sRef.Name = "AJAXWrite.js.AJAXWrite.js";
sRef.Assembly = "AJAXWrite";
scriptManager.Scripts.Add(sRef);

ScriptReference is a flexible class which can take scripts from either a particular path from the web server or from an assembly, where these .js files are embedded.

In the above code, Name of the file and Assembly in which that file resides are updated via the Name and Assembly properties on the ScriptReference class. You can also use the constructor for this purpose:

ScriptReference sRef = new ScriptReference("AJAXWrite.js.AJAXWrite.js", "AJAXWrite");
scriptManager.Scripts.Add(sRef);

The second line above uses the Scripts property of the current ScriptManager to add the .js file (the ScriptReference) we are interested in adding. Scripts is derived from the class ScriptReferenceCollection.

The ScriptReferenceCollection is just a collection of ScriptReference objects, as you can see from the following definition of the ScriptReferenceCollection class:

public class ScriptReferenceCollection : Collection<ScriptReference>

The Collection generic class is new in ASP.NET 2.0. As the name suggests, several collection type public methods like Add, Remove, Insert, etc. are available in this class.

Figure 1. The relationship between the ScriptManager and ScriptReference

Figure 1. The relationship between the ScriptManager and ScriptReference

What are the changes?

With the ScriptManager, you need the following.

Embed the .js file

If you are going to embed the .js file in your assembly like before, you still need to use the WebResource attribute.

[assembly: WebResource("AJAXWrite.js.AJAXWrite.js", "application/javascript", PerformSubstitution = true)]

Don’t have to tell the Page

At this point, you don’t need to tell the Page that there is a JavaScript file in the custom control, because this file already comes from the script references added via ScriptManager.

So, you don’t need the following code anymore:

this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "AJAXWrite", Page.ClientScript.GetWebResourceUrl(this.GetType(), "AJAXWrite.js.AJAXWrite.js"));

Related Articles

Embedding JavaScript files in your custom controls

Incorporating ASP.NET AJAX into existing Custom Controls and JavaScript files

Bookmark and Share This

More Articles With Similar Tags
icon-ajax-to-existing-projects.jpg
Since JavaScript has been supported by every major web browser for a long time now, every decent-sized web site uses some JavaScript. Now that ASP.NET AJAX is available, you might want to refactor and start adding some of the functionality available in these libraries. This article goes through the initial refactoring steps.
This article shows how to embed the JavaScript files (.js) in your custom control dll. Along the way discusses the advantages of doing so.
icon-postcollection-allkeys.jpg
How to get the postback data in the individual controls in your custom control? This article explains the LoadPostDataMethod with examples and figures.
icon-Control-PostBack-Sequence.jpg
This article discusses the order in which various methods are executed when a custom control posts the data back to the server.
This article looks at the very first steps (from a practical consideration) after you have decided to build an asp.net custom control.
About  Contact  Privacy Policy  Site Map