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:
instead of this:
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.
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:
- Configure the script file to be embedded in the assembly as an embedded resource
- a. Right-click on the *.js file
- Choose ‘Properties’
- Set ‘Build Action’ to ‘Embedded Resource’
- 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
- Use the overload to the ScriptReference constructor that accepts the name of the embedded resource and the name of the assembly
Take a look…
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:
You can see here that the name of the resource is HighlightImage.HighlightImageBehavior.js. Download the ASP.NET AJAX Extender Sample Code here.