Demystifying The Code

AJAX Q & A Question 5: How do you add a script reference in an extender control as an embedded resource?

Download the ASP.NET AJAX Extender Sample Code here.

This question is referring to a Webcast on creating behaviors and extenders i did in may.  In that webcast, I created an client behavior by creating an AJAX class that implemented Sys.UI.Behavior.  This simple behavior did an image swap when the mouseover event was fired.  I will leave the technical details of creating a client behavior in the ASP.NET AJAX Client Libraries to my webcast or separate blog post (if someone asks me a question that would warrant that post.

The second half of the demo was taking the client behavior and making it a bit more user friendly to consume by wrapping it with an AJAX extender control.  By doing this, developers that want to consume the image swap behavior can do this:

ConsumeExtender

instead of this:

ConsumeBehavior

It is clearly much easier to consume the behavior using the extender.  The developer does not need to wire up a load event handler and call Sys.Component.Create ($create is a shortcut) on the client behavior.  The $create signature is a bit tricky, as well.  Interestingly, when you wrap this client behavior with an extender, the end result when the page is rendered is roughly the same.  The extender control wires up the event handler for load and calls $create for you. 

Notice that in the Extender entender example (the first), that the developer does not (seem to) need to know where the client JavaScript is physically located.  This seems to make it easier to distribute and consume this functionality.  However, depending upon how the extender was implemented this may not be as easy as it seems.  The following figure is the overridden GetScriptReferences method from the example I used in the webcast.  GetScriptReferences simply returns a collection of ScriptReference objects that define script resources that the control requires.

GetScriptReferences

You will notice that we are using a physical path to the HighlightImageBehavior.js client behavior.  What this results in is a dependence that the HighlightImageBehavior.js JavaScript file be distributed to the appropriate directory for every site that intends to consume this extender.  This is not a very good solution.  The better way to implement this is to store the JavaScript file as an embedded resource within the assembly.  Obviously the assembly will always be distributed, and when it is, the required script files will be distributed along with it.

The solution:

Well enough background on the question.  Let’s get on with the solution… This process is quite simple (once you know the steps).  The steps are as follows:

  1. Configure the script file to be embedded in the assembly as an embedded resource
    1. a. Right-click on the *.js file
    2. Choose ‘Properties’
    3. Set ‘Build Action’ to ‘Embedded Resource’
  2. Add an assembly attribute in the AssemblyInfo file that references the script library.  The assembly attribute enables a specified embedded resource in an assembly for use as a Web resource
  3. Use the overload to the ScriptReference constructor that accepts the name of the embedded resource and the name of the assembly

Take a look… 

Embedded

The only tricky part here is the naming of the the script reference.  This is the assembly file name + "." + the resource name.  If you have any questions to how this is named, you can simply configure the script file as an embedded resource, compile the project and use ILDasm (IL Disassembler) to see the name of the resource.  Take a look:

ILDasm

You can see here that the name of the resource is HighlightImage.HighlightImageBehavior.js.  Download the ASP.NET AJAX Extender Sample Code here.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Demystifying The Code