The World’s Leading Microsoft .NET Magazine
Sign-In | Register
   
 
timstall

Donate Today!

Search Box

 

Calendar

««Jul 2008»»
SMTWTFS
  
1
2
3
4
5
6789101112
13141516171819
20212223242526
2728293031

My RSS Feeds








Mailing List

Most Popular Tags

                                       

Extending WebControls to make your own Server Controls

« H E ASP.Net :: email
posted Friday, 8 April 2005

There are several different groups of controls in ASP.Net, ranging from the foundational HtmlControls to the advanced Custom Server Controls:

  1. HtmlControls - standard HTML controls. (In the System.Web.UI.HtmlControls namespace).
  2. WebControls - ASP.Net controls. These include controls with similar Html counterparts like Button and Dropdown, but also have advanced controls like Validators and DataGrid (In the System.Web.UI.WebControls namespace).
  3. UserControls - Combines multiple controls into a single, reusable control (Inherits from System.Web.UI.UserControl class).
  4. Custom Server Controls
    1. Composite Custom Controls - create new controls from existing server controls.
    2. Rendered Custom Controls - create entirely new controls from raw HTML.
    3. Extended Controls - creates a new server control by inheriting from a previous control.

While everything ultimate reduces to Html, grouping controls together for reusable packages lets us save a lot of time. One such technique is to create an Extended Control by inheriting from an already existing control. This is great for when you want to build off a single control and extend its functionality. For example you could inherit from the TextBox class and add a new method ToLower which makes all the text lowercase.

There are several benefits

  1. Very easy - just create a new class that inherits from the control you need
  2. Has all the properties of the base control
  3. Has Design-time support (unlike User Controls)

This is easy to do, here's how:

  1. Create a new WebControlLibrary (compiles to a DLL). This is used for Composite and Rendered controls as well.
  2. Add a new class called TextBoxA, and make it inherit from System.Web.UI.WebControls.TextBox
  3. Add the methods and properties you need.

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

namespace WebControlLibrary1
{
    /// <summary>
    /// Summary description for TextBoxA.
    /// </summary>
    public class TextBoxA : System.Web.UI.WebControls.TextBox
    {
        public TextBoxA()
        {

        }

        public void ToLower() 
        {
            this.Text = this.Text.ToLower();
        }

        public string NewProp 
        {
            get 
            {
                if (ViewState["NewProp"] == null)
                    return "";
                else
                    return ViewState["NewProp"].ToString();
            }
            set 
            {
                ViewState["NewProp"] = value;
            }
        }

    } //end of class
}

 In the code snippet, we've added a method ToLower which references the textbox property "Text" and makes it lowercase. We've also created an arbitrary property NewProp and made it save data using ViewState.

We can load this easily into Aspx pages by first adding the DLL to the project like any other reference, and then adding the control itself to the toolbox. This lets us perform drag & drop operations like any other WebControl.

  1. In the ToolsBox, right click for the context menu and select "Add/Remove Items"
  2. A new window appears with two tabs: (1) .Net Framework Components (selected by default) and (2) COM Components. Within the tab there is a list of controls with checkboxes.
  3. Click the browse button to find the WebControlLibrary  we just created, and add it.
  4. Select the checkboxes for the controls you want to appear in the ToolBox.
  5. The controls are now in the toolbox, and you can drag them onto a page just like any other.

If you don't want to add it to your toolbox, then you can also directly type the Html. You need to first Register the assembly by putting something like this at the top:

<%@ Register TagPrefix="cc1" Namespace="WebControlLibrary1" Assembly="WebControlLibrary1" %>

And then reference the control in the page by:

<cc1:TextBoxA id="TextBoxA1" runat="server"></cc1:TextBoxA>

In summary, this is a quick technique with high return, and therefore a good skill to have.

links: digg this    technorati    


comments (7)


1. Sri left...
Friday, 29 April 2005 5:32 am

Tim
I saw your server side confirm button at http://www.timstall.com/Code.aspx. Can you tell me if the Button assembly code is available for people who download the test code. If yes please let me know , I would like to implement the code in C# or if u can mail be the the Button class code I would be grateful I am in great need of this, but I wouldnt like to use the assembly would rather prefer the code compile as part of my code . Please let me know if you will allow me on the same

Thanks


2. Tim Stall left...
Sunday, 1 May 2005 9:13 pm

Hello,
Okay. I've just put this in a recent blog post at:

http://timstall.dotnetdevelopersjournal.com/read/1241430.htm


3. parithi left...
Friday, 19 August 2005 4:59 am

i want vb.net coding


4. Tim Stall left...
Friday, 19 August 2005 10:59 am

Hey Parithi, I don't have it in VB, but it's easy C# that should be almost a direct translation - there's no C# specific concepts there.


5. Sri left...
Saturday, 20 August 2005 8:10 am

Hi Parithi Another option is get hold of the c# code as posted by Tim, compile it into a dll then download a useful utility like Reflector.Net, then disassemble the dll into VB.Net or delphi which ever u need

Link for reflector : http://www.aisto.com/roeder/dotnet/


6. Padmavathi left...
Tuesday, 27 September 2005 6:39 am

It is nice to know about customcontrols for beginners


7. joshua left...
Saturday, 18 November 2006 9:15 am

plz help us be nice to you guys dont be bad plz