How to create a Composite Control in C# and ASP.Net


Here we discuss how to create a composite control  from a existing control in C# and Asp.net.

For example we create a composite control having  textbox control that have validate feature of required field and email address.

For this purpose we programmatically create a child control of TextBox control, Requiredfieldvalidator control and Regularexpressionvalidator control.

So first of all add a App_Code folder to the root directory of your project next add a new .cs named as  ValidateEmailTextbox .cs file to folder  and  add the following example code :-

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text.RegularExpressions;

namespace mycompositeControls
{
    public class ValidateEmailTextbox : CompositeControl
    {
        private TextBox textbox1;
        private RequiredFieldValidator reqfield;
        private RegularExpressionValidator validatemail;
        public string Text
        {
            get
            {
                EnsureChildControls();
                return textbox1.Text;
            }
            set
            {
                EnsureChildControls();
                textbox1.Text = value;
            }
        }
        protected override void CreateChildControls()
        {
            textbox1 = new TextBox();
            textbox1.ID = "mytextbox";
            this.Controls.Add(textbox1);
            reqfield = new RequiredFieldValidator();
            reqfield.ID = "myreqvalidator"
            reqfield.ControlToValidate = textbox1.ID;
            reqfield.Text = "*Required";
            reqfield.Display = ValidatorDisplay.Static;
            this.Controls.Add(reqfield);
            validatemail = new RegularExpressionValidator();
            validatemail.ID = "myemailvalidator";
            validatemail.ControlToValidate = textbox1.ID;
            validatemail.ErrorMessage = "Invalid Email ID";
            validatemail.ValidationExpression = @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +
              @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +
              @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";
            validatemail.Display = ValidatorDisplay.Dynamic;
            this.Controls.Add(validatemail);
        }
    }
}

Explanation

When you create a composite control, you create a new control from existing control. Notice that class validateEmailTextbox inherits from CompositeControl so, all the control in validateEmailTextbox class inherits from the base CompositeControl class and  control override the base control's CreateChildControls() Methods. Notice that the EnsureChildControls() Method is called in both the set and get method of the text property. EnsureChildControl() Method forces to CreateChildControl() method to be called and also it prevent the CreateChildControls Method from being called more than once. In CretaeChildControls() method we create child control of textbox, Required Field Validator and RegularExpression Validator and add them to parent control.

Again in Default.aspx page register this composite control by using Register directive.

<%@ Register TagPrefix ="Custom" Namespace ="mycompositeControls" %>

Below is Default.aspx page example to show how to use this control:-

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix ="Custom" Namespace ="mycompositeControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <Custom:ValidateEmailTextbox ID ="textemailvalidate" runat ="server" >
    </Custom:ValidateEmailTextbox >
    </div>
    <asp:Button ID="Button1" runat="server" Text="Submit" /> 
    </form>
</body>
</html>

We can also  use this control  in whole application by registering at page section of Web.Config file.

Conclusion

Hope this article help you. Main thing is that once create a composite control then no need to use seperate control for validate field and email address. Like this way we can create any type of composite control that solve many purpose.


Up Next
    Ebook Download
    View all
    Learn
    View all