WebResource ASP.NET 2.0 explained

• Download source - 5.56 Kb

Introduction

This code drop is part of Redux series. This article started out to be about a dropdown date/time ASP.NET 2.0 server control. So I built the control and all its ancillary JavaScript, along with the images, and then everything was put into a zip file for uploading to the CodeProject. The installation instructions for the control went something like this:

• Unzip the contents to a folder.
• Copy the DLL to the Bin folder of your new project.
• Copy the JavaScript file.
• Copy the CSS file.
• Copy the images.

Hey, wait a minute, this is really lame, why all the extra files, why not embed them into the DLL as resources. That was the beginning of three days of hell trying to understand and work with WebResources. I have boiled it down to about twenty lines of working code.

Nothing else on the net gives you an actual working sample and a lot of the information is simply wrong (possibly because it was based on beta versions). Well, this code compiles and runs on the release version of .NET 2.0.

Code snippets

Create a project which looks like this (you can get the control from the download and then just add an ASP.NET project to the solution):

Highlight the three files in MyResources, and in the Properties window, set Build Action to Embedded Resource:

The source for the control is as follows:

namespace MyWebResourceProj
{
  [ToolboxData("<{0}:MyWebResource runat="server"></{0}:MyWebResource>")]
  public class MyWebResource : System.Web.UI.WebControls.TextBox
  {
      protected override void RenderContents(HtmlTextWriter output)
      {
         output.Write(Text);
      }

      protected override void OnInit(EventArgs e)
      {
        base.OnInit(e);
        this.Page.ClientScript.RegisterClientScriptInclude(
           this.GetType(), "Test", 
           Page.ClientScript.GetWebResourceUrl(this.GetType(), 
           "MyWebResourceProj.MyResources.Test.js"));

        // create the style sheet control

        // and put it in the document header

        string csslink = "<link href='" + 
           Page.ClientScript.GetWebResourceUrl(this.GetType(), 
            "MyWebResourceProj.MyResources.Test.css")
           + "' rel='stylesheet' type='text/css' />";
        LiteralControl include = new LiteralControl(csslink);
        this.Page.Header.Controls.Add(include);
      }
  }

This is not a discussion on server controls, so let's focus on the parameters of GetWebResourceUrl:

• this.GetType() - mandatory, just do it.
• "MyWebResourceProj.MyResources.Test.js" - this is the most misunderstood parameter and the source of just about all errors. It is composed of [Assembly of this project].[Folder containing resource].[Filename of resource].

No matter what you read anywhere else, including Microsoft's official documentation (which is wrong), if you don't do it this way, you will fail (I know this from personal experience).

Now on to the AssemblyInfo.cs:

[assembly: System.Web.UI.WebResource(
      "MyWebResourceProj.MyResources.Test.css", "text/css")]
[assembly: System.Web.UI.WebResource(
      "MyWebResourceProj.MyResources.Test.js", 
      "text/javascript", PerformSubstitution = true)]
[assembly: System.Web.UI.WebResource(
      "MyWebResourceProj.MyResources.Test.gif", "image/gif")]

You need to specify the resource name exactly as you did in your program code. You need to specify the mime-type. If the file contains JavaScript, you may want to have ASP.NET perform text substitution. For example, you may have a line in JavaScript like:

document.write("<img src='Test.gif'>");

When you embed your images in a resource, you no longer know the name of it as it appears in the resource. To fix this, code as follows:

document.write("<img src='<%=WebResource("MyWebResourceProj" + 
                                 ".MyResources.Test.gif")%>'>");

All the "official documentation" and all the articles on the web say that you can leave [AssemblyName].[FolderName] out. But they are dead wrong!

Note: if you are using this control as the base class of another, see yc4king's note below.

Update

KonstantinG has pointed out an error which only becomes apparent when your namespace is not the same as your assembly name. Previously, I had indicated that the name of the resource is: [Namespace of this project].[Folder containing resource].[Filename of resource], but really it is [Assembly of this project].[Folder containing resource].[Filename of resource]. As always, the best way to find information on this is by using Lutz Roeder's .NET Reflector available at aisto.com.

SmashGrab / Redux series

I have recently started two series of articles here at CodeProject.

Smash and Grab is intended as a series of short articles on one specific code technique. Redux is intended as a series of longer articles which attempts to reduce a complicated topic (like WebResource) into its basic constituent parts and show that once you have all the information, it isn't really that hard. To find the Smash and Grab articles, search for the keyword SmashGrab. To find the Redux articles, search for the keyword Redux. I welcome any contributions to either series, but please follow the guidelines when submitting articles to either.

Conclusion

So there you have it, everything you need to know to use WebResources. This article documented how to place CSS files in the <head> section, extract JavaScript files, dynamically change the contents of a JavaScript file.