Capture Button’s Click Event of User Control in the Page ~ student Box Office

Nov 28, 2011

Capture Button’s Click Event of User Control in the Page

3:50 AM vikram reddy No comments

Example 1:

Introduction

Almost every application nowadays makes use of UserControl. This article helps you to understand how one can capture the button's (placed in User Control) click event inside the page which holds the user control.

Using the Code

To start with, let's first create a new website and add a user control to it and name it Demo.ascx. This is how youruser control looks like initially.

<% @ Control Language="C#" AutoEventWireup="true" 
 CodeFile="Demo.ascx.cs" Inherits="Demo" %>

Now add a button to this user control.

<% @ Control Language="C#" AutoEventWireup="true" 
  CodeFile="Demo.ascx.cs" Inherits="Demo" %>

<asp:Button ID="btnClick" runat="server" Text="Click Me!!!" onclick="btnClick_Click" />

If you want to extend the button click placed in the user control to the page, then declare an Event handler and on the click of the button just make a call to the declared event handler. This will work as a property for any web page.

public event EventHandler ButtonClickDemo;

protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnClick_Click(object sender, EventArgs e)
{
   ButtonClickDemo(sender, e);
}

Place the control in your *.aspx page. In the Page_Load event of your page, assign a new event handler to theUser control’s event handler property. And, now use the newly declared event handler.

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Demo1.ButtonClickDemo += new EventHandler(Demo1_ButtonClickDemo);
    }

    protected void Demo1_ButtonClickDemo(object sender, EventArgs e)
    {
         Response.Write("It's working");
    }
}

Now when the button (which is placed in user control) is clicked, event handler declared in the page will be used to handle the click event.

Example 2:

“What is delegate?” we all have faced this question in one or more interview.

and the most common answer is “Function pointer”. Here I am showing a simple example of delegate. I have one user control and one aspx page. The user control contains one button. When user click on this button I will call a method on main page using delegate. Here is my user control,

<%@ Control Language=”C#” AutoEventWireup=”true”CodeFile=”WebUserControl.ascx.cs” Inherits=”Dalegate_WebUserControl” %>

<asp:Button ID=”btnTest” runat=”server” Text=”I am Inside User Control”OnClick=”btnTest_Click” />

Fig – (1) WebUserControl.ascx

On WebUserControl.ascx.cs I have written simple delegate and event handler as shown below,

public partial class Dalegate_WebUserControl : System.Web.UI.UserControl{

// Delegate declaration
public delegate void OnButtonClick(string strValue);

    // Event declaration    public event OnButtonClick btnHandler;

    // Page load    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnTest_Click(object sender, EventArgs e)
    {
           // Check if event is null           if (btnHandler != null)
               btnHandler(string.Empty);

// Write some text to output Response.Write(“User Control’s Button Click <BR/>”);
}
}

Fig – (2) WebUserControl.ascx.cs

Above code first check whether btnHandler is not null and than raise the event by passing argument. You can pass any number of argument in event. You need to change public delegate void OnButtonClick(string strValue) and btnHandler(string.Empty) lines for changing number of arguments. Now take a look at aspx page,

<%@ Page Language=”C#” AutoEventWireup=”true”CodeFile=”Default.aspx.cs” Inherits=”Dalegate_Default” %>

<%@ Register Src=”WebUserControl.ascx” TagName=”WebUserControl”TagPrefix=”uc1″ %>

<!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>        <asp:Label ID=”lblText” Text=”I am On Main Page : “
                   runat=”server”></asp:Label>        <asp:DropDownList ID=”ddlTemp” runat=”server”>            <asp:ListItem>Chirag</asp:ListItem>            <asp:ListItem>Dipak</asp:ListItem>            <asp:ListItem>Shailesh</asp:ListItem>        </asp:DropDownList>        <br />        <br />        <uc1:WebUserControl ID=”WebUserControl1″ runat=”server” />
    </div>    </form>
</body>
</html>

Fig – (3) Default.aspx

Default.aspx has one drop down list and a user control as shown in above code. Lets look at cs file,

public partial class Dalegate_Default : System.Web.UI.Page{
      protected void Page_Load(object sender, EventArgs e)
      {
             // Declare and Define Event of User Control. When User Clicks on button
             (which is inside UserControl)             // below event is raised as I have called raised that event on Button Click             WebUserControl1.btnHandler += new
             Dalegate_WebUserControl.OnButtonClick(WebUserControl1_btnHandler);

      }

      void WebUserControl1_btnHandler(string strValue)
      {
             Response.Write(“Main Page Event<BR/>Selected Value: “ +
                                     ddlTemp.SelectedItem.Text + “<BR/>”);
      }
}

Fig – (4) Default.aspx.cs

Now when you run the application and clicks on button you can see that when user click on button the user control raise the click event and calls the WebUserControl1_btnHandler(string strValue) method on main page.