For programmers, testers and tech geeks

Custom controls introduction, Creation and usage in asp.net project

A best friend of mine recently requested me to create a post for "Custom Controls creation and use in asp.net" with example and detailed explanation, so today I am going to talk a bit about custom controls which leads to a practical example of how to create a custom control and how to use it in your asp.net project.
First let's have little introduction of custom controls:
"Custom controls are individual assemblies, compiled into a dynamic link library (DLL) and used as any other ASP.Net server control", we can create them by:
 
  1.  deriving from the base control class ( today's example )
  2. driving from one existing control ( extending functionality of existing one )
  3.  combing two or more existing controls ( combination of more than one existing controls )
Today we have example of first type, we are going to create a custom label, the functionality of this label is that, when we set its text, it will validate if the assigned text is a valid email or not and change its color and append message as prefix like this in screen shot: 
 
Now lets see how to create an asp.net custom control first:
  • Open visual studio , go to File->New->Project
  • Select Web projects and select Asp.net Server Control project
  • Name it , let's say CustomLabelControl
  • When you create project, you will have ServerControl1.cs class inherited from WebControl class, this is every thing for your custom control.
  • There will be a method " protected override void RenderContents( HtmlTextWriter output)", which is key, that is how your control will response to you visually, just copy and replace the following code with it:         

   
 protected override void RenderContents( HtmlTextWriter output)
        {
            if (!String.IsNullOrEmpty(this.Text))
            {
                if (this.IsValidEmailAddress())
                {
                    output.Write("This is a valid email : ");
                    output.Write("<FONT size=5 color=Blue>");
                    output.Write("<B>");
                    output.Write(Text);
                    output.Write("</B>");
                    output.Write("</FONT>");
                }
                else
                {
                    output.Write("This is not a valid email : ");
                    output.Write("<FONT size=5 color=red>");
                    output.Write("<B>");
                    output.Write(Text);
                    output.Write("</B>");
                    output.Write("</FONT>");
                }
            }
            else
            {

                output.Write("<FONT size=5 color=red>");
                output.Write("<B>");
                output.Write("Must enter something to validate!");
                output.Write("</B>");
                output.Write("</FONT>");
            }
        }

 
 
It is using IsValidEmailAddress() method which can be defined in the same class as:
 

 
 protected bool IsValidEmailAddress( )
        {
            try
            {
                // this is use for time saving, not optimal solution , but you can replace it with regular expression
                MailAddress m = new MailAddress(this.Text);
                return true;
            }
            catch (FormatException)
            {
                return false;
            }
        }
  • And that's all, your custom control is ready to use, now build your project.
Now second part starts from here, i.e how to use this control in your asp.net project, simple three step process:
  • Add reference of this control ( project dll ) to your asp.net project where you want to use it.
  • Register the control on the page where you want to use it, just directly below the @page directive like that:
 
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomControlTest._Default" %>
<%@ Register Assembly="CustomLabelControl"  Namespace="CustomLabelControl" TagPrefix="ccs" %>
 
 
  • Add control to your page like this:                                                                               <ccs:ServerControl1 runat="server" ID="ServerControl11" Text = "" />
  • Now just set the text of this control, behind any event, lets say on button click,                    
    protected void Button1_Click(object sender, EventArgs e)
    
            {
                this.ServerControl11.Text = this.TextBox1.Text;
            }

 
 
And this control will be automatically say if this is a proper email address or not.
Sample solution project with custom control project and its use in asp.net project is attached here:    CustomControl Project.