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:

EmployeeList.ascx

OrderList.ascx

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
{
  add
  {
    base.Events.AddHandler(EventRowSelected, value);
  }
  remove
  {
    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;
  #endregion
 
  #region Constructor
  public RowSelectedEventArgs(int employeeID)
  {
    this.employeeID = employeeID;
  }
  #endregion
 
  #region Properties
  public int EmployeeID
  {
    get
    {
      return this.employeeID;
    }
  }
  #endregion
}

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
  this.OrderList1.BindData(e.EmployeeID);
}

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!!