Tutorial :Handling User Control Events on Containing Page


I want to have a user control containing a save button.

I want the click event attached to the save button to be handled by the containing page not the user control

Is this possible?


Say I have a page called "Editor Page" and a user control called "Editor Buttons". On the "Editor Buttons" user control I have a save button (which is a web control). I want the Click event of the save button to be handled by the "Editor Page" rather than the user control.

The reason for this is because I want to specify base pages that implement common behaviour.


I will assume that you have the code for the UserControl. If that is the case, you can define a Save event in your user control and have it expose the Click event of the save button, either directly, or by internally setting up an event handler and raise the Save event when the button is clicked. That could look something like this in the UserControl:

public event EventHandler Save;    private void SaveButton_Click(object sender, EventArgs e)  {      OnSave(e);  }    protected void OnSave(EventArgs e)  {      // raise the Save event      EventHandler save = Save;      if (save != null)      {          save(this, e);      }  }  


This technique is commonly referred to as “event bubbling”.

Here is an exmple:

public partial class Test : System.Web.UI.UserControl    {     public event EventHandler buttonClick;     protected void Button1_Click(object sender, EventArgs e)   {       buttonClick(sender, e);   }    }  

Then you can subscribe the event buttonClick at webpage to display the different information .

public partial class Test: System.Web.UI.Page   {   protected void Page_Load(object sender, EventArgs e)   {     UserControlID.buttonClick+=new EventHandler(UserControlID_buttonClick);    }    protected void UserControlID_buttonClick(object sender, EventArgs e)   {       Response.Write("hello,I am jack.");   }    }  




public partial class UserControl1 : System.Web.UI.UserControl


public event EventHandler UserControl1Click;        protected void Page_Load(object sender, EventArgs e)    {    }        protected void btn1_Click(object sender, EventArgs e)    {        UserControl1Click(sender, e);    }  




public partial class UserControl2 : System.Web.UI.UserControl


public event EventHandler UserControl2Click;        protected void Page_Load(object sender, EventArgs e)    {    }           protected void btn2_Click(object sender, EventArgs e)    {        UserControl2Click(sender, e);    }  


Then add one Asp.Net Text box(to display user control id) and above two user controls to Aspx page as shown below.

<title>Untitled Page</title>  

<form id="form1" runat="server">        <div>        <asp:TextBox ID="txt1" runat="server"></asp:TextBox> <br />        <UC1:UC ID="uc1" runat="server" />        <UC1:UC ID="uc2" runat="server" />        </div>        </form>  

Now add event handler for each user control to handle button click event of two controls as shown below.

public partial class _Default : System.Web.UI.Page


protected void Page_Load(object sender, EventArgs e)    {        uc1.UserControl1Click += new EventHandler(uc1_UserControl1Click);        uc2.UserControl2Click += new EventHandler(uc2_UserControl2Click);    }        protected void uc1_UserControl1Click(object sender, EventArgs e)    {        txt1.Text = "User Control 1 Clicked";    }        protected void uc2_UserControl2Click(object sender, EventArgs e)    {        txt1.Text = "User Control 2 Clicked";    }  


If we click User Control1, text box displays “User Control 1 Clicked” or if we click on User Control2, text box displays “User Control 2 Clicked”.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »