Tips and Tricks: ASP.NET AJAX 1.0 and User Controls
page 3 of 10
by Bilal Haidar
Average Rating: 
Views (Total / Last 10 Days): 51549/ 93

Life without AJAX

To start with we will create a new ASP.NET AJAX-Enabled Web Site by selecting a template that has been added to your Visual Studio Templates upon the installation of the Microsoft ASP.NET 2.0 AJAX 1.0 Extensions. You can refer back to Figure 1 below to see how to select the right template.

Figure 1: Selecting ASP.NET AJAX-Enabled Web Site template

The reason behind creating a new website based on the above template is that the ASP.NET Web Application’s configuration file will have all the sections required to run AJAX successfully.  This way you will save some time trying to add all the seconds required.

In this first version of the application, we will develop two User Controls:



Before discussing the functionality of the above two UserControls, you will need to have on whatever version of Microsoft SQL Server that you are using and the Northwind database that was part of the Microsoft SQL Server 2000. If you already do not have it, you can visit the URL below and download it from there.

Northwind and pubs Sample Databases for SQL Server 2000

The EmployeeList.ascx UserControl will show a GridView listing all of the employees found in the Employees data table present inside the Northwind database.

The OrderList.ascx UserControl will show the Orders done by a specific Employee upon clicking on an employee record in the first UserControl’s GridView.

The EmployeeList UserControl will include a custom event called RowSelected. The host page will subscribe to this event so that it will be able to force a refresh on the OrderList, UserControl and show the orders done by the Employee selected.

The event is defined inside the EmployeeList UserControl.

Listing 1

// Define my event using the new Generic EventHandler delegate
private static readonly object EventRowSelected = new object();
public event EventHandler < RowSelectedEventArgs > RowSelected
    base.Events.AddHandler(EventRowSelected, value);
    base.Events.RemoveHandler(EventRowSelected, value);
protected virtual void OnRowSelected(RowSelectedEventArgs e)
  EventHandler < RowSelectedEventArgs > handler = (EventHandler <
    RowSelectedEventArgs > )base.Events[EventRowSelected];
  if (null != handler)
    handler(this, e);

As you can see, the event above is making use of the new Generic Delegate Declaration and a RowSelectedEventArgs that will hold the EmployeeID of the row that is selected. The EmployeeID will be retrieved by the event handler located on the host page then pass it to the OrderList UserControl. The RowSelectedEventArgs class is defined below.

Listing 2

public class RowSelectedEventArgs: EventArgs
  #region Members
  private int employeeID =  - 1;
  #region Constructor
  public RowSelectedEventArgs(int employeeID)
    this.employeeID = employeeID;
  #region Properties
  public int EmployeeID
      return this.employeeID;

The OrderList and UserControl include a BindData method that takes as input the EmployeeID and calls the Select method of the SqlDataSource placed on the UserControl itself. The code is as follows:

Listing 3

public void BindData(int employeeID)
// Set the employeID members
  this.employeeID = employeeID;
  ViewState["EmployeeID"= this.employeeID;
// Show the title Panel
  this.pnlTitle.Visible = true;
// Force a select for the SqlDataSource
  this.SqlDataSource1.Select(new DataSourceSelectArguments());
// Refresh the GridView
  this.GridView1.DataSourceID = "SqlDataSource1";

The main role this entire process is for the event handler that is placed inside the host page. This event handler will be fired upon selecting a row in the EmployeeList UserControl’s GridView. Internally, the GridView will fire the SelectedIndexChanged event and within the SelectedIndexChanged event handler a new instance of the RowSelectedEventArgs is populated with the EmployeeID of the row selected and a call to the RowSelected event delegate is issued to fire the event handler placed on the host page.

Listing 4

protected void EmployeeList1_RowSelected(object sender, RowSelectedEventArgs e)
  // bind the OrderList with the EmployeeID selected

As you can see, the sole idea of this handler is simply to fire a call to the OrderList UserControl’s BindData method passing in the EmployeeID.

Figure 2 below shows the two UserControls state after an Employee record has been selected.

Figure 2: Employee selected and Orders shown


That was straight forward and nothing new in here!  Let us now start adding some AJAX!!

View Entire Article

User Comments

Title: very nice   
Name: Serif Emek
Date: 2009-07-28 5:32:09 PM
That is just what I was looking for.
Title: Re: Vbman   
Name: Bilal Haidar [MVP]
Date: 2008-03-27 10:38:17 AM
Try to show me the code behind of the usercontrol and how you are setting it on the page!

Title: Object reference not set to an instance of an object.   
Name: Vbman
Date: 2008-03-27 10:05:40 AM
Great Article!
I have the update panel on the page and the user controls inside the update panel.
I create a property inside the usercontrol that accesses a control, Say the gridviews Tooltip or Pagesize or ...
When I try to set the property on page declaratively I get an error:
Object reference not set to an instance of an object.

I've seen this problem posted in other places but no solution.
Have you run into this and do you have a work around.

Title: Re:   
Name: Bilal Haidar
Date: 2007-10-30 10:43:12 AM
You can use this converter:

Title: VB.Net   
Name: Jo
Date: 2007-10-30 5:51:05 AM
Article is so good. If it is available in also it will be helpful for the beginners.
Title: Well explained   
Name: Jose
Date: 2007-08-09 4:44:16 AM
As usual, you did a great job!

I loved the fact that you showed all the possible combinations you can have with a gridview user control and AJAX. And the sample works really fine!

Title: Great   
Name: Mark W
Date: 2007-06-25 9:24:07 PM
Very well summarized, thanks. I agree, good use of events and generics.

Also, there's a small typo in Listing 5: OrderList UC's UpdatePanel ID should be 'AjaxPanel'.
Title: Nice one   
Name: Wesley Bakker
Date: 2007-06-24 4:32:51 AM
Nice article. Decent use of events, AJAX, generics, datasourcecontrols etc. etc.


Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-23 6:18:15 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search