I have two UserControls - UserControl1.ascx and UserControl2.ascx in PageDefault.aspx:
How I can call the method (GetLabelText() in UserControl1.ascx) from UserControl2.ascx using event bubbling?
This is my example code - When I click on the button (UserControl2Button1 in UserControl1.ascx) - I want to call the method GetLabelText() from UserControl2.ascx - using event bubbling.
PageDefault.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="PageDefault.aspx.cs" Inherits="TelerikAjaxEvents.PageDefault" %>
<%# Register TagPrefix="uc" TagName="UserControl1" Src="~/UserControl1.ascx" %>
<%# Register TagPrefix="uc" TagName="UserControl2" 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>Page Default</title>
</head>
<body>
<form id="form1" runat="server">
UserControl1:
<uc:UserControl1 ID="UserControl1" runat="server" />
UserControl2:
<uc:UserControl2 ID="UserControl2" runat="server" />
</form>
</body>
</html>
UserControl1.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl1.ascx.cs" Inherits="TelerikAjaxEvents.UserControl1" %>
<asp:Label ID="UserControl1Label1" runat="server"></asp:Label>
UserControl1.ascx.cs
public partial class UserControl1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void GetLabelText()
{
UserControl1Label1.Text = "Text is Visible";
}
}
UserControl2.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl2.ascx.cs" Inherits="TelerikAjaxEvents.UserControl2" %>
<asp:Button ID="UserControl2Button1" runat="server" Text="Send"
onclick="UserControl2Button1_Click" />
UserControl2.ascx.cs
public partial class UserControl2 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void UserControl2Button1_Click(object sender, EventArgs e)
{
//Call method from UserControl1 (GetLabelText()) - Show Label text - USING BUBBLE EVENT
}
}
There are many ways to go about this. Mark's answer hints at what was classically known as event bubbling using a built in functionality part of System.Web.UI.Control base control. However, it's a simple exercise to expose your own event, bind to it, and bubble up events through a control hierarchy. For more details on using BubbleEvent in ASP.NET read the following. Please keep in mind that both of these MSDN articles were written for .NET 1.1
Bubbling an Event
Event Bubbling Control Sample
K. Scott Allen does a good job at demonstrating exactly what an "event bubbling" implementation looks like in his post: Event Bubbling From Web User Controls in ASP.NET (C#) . See the following modification to your example for inspiration.
UserControl1 with GetLabelText()
public partial class UserControl1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void GetLabelText()
{
UserControl1Label1.Text = "Text is Visible";
}
}
UserControl2 with exposed BubbleClick event handler that callers can subscribe to.
public partial class UserControl2 : System.Web.UI.UserControl
{
protected Button UserControl2Button1;
protected void Page_Load(object sender, EventArgs e)
{
}
public event EventHandler BubbleClick;
protected void OnBubbleClick(EventArgs e)
{
if(BubbleClick != null)
{
BubbleClick(this, e);
}
}
protected void UserControl2Button1_Click(object sender, EventArgs e)
{
// do some stuff
OnBubbleClick(e);
}
}
PageDefault subscribes to UserControl2's BubbleClick event handler and executes UserControl1.GetLabelText()
public partial class PageDefault : WebPage
{
UserControl1 userControl1;
UserControl2 userControl2;
protected void Page_Load(object sender, EventArgs e)
{
UserControl2.BubbleClick += RootBubbleClickHandler;
}
protected void RootBubbleClickHandler(object sender, EventArgs e)
{
if (sender is UserControl2)
{
// subscribe UserControl1 to UserControl2 click event and do something
userControl1.GetLabelText();
}
// check for other controls with "BubbleClicks"
}
}
Event Bubbling is a poorly understood concept in ASP.NET WebForms. It does exist (and is used by most of the databound controls), but is often mistaken for the simpler concept of "implement an event in a user control" (as K Scott Allen does).
The core of event bubbling is that the event travels up through the control hierarchy until it is handled or hits the root. This allows some centralization of handler code. It is implemented using the Control.RaiseBubbleEvent and Control.OnBubbleEvent methods. The main use case is controls with a lot of child controls (think Repeaters, ListViews, etc.). Instead of subscribing to each individual control, the Repeater catches them all in it's OnBubbleEvent and raises a single ItemCommandEvent for them.
If you really wanted to use event bubbling (as opposed to K. Scott's example), it'd look something like:
class Page {
override bool OnBubbleEvent(object sender, EventArgs e) {
var btn = sender as Button;
if (btn == null) return false;
// You may want to do further checking that the source is what you want
// You could use CommandEventArgs to do this
this.uc1.GetLabelText();
return true;
}
}
The sequence of events goes like this:
- Button Clicked
- Button RaiseBubbleEvent
- UserControl OnBubbleEvent returns false (default, since you didn't override)
- Page OnBubbleEvent
Can you try declaring the UserControl1 as public property(e.g. "UserControl1") on the PageDefault.aspx and then in the UserControl2, use Parent.Page.UserControl1.GetLabelText()?
Related
For some business related reasons I made a wizard navigation user control. Pretty simple: Next/Previous/Finish buttons.
Each of the parent pages that use this nav user control have a SaveData function, which saves the data and does a bunch of other stuff.
When the user clicks Next/Previous/Finish I want to call the parent's SaveData function before redirecting to the other page. How should I do this or can you recommend a better way (code examples if possible please)?
Thanks in advance!
UserControl should not call Parent's function. It is not a good design.
Instead, you want to bubble up the event from UserControl to the Parent page.
Note: my project's namespace is DemoWebForm.
MyUserControl.ascx
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="MyUserControl.ascx.cs"
Inherits="DemoWebForm.MyUserControl" %>
<asp:Button runat="server" ID="NextButton"
OnClick="NextButton_Click" Text="Next" />
<asp:Button runat="server" ID="PreviousButton"
OnClick="PreviousButtonn_Click" Text="Previous" />
<asp:Button runat="server" ID="FinishButton"
OnClick="FinishButton_Click" Text="Finish" />
MyUserControl.ascx.cs
public partial class MyUserControl : System.Web.UI.UserControl
{
public event ClickEventHandler NextClicked;
public event ClickEventHandler PreviousClicked;
public event ClickEventHandler FinishClicked;
protected void NextButton_Click(object sender, EventArgs e)
{
if (NextClicked != null)
{
NextClicked(sender, e);
}
}
protected void PreviousButtonn_Click(object sender, EventArgs e)
{
if (PreviousClicked != null)
{
PreviousClicked(sender, e);
}
}
protected void FinishButton_Click(object sender, EventArgs e)
{
if (FinishClicked != null)
{
FinishClicked(sender, e);
}
}
}
Parent.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs"
Inherits="DemoWebForm.Parent" %>
<%# Register Src="MyUserControl.ascx" TagName="MyUserControl" TagPrefix="uc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<uc1:MyUserControl ID="MyUserControl1" runat="server"
OnNextClicked="MyUserControl1_NextClicked"
OnPreviousClicked="MyUserControl1_PreviousClicked"
OnFinishClicked="MyUserControl1_FinishClicked" />
<asp:Literal runat="server" ID="MessageLiteral" />
</form>
</body>
</html>
Parent.aspx.cs
public partial class Parent : System.Web.UI.Page
{
protected void MyUserControl1_NextClicked(object sender,EventArgs e)
{
MessageLiteral.Text = "Next button was clicked";
}
protected void MyUserControl1_PreviousClicked(object sender, EventArgs e)
{
MessageLiteral.Text = "Previous button was clicked";
}
protected void MyUserControl1_FinishClicked(object sender, EventArgs e)
{
MessageLiteral.Text = "Finish button was clicked";
}
}
you only need the delegate:
public delegate void ClickEventHandler(object sender, EventArgs e);
public event ClickEventHandler NextClicked;
I want to create a usercontrol for retrieving and filtering a dataset. The problem I'm having is that the controls to be populated are not in the usercontrol, but on the main page on which the usercontrol exists. The reason for this is that the controls that are to be populated are different on each page.
If I could get some help solving the following simplified problem, I will probably be on my way to solve the bigger problem:
<body>
<form id="form1" runat="server">
<div>
<uc1:uc1 ID="uc1" runat="server" />
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
</form>
</body>
What I want to do is set the label on the main page by clicking a button on the usercontrol. Problem I'm having is that the usercontrol postback happens after the main page.
Thanks!
I managed to solve it by calling Parent.Page. I also implemented an interface so that I can call different pages' methods from the user control. Not sure if it's a good solution, but it will do:
interface IFilter
{
void SetLabel(string text);
}
public partial class uc : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_Click(object sender, EventArgs e)
{
((IFilter)Parent.Page).SetLabel("changed");
}
}
public partial class _Default : System.Web.UI.Page , IFilter
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
public void SetLabel(string text)
{
lbl.Text = text;
}
}
create a custom event in user control
create a property in usercontrol
fire the event when the button is clicked & set the property value
access the property in the main page in user control's eventhandler
I'm using dynamic controls at my ASP.NET applications. So the issue is - when I use these controls separatelly - they work well. But when I put these two controls on the same page - ONLY LAST submit event is fired. Could anyone help me to identify where is the issue and how to fix it?
Here is my aspx layout:
<%# Control Language="C#" AutoEventWireup="True" CodeBehind="MYPAGE.ascx.cs" Inherits="MYNAMESPACE" %>
<%# Register Assembly="MYANOTHERNAMESPACE" Namespace="MYNAMESPACE" TagPrefix="DAControl" %>
...
<div>
<DAControl:ChooseImageDialog runat="server" id="ChooseImageDialog" />
<DAControl:ChooseVideoDialog runat="server" id="ChooseVideoDialog" />
</div>
Here is my 1st control:
[ToolboxData("<{0}:ChooseImageDialog runat=server></{0}:ChooseImageDialog>")]
public class ChooseImageDialog : WebControl
{
/* This is only part of my code, which should enough for explaining the issue*/
private Button applyPreview = new Button();
private Button cancelPreview = new Button();
protected override void OnLoad(EventArgs e)
{
applyPreview.Click += new EventHandler(applyPreview_Click);
base.OnLoad(e);
}
void applyPreview_Click(object sender, EventArgs e)
{
// I want to reach this block
}
}
}
Here is my 2nd control:
[ToolboxData("<{0}:ChooseVideoDialog runat=server></{0}:ChooseVideoDialog>")]
public class ChooseVideoDialog : WebControl
{
/* This is only part of my code, which should enough for explaining the issue*/
private Button applyVideoPreview = new Button();
private Button cancelPreview = new Button();
protected override void OnLoad(EventArgs e)
{
applyVideoPreview.Click += new EventHandler(ApplyPreviewVideo_Click);
base.OnLoad(e);
}
void ApplyPreviewVideo_Click(object sender, EventArgs e)
{
// I want to reach this block
}
}
Events must be wired up in the Init event. Any later in the life cycle is too late.
I created a textbox and a submit button in header(User Control) included in a master page
and I want to use that textbox value after clicking submit in my .aspx.vb page.
How can i access that, as the vb page is loaded first and then master page is loading ?
TextBox Val = (TextBox)this.Master.FindControl("TextBoxID");
The best way to communicate from UserControl to Page/MasterPage is using events
The best way to communicate from MasterPage to Page is using events
On this way you don't hardlink UserControls with their Pages/MasterPages and the Page with it's Master.
Add an event to your UserControl that is raised when the user clicks the button, for example:
In UserControl of type MyControl:
public delegate void SubmittedHandler(MyControl ctrl);
public event SubmittedHandler Submitted;
protected void BtnCLick(object sender, EventArgs e) {
Submitted(this);
}
Then add an handler to this event in your MasterPage, handle it and raise the Master's event again:
In Master's codebehind:
public delegate void MyControlSubmittedHandler(MyControl ctrl);
public event MyControlSubmittedHandler ControlSubmitted;
protected void Page_Init(Object sender, EventArgs e) {
this.MyControl1.Submitted += MyControlSubmitted;
}
protected void MyControlSubmitted(MyControl sender) {
ControlSubmitted(sender);
}
Then add an handler to this event to your page:
In your Page:
protected void Page_Init(object sender, EventArgs e) {
((SiteMaster)Master).ControlSubmitted += MasterControlSubmitted;
}
protected void MasterControlSubmitted(MyControl sender){
// do whatever you need to do
}
If you only need to access the TextBox from the page and you don't need to handle the click-event, you could also use properties to achieve this:
add a public property f.e. MyControlText in your UserControl that get/set the TextBox.Text property
add a public property f.e. MyControlText in your Master that get/set your UserControl's MyControlText property
Now you can get/set this property from your page in this way:
((SiteMaster)Master).MyControlText = "Hello World";
I have ImageButton in a MasterPage. I want the OnClick event to fire and be captured by the .ASPX page hosted inside the MasterPage?
MasterPage:
<asp:ImageButton ID="btnClear" OnClick="Clear_Click"
ImageUrl="images/Back_Icon_06.png" runat="server" AlternateText="Clear"
width="38" height="39"/>
The masterpage is actually a child of the page (in fact, it's a UserControl). We don't want the page to have to be aware of the intimate details of its child controls (thats why we delegate those aspects to those controls in the first place), so the correct approach would be to handle the click event on the master page and from there fire another event on the masterpage which the page handles:
Master:
public event EventHandler SomethingHappened;
protected void Button_Click(object sender, EventArgs e)
{
OnSomethingHappened(EventArgs.Empty);
}
protected void OnSomethingHappened(EventArgs e)
{
if(this.SomethingHappened != null)
{
this.SomethingHappened(this, e);
}
}
Page:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
//allows us to change master pages
if(this.Master is MyMaster)
{
((MyMaster)this.Master).SomethingHappened += new EventHandler(HandleSomethingHappened);
}
}
private void HandleSomethingHappened(object sender, EventArgs e)
{
//deal with it
}
I would recommend specifying a strongly typed master page in your content page and exposing the event on the master page side
Here's a good MSDN reference
This is similar to what Rex M specified but just simplifies accessing the Master Page a little bit.
// Master Page Code
public event EventHandler ClearClick
{
add
{
this.btnClear.Click += value;
}
remove
{
this.btnClear.Click -= value;
}
}
// Content Page markup
<%# Page masterPageFile="~/MasterPage.master"%>
<%# MasterType virtualPath="~/MasterPage.master"%>
// Content Page Code
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.Master.ClearClick += new EventHandler(OnClearClick);
}
private void OnClearClick(object sender, EventArgs e)
{
// Handle click here
}