User control is one of the best and easy ways to create and design a functionality that can be reusable. It works much like a separate ASPX page and you can add web controls into it. Almost every ASP.NET application and website uses User Control. You can find articles on DevASP.NET about User control. In my previous article on DevASP.NET, I have explained that you can access a user control from another user control in ASP.NET. In this article, I will show you how you can handle user control events in ASPX page. Furthermore I will also show you that how you can call a function in ASPX page that is defined in User Control.
Sometimes you may need to handle a user control event in ASPX page. You can easily achieve this by declaring an event handler for a Button control in User Control. Then you can make a call of event handler in button click event. Now you can assign a new event handler to the event handler property of User control in Page Load event of ASPX page.
1.Create a new Web Site in Visual Studio 2010 either in C# or VB.NET
2.Add a Web Form to Web Site
3.Add a Web User Control in the website
4.Add a Button control in WebUserControl.ascx
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
5.Now add code below in WebUserControl.ascx.cs or WebUserControl.ascx.vb
C#
public event EventHandler UCButtonClick;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
UCButtonClick(sender, e);
}
public string UserControlFunction()
{
string text = "This function is in user control";
return text;
}
VB.NET
Public Event UCButtonClick As EventHandler
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
RaiseEvent UCButtonClick(sender, e)
End Sub
Public Function UserControlFunction() As String
Dim text As String = "This function is in user control"
Return text
End Function
First an event handler is created. This event handler will work as property for web pages. Then event is raised in Button click event. At the end a function created which returns string. We will call this function in ASPX page.
6.Now add reference to User Control in Default.aspx page
<%@ Register Src="WebUserControl.ascx" TagName="UserControl1" TagPrefix="uc1" %>
We need to set “Src”, TagName and TagPrefix properties of @Register directive for User Control.
7.Write code below in Default.aspx page
<div>
<uc1:UserControl1 ID="UserControl1" runat="server" />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
</div>
8.Now write code below in Default.aspx.cs or Default.aspx.vb
C#
protected void Page_Load(object sender, EventArgs e)
{
UserControl1.UCButtonClick +=new EventHandler(UserControl1_UCButtonClick);
}
protected void UserControl1_UCButtonClick(object sender, EventArgs e)
{
Label1.Text = UserControl1.UserControlFunction();
Label2.Text = ASPXPageFunction();
}
private string ASPXPageFunction()
{
string text = "This function is in ASPX page";
return text;
}
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
AddHandler UserControl1.UCButtonClick, AddressOf UserControl1_UCButtonClick
End Sub
Protected Sub UserControl1_UCButtonClick(sender As Object, e As EventArgs)
Label1.Text = UserControl1.UserControlFunction()
Label2.Text = ASPXPageFunction()
End Sub
Private Function ASPXPageFunction() As String
Dim text As String = "This function is in ASPX page"
Return text
End Function
First assign a new event handler to event handler property of User Control in Page Load event then call this event handler. UserControlFunction() is called here using ID of User control and its return value is assigned to a Label control. Another function is called here which is defined next in the aspx page.
9.That’s it. View website in browser and click on button to see result.
