Exposing client and server event handlers of a user control

Posted: 22nd March 2010 in ASP.NET

Scenario: You have build a user control with a button and now you wish to embed the control onto you page. However, you want to handle the click event of the button on the main page, not in the control.

Solution: To do this, you need to expose the event handler of the user control button’s click event and wire it up to internal working of the user control click event handler/delegate.

This can be done using the following code extracts:

First, add the control to the user control

Adding the button
  1. <%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”EventHanderClick.ascx.cs” Inherits=”UserControlEventHandlerTest.EventHanderClick” %>
  2. <asp:Button ID=”Button1″ runat=”server” Text=”Button” OnClick=”AddNewButton_Click”/>

Next, we need to expose the events in the code behind of the user control.

User Control Code Behind
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!string.IsNullOrEmpty(this.OnAddNewClientClick))
  4. this.Button1.Attributes.Add(“onclick”, string.Format(“{0}; return false;”, this.OnAddNewClientClick));
  5. }
  6. public string OnAddNewClientClick
  7. {
  8. get;
  9. set;
  10. }
  11. private static readonly object AddNewClickEvent = new object();
  12. public event EventHandler AddNewClick
  13. {
  14. add
  15. {
  16. Events.AddHandler(AddNewClickEvent, value);
  17. }
  18. remove
  19. {
  20. Events.RemoveHandler(AddNewClickEvent, value);
  21. }
  22. }
  23. protected void AddNewButton_Click(object sender, EventArgs e)
  24. {
  25. OnAddNewButtonClick(EventArgs.Empty);
  26. }
  27. protected virtual void OnAddNewButtonClick(EventArgs e)
  28. {
  29. var addNewEventDelegate =
  30. (EventHandler)Events[AddNewClickEvent];
  31. if (addNewEventDelegate != null)
  32. addNewEventDelegate(this, e);
  33. }

It can also be seen, above, that an OnAddNewClientClick property has been exposed as a string. This is to allow you to wire up a JavaScript function. Notice too, I have used string.Format to add the onclick attribute to the control and concatenated return false; onto the end. This is to prevent the control from posting back, if the on client click event is being used.

Now, we can go to the main page and add the newly defined user control.  If you now go to the source view you will notice that both events have been exposed and are picked up in the intellisense

User Control Source
  1. <uc1:ClickEventTestControl ID=”ClickEventTestControl1″ runat=”server” OnAddNewClick=”UserControlButtonEvent” OnAddNewClientClick=”alert();” />
User Control Event
  1. protected void UserControlButtonEvent(object sender, EventArgs e)
  2. {
  3. this.Label1.Text = “Fired by the user control click event”;
  4. }

Now, when you  click the button on the user control, which has been added to the page, the code on the page is used.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s