Event Bubbling with User Controls
Prerequisites
Advanced .NET programming
Summary
A demonstration of how to bubble an event from a button on a user control to the container of the user control.
Topics Covered in this Video;
-Panels and Labels
-Link Buttons
-Literals
-Delegates
-ClickHandlers
-Edit Panel
-Events
Video
Reference Materials
| ucEditPanel.ascx |
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucEditPanel.ascx.cs" Inherits="MyDailyMath.UserControls.ucEditPanel" %>
<asp:Panel ID="Panel1" runat="server" Width="200" Height="150" CssClass="EditPanel" ScrollBars="Auto">
<asp:Panel ID="PanelHeader1" runat="server" CssClass="EditPanelHeader">
<asp:Label ID="LabelHeader" runat="server" Text="Label" />
</asp:Panel>
<asp:Panel ID="PanelBody1" runat="server" CssClass="EditPanelBody">
<asp:LinkButton ID="lbEditHTML1" runat="server" onclick="lbEditHTML_Click">Edit HTML</asp:LinkButton> |
<asp:LinkButton ID="lbEditText1" runat="server" onclick="lbEditText_Click">Edit Text</asp:LinkButton><br />
<asp:Literal ID="litContent1" runat="server"></asp:Literal>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="rce1" runat="server" TargetControlID="Panel1" Radius="6" Corners="All" />
</asp:Panel>| ucEditPanel.ascx.cs |
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyDailyMath.UserControls
{
public partial class ucEditPanel : System.Web.UI.UserControl
{
public delegate void HtmlButtonClickHandler(object sender, EventArgs e);
public delegate void TextButtonClickHandler(object sender, EventArgs e);
public event HtmlButtonClickHandler HtmlButtonClick;
public event TextButtonClickHandler TextButtonClick;
public String Text
{
get { return litContent1.Text; }
set { litContent1.Text = value; }
}
public String Header
{
get { return LabelHeader.Text; }
set { LabelHeader.Text = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void lbEditHTML_Click(object sender, EventArgs e)
{
if (HtmlButtonClick != null) HtmlButtonClick(this, e);
}
protected void lbEditText_Click(object sender, EventArgs e)
{
if (TextButtonClick != null) TextButtonClick(this, e);
}
}
} | TestForm.ascx |
<%@ Page Title="" Language="C#" MasterPageFile="~/LoggedIn.Master" AutoEventWireup="true" CodeBehind="TestForm.aspx.cs" Inherits="MyDailyMath.Users.TestForm" %>
<%@ Register Src="~/UserControls/ucEditPanel.ascx" TagPrefix="uc" TagName="EditPanel" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<uc:EditPanel runat="server" id="ucEditPanel1" Header="User Control Header"></uc:EditPanel>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>| TestForm.ascx.cs |
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MyDailyMath.UserControls;
namespace MyDailyMath.Users
{
public partial class TestForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ucEditPanel1.HtmlButtonClick += new ucEditPanel.HtmlButtonClickHandler(HtmlButton_OnClick);
ucEditPanel1.TextButtonClick += new ucEditPanel.TextButtonClickHandler(TextButton_OnClick);
}
protected void HtmlButton_OnClick(object sender, EventArgs e)
{
Label1.Text = "HTML Button clicked";
}
protected void TextButton_OnClick(object sender, EventArgs e)
{
Label1.Text = "Text Button clicked";
}
}
}