SIGN UP MEMBER LOGIN:    
ARTICLE

Event Driven Programming with User Control

Posted by Subhendu De Articles | Current Affairs December 15, 2010
In this article, I will discuss how to use delegates and events.
Reader Level:
Download Files:
 


Before reading this document, I suggest you read the following two articles


In this article, I will discuss how to use delegates and events. I will start with following figure
custom.gif

Generally if we create a usercontrol, we create an event and subscribe to the event in our aspx page. To simplify, I will create one page that consists of two usercontrols. One usercontrol consists of a list of categories and a button. Another usercontrol consists of a gridview to show the list of products related to selected category. We can do this in one page but to make you understand, I took this simple example and segregated it into two usercontrols.

I prefer to use dbml class for data access which will generate all the entities from database quickly. So I took Northwind database and Categories/Products table.

What we want to deliver is, user selects category from dropdownlist and click the button and it will show the list of products under the category in gridview. The important point is how we wire up these two usercontrols and make them communicate between each other.

Let's create first usercontrol.

The ascx code would be very simple like following

<table>
<
tr>
<
td align="left">Select Category </td>
<td align="left">
<asp:DropDownList ID="ddlCategory" runat="server" AppendDataBoundItems="True">
<asp:ListItem Value="-1">Select</asp:ListItem>
</asp:DropDownList>
</
td>
<
td align="right"><asp:Button ID="btnShow" runat="server" Text="Show Products"  onclick="btnShow_Click" /></td>
</tr>
</
table>

Come to code-behind for this.

First we will create one property that will get/set the list of categories.

// Property to hold all the list of Categories
public IList<Category> ListOfCategory { get; set; }

Then we set the Category dropdownlist with this property on Page_Load event.

protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    this.ddlCategory.DataSource = ListOfCategory;
                    this.ddlCategory.DataTextField = "CategoryName";
                    this.ddlCategory.DataValueField = "CategoryID";
                    this.ddlCategory.DataBind();
                }
            }
            catch (Exception exc)
            {
                Response.Write(exc.Message);
            }
        }


As in the code, if we set the ListOfCategory property and call the Page_Load method, the dropdownlist box will be filled with a list of categories.

Now the button click event. We will write one delegate, an event of type delegate and publish this event on the button_click event. This will cause to bind any method outside of this usercontrol but the prerequisite is to maintain the same method signature like defined delegate. Also before writing delegate, we will write a custom EventArgs class which will hold the selected category.

public class SelectedCategoryEventArgs:EventArgs
{
        public int SelectedCategory { get; set; }
        public SelectedCategoryEventArgs(int selectedCategory)
        {
            SelectedCategory = selectedCategory;
        }
}


Next, we declare the delegate and an event of defined delegate type

public delegate void _delegateShowProducts(object sender,SelectedCategoryEventArgs e);
public event _delegateShowProducts OnShowProducts;

After that, we publish this event on button_click event

protected void btnShow_Click(object sender, EventArgs e)
        {
            try
            {
                OnShowProducts(this, new SelectedCategoryEventArgs(Convert.ToInt16(this.ddlCategory.SelectedValue)));
            }
            catch (Exception exc)
            {
                Response.Write(exc.Message);
           }
        }

That's it. We have completed the implementation of the first usercontrol.

Now, we will create the second usercontrol consisting of a gridview only, which will show the list of products based on selected category.

The ascx code would be very simple like

    <asp:GridView ID="grdProducts" runat="server">
    </asp:GridView
>


The code-behind will contain one property which helps to get/set the list of products.

public IList<Product> ListOfProducts { get; set; }

Next, we will define one method which will bind the ListOfProducts property with the gridview.

public void ShowProducts()
        {
            try
            {
                this.grdProducts.DataSource = ListOfProducts;
                this.grdProducts.DataBind();
            }
            catch (Exception exc)
            {
                Response.Write(exc.Message);
            }   
        }

That's it. We have completed the implementation of the second usercontrol.

Next task is to put these two usercontrols in an aspx page. So the aspx code looks like

<body>
    <form id="form1" runat="server">
    <div>
    <uc1:ucCategorySelection ID="ucCategorySelection1" runat="server" />
    </div>
    <hr />
    <div>
    <uc2:ucShowProducts ID="ucShowProducts1" runat="server" />
    </div>
    </form
>
</body>

After that, we need to wire up two usercontrols. We will subscribe to the event defined in button_click event of the first usercontrol with a method defined in second usercontrol using following code

ucCategorySelection1.OnShowProducts+=new UserControls.ucCategorySelection._delegateShowProducts(ucCategorySelection1_OnShowProducts);

Remember to put this delegate declaration in the page_load event so that everytime it will subscribe with the method.

The method that is called by eventhandler, would contain following code

public void ucCategorySelection1_OnShowProducts(object sender,SelectedCategoryEventArgs e)
        {
            try
            {
                using (NorthwindDataContext _context = new NorthwindDataContext())
                {
                    var query = from _product in _context.Products
                                where _product.CategoryID == e.SelectedCategory
                                select _product;

                    IList<Product> _products = query.ToList<Product>();
                    ucShowProducts1.ListOfProducts = _products;
                    ucShowProducts1.ShowProducts();
                }
            }
            catch (Exception exc)
            {
                Response.Write(exc.Message);
            }
        }


In the above code, we are getting the selected category from SelectedCategoryEventArgs class and pass this categoryID in LINQ to SQL query to get the list of products. Then we set the ListOfProducts property to set the list of products and call the ShowProducts methods which will bind the gridview.

Next task is to set the list of category. We will use following code

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                using (NorthwindDataContext _context = new NorthwindDataContext())
                {
                    var query = from _category in _context.Categories                               
                                select _category;

                    IList<Category> _categories = query.ToList<Category>();
                    ucCategorySelection1.ListOfCategory = _categories;
                }
            }
        }

The above code will bring list of categories and set it through ListOfCategory property.

That's it. We are done. In summary, we are getting list of categories which we set through a property. Now at first usercontrol's page_load event, the category dropdownlist populates.
Then when we click on button, an eventhandler associated with the event will fire, which brings the list of products and bind the product list with gridview.

In the above example, you never find any dependency in the code. In order to run the example, you need to have SQL Server Northwind database in your machine and update the web.config with your connectionstring.

<connectionStrings>
        <
add name="NorthwindConnectionString" connectionString="Data Source=.\sqlexpress;Initial Catalog=Northwind;Integrated Security=True"
            providerName="System.Data.SqlClient" />
    </connectionStrings>

Login to add your contents and source code to this article
share this article :
post comment
 

Thanks for this article , i really enjoyed reading it .

Posted by Hassan Humayun Dec 16, 2010
Nevron Gauge for SharePoint
Become a Sponsor
PREMIUM SPONSORS
  • Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
    Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor