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 lets 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 :
- deriving from the base control class ( today's example )
- driving from one existing control ( extending functionality of existing one )
- 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 , lets 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.
