ASP.NET(C#): Custom/Composite controls with events

September 15, 2009 by Christoff Truter C#   ASP.NET  

Creating custom controls that expose events can potentially prove to be quite tedious if we're presented with examples like the following:

• IPostBackDataHandler
• IPostBackEventHandler

Notice the following code, from the example you'll find on the MSDN links above:

public class MyButton: Control, IPostBackEventHandler {

  public event EventHandler Click;

  protected virtual void OnClick(EventArgs e) {

	 if (Click != null) {
		Click(this, e);
	 }   
  }

  public void RaisePostBackEvent(string eventArgument){

	 OnClick(new EventArgs());
  }

  protected override void Render(HtmlTextWriter output) {
	 output.Write("<INPUT TYPE = submit name = " + this.UniqueID + 
		" Value = 'Click Me' />");   
  }
}

You will notice the implementation of the IPostBackEventHandler interface, which requires us to create the RaisePostBackEvent method.

But more interestingly, observe the render method where raw HTML are passed to the HtmlTextWriter instance.

Ideally something like the next snippet would make more sense, particularly in dealing with larger more complex controls - there is however a reason why the MSDN example was written in that manner.

HtmlInputSubmit _control = new HtmlInputSubmit()
{
	Name = this.UniqueID
};
_control.RenderControl(output);

By using the preceding snippet, you would find that all of a sudden the click event doesn't fire anymore, simply because the control would now contain a child control that needs to propagate its events to the parent control - since the MSDN example isn't using any child controls, the example should work just fine. (Personally I feel its a bit of a pointless example.)

ASP.net provides a technique called event bubbling to aid us in the propagation of these events. Observe the following snippet:

public class SearchBox : CompositeControl
{
    public event EventHandler Click;
    TextBox _TextBox = new TextBox();
    Button _Button = new Button()
    {
        CommandName = "Click",
        Text = "Search"
    };
            
    [Browsable(true)]
    [Category("Appearance")]
    public string Text
    {
        get
        {
            return _TextBox.Text;
        }
        set
        {
            _TextBox.Text = value;
        }
    }

    protected virtual void OnClick(EventArgs e)
    {
        if (Click != null)
        {
            Click(this, e);
        }
    }

    protected override bool OnBubbleEvent(object source, EventArgs args)
    {
        CommandEventArgs _CommandEventArgs = args as CommandEventArgs;
        if (_CommandEventArgs != null)
        {
            if (_CommandEventArgs.CommandName == "Click")
            {
                OnClick(args);
                return true;
            }
        }
        return false;
    }

    protected override void CreateChildControls()
    {
        this.Controls.Add(_TextBox);
        this.Controls.Add(_Button);
        base.CreateChildControls();
    }
}

In the preceding snippet:

• Inherit from the CompositeControl class; which is like a base class for controls that have child controls.
• Added two child controls, textbox and button, and assign a CommandName to the button, which will be used in our "bubble".
• Override the OnBubbleEvent, where we check if the appropriate CommandName was raised - in this case "Click", which raises any event handlers attached to the button.

To read more about "Bubbling an Event" click here.