October 24, 2006

dotNET Custom Controls and Resource Scripts

Custom Controls are Web Controls, (TextFields, Labels etc) which are customized by you.

The Custom Controls can then added to your website by adding the assembly containing the Custom Control or used through Visual Studio ASPX editor by created adding the Custom Control to the ToolBox (this is done by Right-Clicking the ToolBox and selecting Choose Items... then select the locate of the Assembly containing the Custom Control.

An example of a very simple Custom Control implementation can be found here
Simple Custom Control (msdn)

Additionally you can embed some of you JScript code in a .js file instead of in the aspx page itself. This js file should be added to you Custom Control project as an Embedded Resource (This means the JScript code is embedded in the resultant assembly. When this assembly is referenced by a website project it will be able to access the JScript functionality (??).
To add the js file add it to the Custom Control Project as a Resource.
Add a new Resource file to the Project.
Add you js file to the project. Set the Property of the js file, "Build Action" to "Embedded Resource".
Add the js file to the Resource file using the Resource Designer, Choose Add Existing Item.. from the menu at the top of the Resource Designer.
Add a Line to the AssemblyInfo.cs file,
first include:

using System.Web.UI;

to the top of the file
[assembly: WebResource("WebControlLibrary1.Resources.JScript1.js", "text/javascript", PerformSubstitution = true)]

Now to enable accessing the JScript contents from and ASP.NET file you must Register it with your Custom Control, do this in the OnPreRender Overload method using

protected override void OnPreRender(EventArgs e)
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "jscriptcontrol", Page.ClientScript.GetWebResourceUrl(this.GetType(), "WebControlLibrary1.Resources.JScript1.js"));

Now rebuild. Your JScript file is now embedded in the assembly and can be accessed from ASP.NET using when you add the Custom Control to the aspx page using

(open bracket)
cc1:WebCustomControl1 ID="WebCustomControl1_1" runat="server"

(close bracket)

Adding JScript files and other resources to an assembly ans accessing from ASP.NET
Adding and Accessing Embedded Resources
Adding Client Scripts to ASP.NET

To test your embbedded resource is actually correct:
Drag and drop the Custom Control which references the JScript into a new aspx page.
Publish the website with the new aspx page.
Navigate to it's url in a browser, when it opens View-Source.
In the source locate the script src tag.

(start script tag)
src="/UseGalaxyWebControl/WebResource.axd?d=WS6VQ6ceILK4cpcSIBDTOA0gOitJm62vmYH2X7E8EUOB2p55z1WYfEnbnNTg7cQs-HZKaxcnh4sTcOoa0Og_HVTyCk7NIZnZpc-1MUQd7bw1&t=632974654934687088" type="text/javascript">
(end script tag)

Copy the link you find in here. Copy the link back into the browser.
Hit return and you should see the contents of the JScript file you embedded in the assembly.


This works because the ASP.NET 2.0 has an assembly reflection type service WebResource.xad. This uses the url passed into the service to extract it from the assembly.
For more see this description
Using the WebResource.axd Handler with Embedded ASP.NET Resources (eggheadcafe.com)

So now you can drag and drop the Custom Control onto your ASPX page in Visual Studio designer. What good is that?
Your aspx page now has access to all your JScript functionality. You can call your JScript functions in the aspx page as normal using the tag.

Resource Caching:
So you've embedded the resource and added it to your aspx.
ASP.NET 2.0 also provides some caching functionality by default.
If the application is in Release (the web.config debug="false" set) all the resources are cached, meaning they will not be reloaded (GET) each time the page is POSTED as long as the resources have not changed.
In debug mode the resources are not cached, so they are always reloaded on page POST.
You'll see in the url for the resource, it contains a t=... this t is the time. This is what's used to compare the cached version of the resource and the latest version on the server.

No comments: