Tuesday, December 9, 2008

Passing Values between user controls using Events and Delegates


Always there comes a requirement where we developers need to pass values to between different user controls which are parts of a webpage or even sometimes there comes a requirement where we need to pass values from user control to the container page.
The job is easy when we have to pass values which are there on the user controls by exposing the value fields as properties of the user control. However it is challenging when on certain event the values should get passed.


The simplest solution to this situation I found is to handle this by use of events and delegates. Let me explain the solution with one simple example.
For example on a content page I am having two user controls e.g. UC1 and UC2. Contents of UC1 are:
1. List box having list of States
2. List box having list of Cities in the State (Pre-condition: User selects State from ListBoxStates and respective cities in the selected state gets populated in the ListBoxCities)
3. Button control, which will be used for confirming the user’s selections. Let us name it as btnSelect.
Contents of UC2 are:
1. List of selected cities from UC1. Let us name it as ListBoxSelectedCities.
Our requirement is whenever user selects (multiple) cities from ListBoxCities and clicks on btnSelect in UC1 then the selected cities should get populated in ListBoxSelectedCities in UC2.

In UC1, we need to declare the following objects:

public delegate void PassSelectedValues(string[] selectedCities);

public event PassSelectedValues citiesSelected;

Now in UC1 from the button click event we can raise citiesSelected event, delegate of which will carry the required values which we need to pass in between UC1 and UC2. In button click event we have to create the list of selected cities from ListBoxCities and we have to raise the citiesSelected event like this:


Here selectedCities is an array of strings which we have to create by looping through the ListBoxCities.

We have to declare a public property in UC2 which can be used to set the ListBoxSelectedCities. For example in UC2:

public string[] SelectedCitiesList




ListBoxSelectedCities.DataSource = value;




In the content page we have to declare the event handler for the event (citiesSelected) which we have raised from UC1. Thus in content page on page load we have to declare the handler of this event like this:

UC1.citiesSelected += new citiesUserControl.PassSelectedValues(passValuesHandlerMethod);

This handler method in the content page should have the same signature as of the delegate’s signature defined in UC1.

protected void passValuesHandlerMethod(string[] selectedCities)



Now from this method we can pass the value coming from UC1 to UC2 like this:

protected void passValuesHandlerMethod(string[] selectedCities)


UC2.SelectedCitiesList = selectedCities;


In this way whichever values we are selecting in UC1 will get passed to UC2.


In this article we have seen that how to pass values between different user controls on a webpage using events and delegates. Same concept can be applied for passing value from user control to the content page.

Hope this will help everyone in handling their cases.