Category Archives: Atlas

How to Use Embedded JavaScript Files in ASP.NET AJAX

by

I'm writing up a post about creating custom client controls at the moment (well, as of a few minutes ago anyway).  It is getting pretty long and it's way past my bedtime.  So I thought in the meantime I'd post a quick little blurb about how you can use JavaScript from an assembly for your ASP.NET AJAX code and why you would want to.

It's pretty easy to setup a .js file in your web project with some code in it.  Sometimes though the code in said file is associated with say a custom client control (something that inherits from Sys.UI.Control) that is in its own assembly (not your web project).  This is how our controls are setup for our platform.  This is so we can use the same controls across Channel 9, Channel 10, etc.  The problem is now that we have code in js files, they have to be replicated across all our web projects and that's just no fun.  So instead we moved to having the js files embedded in our main class library.  The server controls register these files and they are then pulled out of the assembly and sent down to the client and cached.  Here's how to set this up yourself…

Add the following line as the last line in your js file:

if (Sys != undefined) Sys.Application.notifyScriptLoaded();

This tells ASP.NET AJAX that the file is done loading.  This is needed because all embedded js files stream down in the same "file" so the end of the file isn't necessarily the end of what's streamed down to the client.  Unlike when you just like to a js file regularly.

Now, in Visual Studio go to the properties window while your js file is selected.  Change the Build Action to Embedded Resource.  This will compile the file into the assembly as a resource.  If you open up reflector and venture through, you'll find the js file.  Now in your server control, add this line so ASP.NET knows about the resource (and what mime type to send it down as):

[assembly: WebResource("EvNet.Web.Templates.Scripts.Toolbar.js", "text/javascript")]

Now anytime you add a ScriptReference to a ScriptManager, your file will be streamed down to the client.  Just specify the resource name (This is the physical file path down to the file starting at the root of your class library with slashes replaced by periods [see below]) and the assembly the resource is in and you're done.  No need to worry about where the file is anymore.  🙂  This of course works when implementing IScriptControl.GetScriptReferences in your server control too:

public IEnumerable<ScriptReference> GetScriptReferences()
{
     return new ScriptReference[] { new ScriptReference("EvNet.Web.Templates.Scripts.Toolbar.js", "EvNet") };
}

Enjoy!