Raise a event from usercontrol to
aspx page
ASP.Net applications with user
controls need to commucinate with usercontrols and aspx page. We can sent
parameter as properties to usercontrol from aspx page and also we can access
the usercontrol controls from aspx page. This post describing how we can communicate between aspx page and
usercontrols.
Multiple usercontrols in a single
aspx page communication
Here we consider the scenario, we have two usercontrols in a single page
and need to communicate between usercontrols through aspx page.
Usercontrol1
Create a usercontrol with name usercontrol1 and having login screen with
login button. The usercontrol having two textboxes one for username, and other
for pasword and a textbox for login.
<%@ Control
Language="C#"
AutoEventWireup="true"
CodeBehind="UserControl1.ascx.cs"
Inherits="testWebApp.UserControl1"
%>
<div>
username
<asp:TextBox ID="txtUserName"
runat="server"
/>
Password
<asp:TextBox ID="txtPassword"
runat="server"
/>
<asp:Button ID="btnLogin"
runat="server"
onclick="btnLogin_Click"
Text="Login"
/>
</div>
UserControl 2
Create a usercontrol with name usercontrol2 and having single label
control to display login name.
<%@ Control
Language="C#"
AutoEventWireup="true"
CodeBehind="UserControl2.ascx.cs"
Inherits="testWebApp.UserControl2"
%>
<asp:Label ID="lblUserName" runat="server" Text="This is from UserControl2" />
ASPX page
Create a aspx page with name main.aspx page and included above user
controls and also created a label control for displaying current username
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="main.aspx.cs"
Inherits="testWebApp.main"
%>
<%@ Register
Src="~/UserControl1.ascx"
TagName="uc1"
TagPrefix="uc"
%>
<%@ Register
Src="~/UserControl2.ascx"
TagName="uc2"
TagPrefix="uc"
%>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server"
ID="lblUserName"
Text="This is from
Aspx Page" />
<uc:uc1 runat="server"
ID="uc1"
/>
<uc:uc2 runat="server"
ID="uc2"
/>
</div>
</form>
</body>
</html>
When we enter username and press enter, will raise
a event from usercontrol to aspx page, means from usercontrol1 to main aspx. At
the same time we need to display username in the aspx page. For achieving that
first we store the username in the usercontrol itself as properties and raise a
event from usercontrol to aspx page. To raise a event to parent page, declared
a Event Handler and will call the event handler once the user press the button.
Code behind of
UserControl1
public partial class UserControl1
: System.Web.UI.UserControl
{
public EventHandler
loginClickArgs;
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void
btnLogin_Click(object sender, EventArgs e)
{
UserName
= txtUserName.Text;
loginClickArgs(sender,e);
}
private string
_username;
public string
UserName
{
get { return
_username; }
set { _username = value;
}
}
}
Codebehind main ASPX page
To get event from usercontrol in aspx page, we need to initialise the
event in the page load and create a funtion for curresponding event. The
username entered in the usercontrol1 will get from the usercontrol1 properties.
From here we assigned the label text by taking the value from usercontrol1.
public partial class main :
System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
uc1.loginClickArgs += new EventHandler(login_Click);
}
private void login_Click(object
sender, EventArgs e)
{
lblUserName.Text = "Hi " +
uc1.UserName + ", Welcome to ASPX Page";
uc2.UserName = uc1.UserName;
uc2.displayMessage();
}
}
Code behind userControl2
To call a function in usercontrol from aspx page, we need to declare a
function as public in the usercontrol. If we need any dynamic parameter to the
function, we need to create a properties in the usercontrol and set this from
the aspx page. Here we are setting the username from the usercontrol1 to
usercontrol2 from main aspx page. Then calling a public function
displaymessage() in the usercontrol2 from the aspx page.
public partial class UserControl2
: System.Web.UI.UserControl
{
protected void Page_Load(object
sender, EventArgs e)
{
}
public void
displayMessage()
{
lblUserName.Text = "Hi " +
UserName + ", This message from
usercontrol";
}
private string
_username;
public string UserName
{
get { return
_username; }
set { _username = value;
}
}
}
Nice article.. thanks
ReplyDelete