Thursday, 22 May 2014

How to create ASP.NET server control

Step 1 : Go to Visual Studio  and select "File" -> "New" -> "Project...".
Step 2 : Go to "Web" -> "ASP.NET Server Control" -> "Ok".
Step 3 : After adding a Server Control go to the code file and inherit a TextBox Control class.

You can inherit any other control (TextBox, Dropdownlist or CheckBoxList) that you want to create.



Step 4 : Then override the property of the control and write your own customized code in it.

using System.Linq;using System.Text;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Drawing; namespace MyServerControl{    [DefaultProperty("Text")]    [ToolboxData("<{0}:TextBoxMobile runat=server </{0}:TextBoxMobile>")]    public class TextBoxMobile : TextBox    {        /// <summary>        /// Here Override Text property of Textbox control.        /// </summary>        public override string Text        {            get            {                return ((base.Text == null) ?                string.Empty : base.Text);            }            set            {                if (this.Page.IsPostBack)                {                    base.Text = value;                    //Here you can write for validate control at server side.                    if (this.Text == string.Empty) this.BackColor = Color.Yellow;                } 
            }        }         /// <summary>        /// Here Override Width property of textbox control.        /// </summary>        public override Unit Width        {            get            {                return 200;            }} 
        /// <summary>        /// Here Override MaxLength Property of TextBox Control.        /// </summary>        public sealed override int MaxLength        {            get            {                return 10;            }}
/// <summary>        /// This Method Render html tag.        /// </summary>        /// <param name="output"></param>
        protected override void RenderContents(HtmlTextWriter output)        {            output.Write(Text);        }        /// <summary>        /// In this method write code for <asp:TextBox ></TextBox> tag        /// which attribute you want to add in  html tag.        /// </summary>        /// <param name="writer"></param>        protected override void AddAttributesToRender(HtmlTextWriter writer)        {            writer.AddAttribute("onkeypress", "return ValidateTextBox(event,this,
                                 'Mobile','"
+ MaxLength + "');");            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, this.Width.ToString());            if (Text == String.Empty)            {                Text = (String)base.ViewState["Text"];            }            writer.AddAttribute("Text", Text);            base.AddAttributesToRender(writer);        }        /// <summary>        /// on this event you have to attached your Javascript file        /// and css file to the paricular control.        /// </summary>        /// <param name="e"></param>        protected override void OnInit(EventArgs e)        {            base.OnInit(e);            if(this.Page.ClientScript.IsClientScriptIncludeRegistered(            ControlScript"))                return;       
            
this.Page.ClientScript.RegisterClientScriptInclude("ControlScript",
            
this.Page.ClientScript.GetWebResourceUrl(this.GetType(),
            
"MyServerControl.ClientSideValidation.js"));        }    }}




How to use an ASP.NET Server Control in a web page (.aspx)

Step 1: Go to the ToolBox and add a Tab.

Step 2 : Here I need to add a tab and right-click on your own tab and then select the option: "Choose Items...".
Step 3 : Here I need to browse to the DLL of the Server Control that I need to create.
Step 4 : Here select the DLL file and click "Open".
Step 5 : Then we can see our own control; here then click "OK".
Step 6 : Then this control is added to the tab that I need to create.
Step 7 : Then drag and drop the control to multiple web pages and use it. After dragging the control onto a page the control is registered on the page automatically.
Step 8 : Then Run this web application and see the output.You can enter only 10 digits and you can enter only numeric values in this TextBox.