Pass Data From User Control to Parent Page, Using Events and Delegates in ASP.Net

Using web user controls is quite a common approach in developing web applications. While using them, we often get into a situation where we need to pass some kind of data from the user control to the parent page, when any operation is performed on the user control. For example, we may need to pass data, on an OnClick event of a button on the user control, to the parent page. In order to do that, delegates are one of the most helpful ways of doing this. Being a very common requirement, I decided to discuss this requirement as an article.

Our example will consist of a Default.aspx page and ChildControl.ascx user control. This user control will have a button with an OnClick event attached to it. On the click of this button, we will send the current datetime to the parent page. So for the initial setup, add a button on the user control and place the user control on the page.

Consider a real-life example of when a user visits a website and subscribes to their emails for newsletters, notifications or events and so on. When a newsletter is published or some event happens on the website, the user gets an email notification of it. The case here is similar. Our logic must be, to notify the parent page that some action has been performed by the user control. For this, our page must subscribe or attach itself to the user control, using some kind of mechanism. This mechanism, in our case will be the events. So let's write the code now.

Step 1: Create a delegate on the user control, that can encapsulate a method that takes no input and returns a DateTime type. Also, declare an event on the user control, that is of the delegate type that we created.

declare an event

Step 2: Our main page will subscribe to the event that we created on the user control, to get notification of when the event is fired on the user control.

event fired on the user control

Step 3: Next, when the button click functionality is done, we explicitly execute the event by calling the GetDataFromChild event, passing the required data.
 
execute the event

Step 4: Run the application and click the button. On the clicking of the button, when we make the explicit call to the event from the user control, the parent page receives the notification through the ucChild_GetDataFromChild method.

call event from the user control

How it works

Now that we have successfully created the sample application, let's discuss how this actually works. To start with, we used the combination of event and delegates. We create a delegate of type ChildControlDelegate and an event of the same type, on the user control. Our parent page attaches itself to this event. Whenever the user control finishes its task on button click, it executes the event by calling the GetDataFromChild method and the main page receives the notification in a method named ucChild_GetDataFromChild.

As shown by the example at the start of the article, when a user subscribes to a newsletter on any website, he gets the notification emails of it. The same is the case here.

An important point to note here is that when we attach the event on the parent page (using += syntax), it is like we are actually adding a method, that this event will execute when it is fired. This method is added using a delegate. It basically acts as a receiver for the parent page. So whenever we explicitly call the event from the user control, using the GetDataFromChild(DateTime.Now) statement, the default page will invoke the receiver method on it (that in this case is ucChild_GetDataFromChild ) to receive the results from the user control.
So this was how to pass data from a user control to the parent page. I hope you enjoyed reading it.


Similar Articles