embed resources like .js, .css or images in c#

C# embedded .js, .css , image resources

In this post we will learn how to embed the resources like javascript file, images, .css files in class libraries. When creating custom controls sometimes we need to provide resources like .js, .css and images along with control or class library assembly.


Below are the step by step example of how to embed .js file as resource and access it using WebResource.axd.

1. In Visual Studio, create a new project with selection as class library project. And Name it as ImageControl.

2. Add references like System.Web, System.Web.UI, System.Web.UI.WebControls..etc which are you think you need for creating controls.

3. Add image file e.g. image1.gif, then right click on image, go to properties and setBuild Action to Embedded Resource. Setting build action to embeddedd resource is important part while embedding resources in controls or in class libraries.

4. If you want javascript file in class library as embedded resource then add .js file e.g. script1.js in the project then add some code to it like:

function ClickMe() 

{
  alert("Hey, I get called by embedded js and I am available through web resources");
} 


5. Now next step is to right click on js file go to properties and set it's Build Action to Embedded Resource. As mentioned above it is important to set action build to embedded resource in controls or in class libraries.

6. Now add one style1.css file in project and follow the same steps to make it embedded resource like right click on css file, goto it's properties and set it's Build Action to Embedded Resource.
e.g.:
body
{
 font-family:Verdana;font-size:x-large;font-weight:bolder;color:Blue;
}

7. In order to access these embedded resource files we can use WebResource. For that we need to do one important thing that we need to add WebResources properties in assemblyinfo.cs of class library or on the class libary page itself just before namespace starts lik:
In AssemblyInfo.cs of the projects properties folder add some think like below at the end of the file.

[assembly: WebResource("ImageControl.Images.image1.gif", "img/gif")]
[assembly: WebResource("ImageControl.Scripts.script1.js", "text/javascript")]
[assembly: WebResource("ImageControl.Css.style1.css", "text/css")]


Here in ImageControl.Scripts.script1.js, ImageControl is the assembly name, Scripts is the folder in which we keep the and after that javascript file name. And is same for other resources.

8. Now to refer these resouces in control we need to do following things.
a. To refer .js file we may do like below in the controls code:

string jsResource = "ImageControl.Scripts.script1.js"; this.Page.ClientScript.RegisterClientScriptResource (this.GetType(), jsResource);

b. To refer to image file we can do like:

Page.ClientScript.GetWebResourceUrl(typeof(ImageControl.ImageHolder), ImageControl.Images.image1.gif"));

c. To refer to .css file we need to do like:
string cssResource = "ImageControl.Css.script1.css";
string cssResourceURL = Page.ClientScript.GetWebResourceUrl(this.GetType(), cssResource);

And in order to add it like

HtmlLink cssLink = new HtmlLink();
 cssLink.Href = cssResourceURL;
 cssLink.Attributes.Add("rel", "stylesheet");
 this.Page.Header.Controls.Add(cssLink);
 

Below id the sample that creates Image control in which we have image, .js and .css as embedded resources. And we are accessin it using WenResource.axd.

using System;
using System.Web.UI.WebControls;
using System.Web.UI;

[assembly: WebResource("ImageControl.Images.image1.gif", "img/gif")]
[assembly: WebResource("ImageControl.Scripts.script1.js", "text/javascript")]
[assembly: WebResource("ImageControl.Css.style1.css", "text/css")]

namespace ImageControl
{
    public class ImageHolder : Image
    {
        protected string _message;
        protected string _toolTip;
        protected bool _showBigIcon = true;
        public ImageHolder()
        {
        }
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Src,
            Page.ClientScript.GetWebResourceUrl(typeof(ImageControl.
            ImageHolder), "ImageControl.Images.image1.gif"));
            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "ClickMe()");
            writer.AddAttribute(HtmlTextWriterAttribute.Alt,
            "I am embedded Image and you are watching me from Web Resource");
            base.AddAttributesToRender(writer);
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            string jsResource = "ImageControl.Scripts.script1.js";
            this.Page.ClientScript.RegisterClientScriptResource(this.GetType(),
            jsResource);
            //To add the CSS file to the custom control
            string cssResource = " ImageControl.Css.style1.css";
            string cssResourceURL = Page.ClientScript.GetWebResourceUrl
            (this.GetType(), cssResource);
            HtmlLink cssLink = new HtmlLink();
            cssLink.Href = cssResourceURL;
            cssLink.Attributes.Add("rel", "stylesheet");
            this.Page.Header.Controls.Add(cssLink);
        }
    }
}


Now to test our Image Control and embedded resources we need to add reference of class library project or dll and need to set below things in Web Project.

1. In web .config add below lines of code :
<pages>
<controls>
<add namespace="ImageControl" assembly="ImageControl" tagPrefix="myImage"/>
</controls>
</pages>
<add assembly="ImageControl" namespace="ImageControl" tagprefix="myImage" />
</controls></pages>
2. And In aspx page
3. < myImage:ImageHolder ID="img1" runat="server"/>

After running code we will get image displayed on page which is embedded and also calls javascript function for embedded .js and will show font that set in embedded .css file on the control.

2 comments :