Handle Button Click Event of User Control in Asp.Net Page
In my previous article Web User Controls in ASP.NET, I explained about how to create user control in Asp.Net and how to use them in .aspx pages.
In this article, I will explain about how to handle server side button click event of user control in .aspx page. For example you have two user controls which have button control and you need to call two different methods for two user controls which are defined in your .aspx code behind file.
To handle button click events of user control in Aspx code behind file, you need to use Event Handlers. First create two user controls UserControl1, UserControl2 and add Asp.Net button control to each. Add EventHandler for each to handle button click events as shown below.
UserControl1.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserControl1.ascx.cs" Inherits="UserControl1" %>
<asp:Button Text="User Control1" ID="btn1" runat="server" OnClick="btn1_Click" />
UserControl1.ascx.cs
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);
}
}
UserControl2.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserControl2.ascx.cs" Inherits="UserControl2" %>
<asp:Button Text="User Control2" ID="btn2" runat="server" OnClick="btn2_Click" />
UserControl1.ascx.cs
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.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagName="UC" TagPrefix="UC1" Src="~/UserControl1.ascx" %>
<%@ Register TagName="UC" TagPrefix="UC2" Src="~/UserControl2.ascx" %>
<!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:TextBox ID="txt1" runat="server"></asp:TextBox> <br />
<UC1:UC ID="uc1" runat="server" />
<UC1:UC ID="uc2" runat="server" />
</div>
</form>
</body>
</html>
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”.
