Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

Adding Web resources to custom control in .net 2.0

2.92/5 (4 votes)
18 Dec 2007CPOL 1   667  
This article dsecribes the method to embed web resources like js, css, image etc files to custom control

Introduction

In .net 2.0 it’s very simple to add web resource to the custom control. Following code will describe the method to add web resource to custom control.

Using the code

We have to follow the following steps to add web resource to custom control.

1. Add web resources like JavaScript, Style sheet, image file to your custom control project.
3. Set “Build Action” property to “Embedded Resource”. [Default value is set to “Content”]
4. Add reference to “System.Web” in your project.
5. Add the following to your custom control:

using System.Web.UI;
6. Add assembly reference of “Web Resources” to your project: [assembly: WebResource("ProjectName.ResourceFileName", "FileType")] For example:
[assembly: WebResource
("CustomCtrlWithWebResource.MyCssFile.css", "text/css")]
[assembly: WebResource
("CustomCtrlWithWebResource.MyJsFile.js", "text/javascript")]
7. Add following lines to add *.js file
//To add the JS file to the custom control
string jsResource = "CustomCtrlWithWebResource.MyJsFile.js";
this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), jsResource);
8. For other resources following code can be used:
//To add the CSS file to the custom control
string cssResource = "CustomCtrlWithWebResource.MyCssFile.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);
After adding above mentioned code, our “MyCustomCtrl.cs” file will have following content:
using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;


[assembly: WebResource("CustomCtrlWithWebResource.MyCssFile.css", "text/css")]
[assembly: WebResource("CustomCtrlWithWebResource.MyJsFile.js", "text/javascript")]

namespace CustomCtrlWithWebResource
{
    class MyCustomCtrl: Control
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            //To add the JS file to the custom control
            string jsResource = "CustomCtrlWithWebResource.MyJsFile.js";
            this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), jsResource);

            //To add the CSS file to the custom control
            string cssResource = "CustomCtrlWithWebResource.MyCssFile.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);
        }
    }
}
You can add required functionalities to your custom control now and use the embedded resources like “javascript functions”,“cssClass” etc.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)