ASP.NET - Custom ASP.NET server control with embedded resources

Home

ASP.NET

Custom ASP.NET server control with embedded resources

Lets take as an example ColorPicker control that I recently made.

First lets create New Project -> Web -> ASP.NET Server Control.

By default name of the project would be your default namespace. I called my project WebControls. I renamed ServerContol1.cs into ColorPicker.cs. I changed default namespace to Karpach.WebControls, as well as
assembly name. Then I added to the project images, javascripts, and styles that I need for my color picker contol.

Custom Control Solution Files

Click on each file properties and change Build Action from Content to Embedded Resource.

Now lets modify AssemblyInfo.cs.

You need to register all you resources like this:

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.SliderHandle.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabCenterActive.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabLeftActive.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabLeftInactive.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabRightActive.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.TabRightInactive.gif", "img/gif")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Images.ColorPickerIcon.jpg", "img/jpeg")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Styles.ColorPicker.css", "text/css")]

[assembly: System.Web.UI.WebResource("Karpach.WebControls.Javascript.ColorPicker.js", "text/js")]

As you notice System.Web.UI.WebResource first parameter has following signature:

[Assembly Name].[Folder].[File Name] (this is very important, since it is not documented even in MSDN)

Lets move to ColorPicker.cs Modify ToolboxData to look like this:

[ToolboxData("<{0}:ColorPicker runat=server></{0}:ColorPicker>")]

Next you probably want custom icon in Visual Studio Toolbox.
After ToolboxData add following line:

[System.Drawing.ToolboxBitmap(typeof(ColorPicker), "Images.color_picker_icon.jpg")]

where first parameter is type of control and second parameter icon file name used in AssemblyInfo.cs

Then you need to load stored resources from dll. The best event for this is OnInit:

// Javascript

string colorFunctions = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Javascript.ColorPicker.js");

Page.ClientScript.RegisterClientScriptInclude("ColorPicker.js", colorFunctions);

//Images

string script = string.Format(@"

var colorPicker = new ColorPicker();

colorPicker.FormWidgetAmountSliderHandleImage = '{0}';

colorPicker.TabRightActiveImage = '{1}';

colorPicker.TabRightInactiveImage = '{2}';

colorPicker.TabLeftActiveImage = '{3}';

colorPicker.TabLeftInactiveImage = '{4}';

", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.SliderHandle.gif")

, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.TabRightActive.gif")

, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.TabRightInactive.gif")

, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.TabLeftActive.gif")

, Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.TabLeftInactive.gif")

);

Page.ClientScript.RegisterStartupScript(Page.GetType(), "InitColorPicker", script, true);

// CSS

bool linkIncluded = false;

foreach (Control c in Page.Header.Controls)

{

if (c.ID == "ControlPickerStyle")

{

linkIncluded = true;

}

if (!linkIncluded)

{

HtmlGenericControl csslink = new HtmlGenericControl("link");

csslink.ID = "ColorPickerStyle";

csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Styles.ColorPicker.css"));

csslink.Attributes.Add("type", "text/css");

csslink.Attributes.Add("rel", "stylesheet");

Page.Header.Controls.Add(csslink);

}

Then used the RenderContents event to render the control HTML.

Table table = new Table();

table.Rows.Add(new TableRow());

table.Rows[0].Cells.Add(new TableCell());

HtmlInputText txt = new HtmlInputText();

txt.Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, Color);

txt.Size = 15;

txt.Value = Color;

txt.MaxLength = 15;

txt.ID = ColorInputControlClientId;

txt.Name = ColorInputControlClientName;

table.Rows[0].Cells[0].Controls.Add(txt);

HtmlInputImage btn = new HtmlInputImage();

btn.Src = Page.ClientScript.GetWebResourceUrl(typeof(ColorPicker), "Karpach.WebControls.Images.ColorPickerIcon.jpg");

btn.Attributes.Add("onclick", string.Format("colorPicker.ShowColorPicker(this,document.getElementById('{0}'));return false;", ColorInputControlClientId));

table.Rows[0].Cells[1].Controls.Add(btn);

table.Rows[0].Cells[1].Attributes.CssStyle.Add(HtmlTextWriterStyle.Position, "relative");

table.RenderControl(output);

Now, final touch: minification of javascript and css.I used yahoo YUI compressor and Microsoft MSBuild. Here is final msbuild file:

<?xml version="1.0" encoding="utf-8" ?>

<MSBuildCommunityTasksPath>..\References</MSBuildCommunityTasksPath>

<ProjectName>WebControls</ProjectName>

</PropertyGroup>

<Exec Command="java -jar yuicompressor-2.4.2.jar --type js .\$(ProjectName)\Javascript\ColorPicker.js.full >.\$(ProjectName)\Javascript\ColorPicker.js"/>

<Exec Command="java -jar yuicompressor-2.4.2.jar --type css .\$(ProjectName)\Styles\ColorPicker.css.full >.\$(ProjectName)\Styles\ColorPicker.css"/>

</Target>