Event Bubbling From Web User Controls in ASP.NET

5
votes

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
        }
    }
3
asp.netuser-controlsevent-bubbling
There is no "event bubbling" mechanism in ASP.NET. You'll have to expose the event by adding a new one on UserControl2. – millimoose

3 Answers

5
votes

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"         
    }
}
4
votes

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
0
votes

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()?