Wednesday 14 December 2011

Creating Custom Controls in ASP .Net

In this article I have simply demonstrated two code examples for creating Custom Web Controls.
Why Custom Controls?
To cater through the real world scenarios that may not be supplemented by inbuilt .Net controls, the need for Custom Control arises. Also there are several other reasons for creating custom control like reusability, centralized management over the control, ease of usage etc.
How to approach the requirement for creating Custom Controls?
If any of the inbuilt .Net control meets your requirement than you should always use these controls. If not then ask yourself a question
Would any of the existing control help me?
If yes than
Inherit from the existing control and add the new features to it and extend it further.
If No than
You need to build the control from scratch. In this case inherit from WebControl class.

How to create Custom Controls?
There are two ways in which you can create a custom control.
1) You can inherit from existing .net web control to extend its features further. OR
2)    You can directly inherit from
WebControl class to create a web control from scratch.
Depending upon the approach you choose their will be several properties and methods for you to override. All of them cannot be explained here so I am explaining some important among them that I have used in my code samples.
AddAttributesToRender – Adds HTML or Style attributes for any of your HtmlTextWriterTag. You can also use HtmlTextWriter's "AddAttribute" , "AddStyleAttribute" methods to achieve the same functionality. Make sure that you add this attributes before using "RenderBeginTag" method.
RenderContents – Outputs HTML content of Server Control to HtmlTextWriter object. So override this method to manage the HTML that your custom control renders to the browser.
TagKey – WebControl renders a span TAG by default on the client browser. But to render any specific TAG you need to override this method.
Inheriting from the existing control
This example depicts the creation of a new web control named "myButton" that is derived from the Button class. It has all the features that a normal button control has. But for a twist I have added a simple feature that prompts for a message before submitting the page back to the server. I have added a new property called "AlertMessage" to quench this requirement.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace myControlLib
{
    public class myButton : Button
    {
        public myButton() { }
        private string _AlertMessage = "Are you sure to process this request!";
        public string AlertMessage
        {
            set { _AlertMessage = value; }
            get { return _AlertMessage; }
        }
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "return confirm('" + _AlertMessage + "')"); base.AddAttributesToRender(writer);
        }
    }
}
Registering the control on the web page
<%@ Register Assembly="myControlLib" Namespace="myControlLib" TagPrefix="myUcl" %>
Using the control
<myUcl:myButton ID="MyButton1" runat="server" Text="MyButton 1" AlertMessage="Custom Message here!"/>
<myUcl:myButton ID="MyButton2" runat="server" Text="MyButton 2" />
Inheriting from the WebControl class
This example depicts the creation of a new web control named "myImage" that is directly derived from the WebControl class. This control renders a Picture, Name of the Picture and Description of the Picture. Description of the Picture is displayed when the mouse is moved over the picture.
For this I have created 3 additional properties for this.
ImageUrl – The url of the image to be displayed
ImageName – The name of the image.
ImageDescription – The description for the image.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace myControlLib
{
    public class myImage : WebControl
    {
        public myImage() { }

        private string _ImageUrl = "";
        public string ImageUrl
        {
            get { return _ImageUrl; }
            set { _ImageUrl = value; }
        }
        private string _ImageName = "";
        public string ImageName
        {
            get { return _ImageName; }
            set { _ImageName = value; }
        }
        private string _ImageDescription = "";
        public string ImageDescription
        {
            get { return _ImageDescription; }
            set { _ImageDescription = value; }
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.AddAttribute("onmousemove","javascript:document.getElementById('" + this.UniqueID +"_divDescription').style.display='';");
            writer.AddAttribute("onmouseout","javascript:document.getElementById('" + this.UniqueID +"_divDescription').style.display='none';");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, _ImageUrl);
            writer.RenderBeginTag(HtmlTextWriterTag.Img);
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.Write("Name : " + _ImageName);
            writer.RenderEndTag();
            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, this.UniqueID +"_divDescription");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.Write("Description : " + _ImageDescription);
            writer.RenderEndTag();
            base.RenderContents(writer);
        }
        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }
        }
    }
}

Registering the control on the web page
<%@ Register Assembly="myControlLib" Namespace="myControlLib" TagPrefix="myUcl" %>
Using the control
<myUcl:myImage ID="MyImage1" runat="server" ImageUrl="~/images/myImage1.jpg"ImageName="My Image Name" ImageDescription="My Image Description........" />
Note: The above examples are the simplest controls that one can create. Remember that you can create more complex controls using the same approach. Choosing the best control that can serve the purpose of the requirement is our JOB and so make this decision very carefully.
Posted By: Mr. Palash Paul

7 comments:

  1. knowledge base.

    Waiting for more.

    ReplyDelete
  2. The blog gave me idea about the custom control and it gave us idea to create the custom control My sincere thanks for sharing this post
    Dot Net Training in Chennai

    ReplyDelete
  3. really you have posted an informative article. it will be really helpful to many peoples. thank you for sharing this blog. keep on sharing such kind of an interesting article.
    dot net training in chennai

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. As a beginner in Dot Net programming your post help me a lot.Thanks for your informative article.
    dot net training in velachery

    ReplyDelete
  6. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...Really it was an awesome article...very interesting to read..please sharing like this information
    dot net training in velachery |
    dot net training in chennai

    ReplyDelete
  7. really you have been shared very informative blog. it will be really helpful to many peoples. so keep on sharing such kind of an interesting blogs.
    dot net training in chennai

    ReplyDelete