ajax: script references and javascript file references

do you ever wonder how some of the asp.net ajax extensions or ajax control toolkit send down their javascript code that it handles?  have you ever sat back and said, "wait a minute, i'm not adding any scripts here"?  well, if you haven't, then move along, there is nothing to see here.

but if you have, read along.  i know i have as i think i've always taken for granted the feature of how this is being accomplished in both the ajax tools as well as some things that asp.net 2.0 uses as well...so let's see what's going on here.

if you have no idea what i'm talking about, basically load up an asp.net ajax page and look at the source, you'll see something like this:

<script src="/ScriptResource/ScriptResource.axd?d=cOVC9K4WK3DoOci8poj2gEx1D9Jpq5e-
CDzM9iI5MnC_Np0FZ18zKVPkePoP4dKJialk3-zN1Xx4RObWPIm4zQ151W6jZBuzAtVU4VaRyxM1&amp;
t=633051597837658400" type="text/javascript"></script>

keep adding some controls, toolkit controls, etc. and you'll see more web resource references pushing down javascript.  if you use a tool like fiddler or web development helper, you'll see that this request results in javascript being pushed down to the browser.  so how do you do this in your own assemblies?

first, why would you want to do this?  well, good question -- i don't think you'd want to do this for everything, but i think it is a good idea for reusable components...and i think we'll see this trend more and more from component vendors -- it reduces the installation woes for some of the client-side script deployment.

anyhow, i'm babbling...here's the goods.

first, have your javascript file (my example here has a single function SayHello() that throws an alert('hello world')) as a part of your class library for your control/component.  change the build action from "content" to "embedded resource" in the properties of the .js file.  what this will do is essentially, well, make it an embedded resource.

after that go into your class file that would render your control/component or wherever you'll want the embedded script to "reside."  the easiest thing here is to add this to your code:

   1:  [assembly: System.Web.UI.WebResource("ScriptResourceClass.HelloWorld.js", "text/javascript")]

   2:   

   3:  namespace ScriptResourceClass

   4:  {

   5:      public class Class1

   6:      {

   7:          public string SayHelloServer()

   8:          {

   9:              return "Hello World from server";

  10:          }

  11:      }

  12:  }

once that is there (you may have to add a reference to System.Web.dll) then you are ready to go.  now consuming (or should i say exposing) this is VERY simple using asp.net ajax and the wonderful do-all-the-heavy-lifting-management-for-me scriptmanager component.  in our page where we want to consume this and add a script reference to the scriptmanager like this:

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server">

   2:      <Scripts>

   3:          <asp:ScriptReference Assembly="ScriptResourceClass" 

   4:          Name="ScriptResourceClass.HelloWorld.js" IgnoreScriptPath="true" />

   5:      </Scripts>

   6:  </asp:ScriptManager>

when rendered you'll see some line that looks like this:

<script src="/ScriptResource/WebResource.axd?d=jiqWbcneAVORXcafmWglIA2&amp;t=632968784944906146" 
type="text/javascript"></script>

i'm not going to pretend that i know what/how the webresource.axd url is generated and formatted, but i trust it is something super cool and important.  note you aren't limited to using scripts for embedded resource...you can just as easily put a dependent image into this format and have your control reference it in the image path using WebResource("name") and then it will get it from the embedded resource.  once this webresource.axd url is there, now my SayHello() function from *script* works fine when called from anywhere.

so what if you don't use asp.net ajax?  well, shame on you then.  but seriously, you can still accomplish this, but you just have to write a bit more code in your control rendering to retrieve the resource and ensure it is registered on the page.  you can use something like the Page.ClientScript.GetWebResourceUrl function.