Click here to Skip to main content
13,899,680 members
Click here to Skip to main content
Add your own
alternative version


42 bookmarked
Posted 12 Jul 2004

Web Custom Controls

, 12 Jul 2004
Rate this:
Please Sign up or sign in to vote.
Implementing Web Custom Server Controls.

Sample Image


This article covers the following:

  • Creating a Web Custom Control.
  • Implementing Event / Delegates.
  • Implementing Using Designer.
  • Implementing OOP Programming (Objects).


What is a Web User Control?

Web user controls are easy to make, but they can be less convenient to use in advanced scenarios. You develop Web user controls almost exactly the same way that you develop Web Forms pages. Like Web Forms, user controls can be created in the Visual Designer, they can be written with code separated from the HTML, and they can handle execution events. However, because Web user controls are compiled dynamically at run time, they cannot be added to the Toolbox, and they are represented by a simple placeholder glyph when added to a page. This makes Web user controls harder to use if you are accustomed to full Visual Studio .NET design-time support, including the Properties window and Design View previews. Also, the only way to share the user control between applications is to put a separate copy in each application, which takes more maintenance if you make changes to the control.

Ref: Recommendations for Web User Controls vs. Web Custom Controls; MSDN.

What is a Web Custom Control?

Web custom controls are compiled code, which makes them easier to use but more difficult to create; Web custom controls must be authored in code. Once you have created the control, however, you can add it to the Toolbox and display it in a visual designer with full Properties window support and all the other design-time features of ASP.NET server controls. In addition, you can install a single copy of the Web custom control in the global assembly cache and share it between applications, which makes maintenance easier.

Ref: Recommendations for Web User Controls vs. Web Custom Controls; MSDN.


If your control has a lot of static layout, a user control might make sense. If your control is mostly dynamically generated — for instance rows of a data-bound table, nodes of a tree view, or tabs of a tab control — a custom control would be a better choice.

Web User ControlWeb Custom Control
Easier to createHarder to create
Limited support for consumers who use a visual design toolFull visual design tool support for consumers
A separate copy of the control is required in each applicationOnly a single copy of the control is required, in the global assembly cache
Cannot be added to the Toolbox in Visual StudioCan be added to the Toolbox in Visual Studio
Good for static layoutGood for dynamic layout

Ref: Recommendations for Web User Controls vs. Web Custom Controls; MSDN.

Using the code

Style Class

To make a type of property expandable in the PropertyGrid:


Specifies whether a property or event should be displayed in a Properties window.

  • Specifies the category in which the property or event will be displayed in a visual designer,
  • Specifies the default property for a component,
  • Specifies a description for a property or event.

Indicates how a designer refreshes when the associated property value changes.


Represents an attribute of a toolbox item.


Indicates that the parent property is notified when the value of the property that this attribute is applied to is modified.


Defines the metadata attribute that specifies how an ASP.NET server control property or event is persisted to an ASP.NET page.


Specifies the type of persistence to use when serializing a property on a component at design time.


Returning an empty string.

public override string ToString() { return ""; }

Implementation of StyleClass:

protected StyleClass cssStyle = new StyleClass();
public StyleClass CssStyle
        return this.cssStyle;
        this.cssStyle = value;

Item Class

ToTableRow() method converts the object to a TableRow for use in the Parent object.

public System.Web.UI.WebControls.TableRow ToTableRow()
    /// Create new Table Row for Menu Item
    TableRow itemRow = new TableRow();
    /// Add new Table Cell to row
    itemRow.Cells.Add(new TableCell());
    /// Set Style for Row and Cell
    itemRow.CssClass = this.CssStyle.DetailCell;
    itemRow.Cells[0].CssClass = this.CssStyle.DetailCell;

    /// Create new Menu Item Link Button
    LinkButton itemButton = new LinkButton();
    /// Set Button Properties
    itemButton.Text = this.Text;
    itemButton.CssClass = this.CssStyle.LinkButton;
    itemButton.ID = this.Text;

    /// set Attributes for Direct Transfer or PostBack
        itemButton.Attributes.Add("HREF", this.HREF);
        itemButton.Attributes.Add("HREF_Link", this.HREF);
    /// Add Button To Row
    return itemRow;

Implementation of Item class:

Item mnuItem = new Item();
mnuItem.Text = ["Menu Item"];
mnuItem.CssStyle = [this.CssStyle];
mnuItem.DirectLink = [true/false];
mnuItem.HREF = [@"http://localhost/"];

ToolBox Image

Add new Bitmap item in Project. The name should be exactly same as your control's name.

Bitmap Name = [object Name].bmp
Bitmap Color = 16 Color
Bitmap Width = 16
Bitmap Height = 16
Build Action = Embedded Resource

Main Class

Override OnDataBinding to implement the [object].DataBind method:

protected override void OnDataBinding(EventArgs e)

    menuTable = new Table();
    menuTable.Rows.Add(new TableRow());
    menuTable.Rows[0].Cells.Add(new TableCell());
    menuTable.Rows[0].CssClass = this.CssStyle.HeaderCell;
    menuTable.Rows[0].Cells[0].CssClass = this.CssStyle.HeaderCell;

    Label lblHeader = new Label();
    lblHeader.Text = this.HeaderText;
    lblHeader.CssClass = this.CssStyle.HeaderLabel;



    foreach(System.Data.DataRow itemRow in this.DataSource.Rows)
        Item mnuItem = new Item();
        mnuItem.CssStyle = this.CssStyle;
        mnuItem.DirectLink = false;
        mnuItem.HREF = itemRow[this.ItemColumnHref].ToString();
        mnuItem.Text = itemRow[this.ItemColumnText].ToString();
    base.OnDataBinding (e);
  ToolboxData("<{0}:FlatMenu runat=server></{0}:FlatMenu>"), 
  Designer(typeof(MyWebCustomControls.FlatMenu .Designer)),
DataTable dt = new DataTable();

DataRow dr = dt.NewRow();
dr[0] = "Item A";
dr[1] = "http://localhost/Item A";
dr[2] = "Item A";
dr[3] = "Item A";

this.Flat1.DataSource = dt;
this.Flat1.ItemColumnText = "ColA";
this.Flat1.ItemColumnHref = "ColB";

Compile the control. On your toolbox, right click and go to Add / Remove Items, click Browse, and find the compiled DLL. Open / OK, and you will see the Flat Menu on your Toolbox.


public delegate void MenuItemCreateHandler(string Text, 
    string URL, System.Web.UI.WebControls.TableCell currentCell);
public delegate void MenuItemSelectedHandler(string Text, string URL);


MenuItemSelectedHandler onItemSelected;
public event MenuItemSelectedHandler MenuItemSelected
        onItemSelected += value;
        onItemSelected -= value;
MenuItemCreateHandler onItemCreate;
public event MenuItemCreateHandler MenuItemCreated
        onItemCreate += value;
        onItemCreate -= value;


if (onItemCreate != null)
    onItemCreate (this.Text, this.HREF, itemRow.Cells[0]);
if (onItemSelected!= null)
    onItemSelected (this.Text, this.HREF);


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Neil de Weerdt
Web Developer
South Africa South Africa
No Biography provided

You may also be interested in...


Comments and Discussions

Generalchange the tablerow width and height from database Pin
Basheer7-Jan-08 22:28
memberBasheer7-Jan-08 22:28 
GeneralRe: Regarding User Control in Pin
Neil de Weerdt15-Oct-04 0:47
memberNeil de Weerdt15-Oct-04 0:47 
GeneralRegarding User Control in Pin
Anand Raval15-Oct-04 0:20
memberAnand Raval15-Oct-04 0:20 
GeneralPersistenceMode.InnerProperty Pin
w1m29-Jul-04 7:54
memberw1m29-Jul-04 7:54 
GeneralRe: PersistenceMode.InnerProperty Pin
Neil de Weerdt29-Jul-04 20:40
memberNeil de Weerdt29-Jul-04 20:40 
GeneralRe: PersistenceMode.InnerProperty Pin
w1m29-Jul-04 22:24
memberw1m29-Jul-04 22:24 
GeneralRe: PersistenceMode.InnerProperty Pin
Neil de Weerdt29-Jul-04 23:28
memberNeil de Weerdt29-Jul-04 23:28 
GeneralRe: PersistenceMode.InnerProperty Pin
w1m30-Jul-04 2:56
memberw1m30-Jul-04 2:56 
QuestionAre you just copying it? Pin
Anonymous14-Jul-04 7:52
memberAnonymous14-Jul-04 7:52 
AnswerRe: Are you just copying it? Pin
Neil de Weerdt14-Jul-04 20:19
memberNeil de Weerdt14-Jul-04 20:19 
GeneralRe: Are you just copying it? Pin
Anonymous15-Jul-04 8:20
memberAnonymous15-Jul-04 8:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190306.1 | Last Updated 13 Jul 2004
Article Copyright 2004 by Neil de Weerdt
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid