WebControl's events not working? How to make a simple webcontrol?

Few days back i had a strange issue during my webcontrol development .The issue was that child control events like button click’s , DropDownlist’s SelectedIndexChanged are not working. On a simple glance everything was done as per the regular flow of coding… I search on Bing,Live,Google etc…. Didnt find much effective solution on the first day.. On a deep dive to webcontrol development i found some articles,books,blogs that mentioning about the influence of implementation INamingContainer interface to the WebControl Class. Actually this interface does nothing when we do the implementation . Means we except must implemented functions from the interface. But in case INamingContainer there is nothing like that… its a marker interface.By this interface it allows unique naming of the dynamically generated server control instances within the WebControl.

Here i will explain the creation of a simple webcontrol. So HOW TO CREATE A WEBCONTROL?

1. Open Visual Studio and Create a blank solution.(File menu –> New Project –> On left side Project Types tree, expand Other Project Types node, select Visual Studio Solutions, Select Blank Solution from right side pane.). Name the Solution as WebControls
2. Add a Class library Project to this solution.Name this as WebControlAssembly.
3. Add the Reference of System.Web to the library. This reference is done to get the System.Web.UI.WebControls, System.Web.UI namespaces inside the project.
4. Rename the default added Class file to TextButtonControl.cs.
5. Delete all the default code from the new class file and paste the below mentioned lines of code to the class file.
   C#

   using System;
   using System.Web.UI;
   using System.Web.UI.WebControls; 
   namespace TextButtonWebControl
   {
   //*** INamingContainer is a must.Any control that implements this interface
   //creates a new namespace in which all child control ID-
   //attributes are guaranteed to be unique within an entire application.
   //The marker provided by this interface allows unique naming of the dynamically
   //generated server control instances within the-
   //Web server controls that support data binding
   public class TextButtonControl : WebControl, INamingContainer
   {
   private TextBox txtControl;
   private Button btnControl;
   private Table tbl;// Master container of button and textbox.
   
   //public event for handling click of the button
   public event EventHandler BtnClick; 
   
   public TextButtonControl()
   { } 
   
   protected override void CreateChildControls()
   { 
   
   txtControl = new TextBox();
   txtControl.ID = "txtControl"; 
   
   btnControl = new Button();
   btnControl.ID = "btnControl";
   btnControl.Text = "Submit";
   btnControl.CausesValidation = false;
   btnControl.Click += new EventHandler(btnControl_Click); 
   
   tbl = new Table();
   tbl.Width = Unit.Percentage(25);
   tbl.ID = "tbl"; 
   
   TableRow tblrow = new TableRow();
   tblrow.ID = "tblrow";
   tblrow.Width = Unit.Percentage(100);
   
   TableCell tblCell0 = new TableCell();
   tblCell0.ID = "tblCell0″;
   tblCell0.Controls.Add(txtControl);
   tblCell0.HorizontalAlign = HorizontalAlign.Left; 
   
   TableCell tblCell1 = new TableCell();
   tblCell1.ID = "tblCell1″;
   tblCell1.HorizontalAlign = HorizontalAlign.Left;
   tblCell1.Controls.Add(btnControl);
   
   tblrow.Cells.Add(tblCell0);
   tblrow.Cells.Add(tblCell1);
   tbl.Rows.Add(tblrow);
   Controls.Add(tbl); 
   
   base.CreateChildControls();
   }
   
   //Button Click event to call public event.
   void btnControl_Click(object sender, EventArgs e)
   {
   this.ControlText = txtControl.Text;
   if (BtnClick != null)
   {
   BtnClick(sender, e);
   } 
   
   } 
   
   public string ControlText
   { get; set; } 
   
   }
   }

6. Just compile the Class the library project. Build Succeeded…….! ???. Webcontrol is ready now…..
7. In this step we will add a New Website to this solution. Right click on the newly created website , click Add reference option and on the Add reference window click Projects tab . On this tab select Webcontrol Library project, here in this example it is WebControlAssembly. Click OK. The reference of the Webcontrol is added to website. Now we can add the webcontrol to the webpage.Follow this register tag to register this control to page .

   <%@ Register Assembly="WebControlAssembly" Namespace="TextButtonWebControl" 
       TagPrefix="Tc" %>

   This mark-up will add the control to the page. You can see the custom event “OnBtnClick” to handle the button click of the WebControl.

   <Tc:TextButtonControl ID="TextButtonControl1″ runat="server" 
       OnBtnClick="TextButtonControl1_BtnClick" />

   Below mentioned is event handling for the OnBtnClick Event.

   protected void TextButtonControl1_BtnClick(object sender, EventArgs e)
   
   { Response.Write(TextButtonControl1.ControlText); }

   Please read the step 8 to get the proper understanding of code.

8. I will explain the above piece of code . This webcontrol is intended to create a small table layout which have a TextBox and Button. The TextButtonControl class is inherited from WebControl and it also implementated INamingContainer. The reason for this interface implemenatation is mentioned on the top of the post. The CreateChildControls method is overrided to create the instances of the child controls like button,textbox,Table and to control collection. Here Table is the master container for the button and textbox to maintain the layout of the webcontrol. The button and texbox is added to the Table’s object instance and Table’s object instance is added to the Control Collection.Please check the CreateChildControls method for the code. We have handled the button’s click event and this event can be handled from webpage where this control is used.There is a public event called BtnClick which is called on the button’s click event and event is raised from webpage. This is very useful to handle the child control event from the webpage where the webcontrol is used.

There is ControlText get-set property to get or to set the Text value of the Textbox Control of the webcontrol.Using this property we can receive the text value from the textbox of the webpage where the control is used.

Hope this artice helped you… if any suggestions or feedback please leave a comment.Thanks for reading.

You guys can also see my blogs for the same

http://abinjaik.wordpress.com/2010/02/06/webcontrolcustom-controls-events-not-working/

http://codescraps.blogspot.com/