{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
Embedding JavaScript files in your custom controls
Summary
This article shows how to embed the JavaScript files (.js) in your custom control dll. Along the way discusses the advantages of doing so.
 
Table of Contents

1. Create your JavaScript file in the directory you want.

2. Use the WebResource attribute

3. Tell the page you have a script include

Related Articles

 

Embedding a JavaScript file (or any other resource file) becomes a little bit frustrating the first time you attempt. Make sure you have done the following to avoid the frustration (following example uses a .js file):

1. Create your JavaScript file in the directory you want.

Let’s say you created a file named AJAXWrite.js in the directory js. Meaning, the path of your .js file from the root of your custom control is \js\AJAXWrite.js. Presumably you are placing all your JavaScript files in this js directory. As you will see below, full directory path (whatever it is named) becomes important.

2. Use the WebResource attribute

You will embed a resource (in this case a JavaScript file) using the WebResource attribute. This class WebResourceAttribute is in the System.Web.UI namespace. This is a new class in .Net 2.0. If you look at the AttributeUsageAttribute for this class, you will notice that this attribute (i.e. the WebResource attribute) is valid only on an assembly (AttributeTargets.Assembly).

If you look at the AssemblyInfo.cs you will see a whole lot of assembly related attributes like assembly:AssemblyTitle, assembly:AssemblyDescription, etc. Adding a web resource to an assembly is also, in a way, like that.

Now back to the WebResource attribute for embedding javascript files. To embed the js file described above, you need add the following line, typically over the namespace declaration in the class file for your custom control.

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

The first part (AJAXWrite) of "AJAXWrite.js.AJAXWrite.js" is the namespace in which this class resides. The last part (AJAXWrite.js) is the name of the Javascript file. And the middle part is the directory leading up to the js file. In this case, I am placing the .js file in the js directory under the root of the custom control.

The next parameter to WebResource attribute is the content type. For javascript, it is "text/javascript". These are the standard MIME type. You can find out more about these media types here:

http://www.iana.org/assignments/media-types/

A note here on the ’text/javascript’ media type. This type has been made obsolete. The new recommendation is application/javascript. The reason here makes sense: JavaScript is not exactly just text; those are instructions. For more information, you can look at the RFC here: http://www.rfc-editor.org/rfc/rfc4329.txt. This is relatively newer change. Both the media types work with Visual Studio 2005. So, the following attribute also works:

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

And the last parameter (PerformSubstitution) says to include the full-path of the resource when the Web Resource URLs are parsed.

3. Tell the page you have a script include

Now you need to tell the page that’s including this custom control that there is a script file it needs to include when the final HTML is generated for that page. Obviously, this needs to be done dynamically, because you don’t know which page is going to include the custom control you are developing (and hence in need of this particular .js file).

.Net Framework 2.0 includes a brand new class called ClientScriptManager, which is available as a property ClientScript on the Page. Methods from this class are used to:

  • include the script file on the page
  • and, actually get that embedded file from the custom control

As the method names suggest, we need to use:

  • RegisterClientScriptInclude method to include the js file on the page
  • and, GetWebResourceUrl to get the embedded js file from the control

Both these methods are used as in the following line. Actually, the GetWebResourceUrl becomes part of the parameter for RegisterClientScriptInclude:

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

Now, we need put the above line where the Page will be able to take care of including the .js file before the custom control actually needs it. That place, of course, is the OnInit event handler for the custom control that needs this js file. So, you would have the OnInit like this:

/// <summary>
/// Load the JavaScript files at the initialization.
/// </summary>
/// <param name="e"></param>
protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "AJAXWrite",
        Page.ClientScript.GetWebResourceUrl(this.GetType(), "AJAXWrite.js.AJAXWrite.js"));
}

With the above lines added to your code, just use the methods in that js file for your event handler methods of the HTML, etc. (i.e. whereever you need to use those methods from the js file).

Related Articles

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

JavaScript files with RegisterClientScriptInclude and ScriptManager

Bookmark and Share This

More Articles With Similar Tags
icon-scriptmanager-scriptreference.jpg
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.
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.
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