In this first scenario we will place the GridViews of both
UserControls inside an UpdatePanel in such a way the UpdatePanels are placed
inside the UserControls themselves.
The EmployeeList UserControl is now as follows:
Listing 5
<%@ Control Language="C#"
AutoEventWireup="true" CodeFile="EmployeeList.ascx.cs"
Inherits="UserControls_EmployeeList" %>
<p class="title">
Select Employee to view Orders:
</p>
<p>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:GridView
ID="GridView1" runat="server"
CssClass="Professional"
HeaderStyle-CssClass="Header"
AlternatingRowStyle-CssClass="Alternating"
SelectedRowStyle-CssClass="Selected"
GridLines="None"
AutoGenerateColumns="False"
DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1"
AllowSorting="True"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
>
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="FirstName"
HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField
DataField="Country" HeaderText="Country" SortExpression="Country" />
</Columns>
<SelectedRowStyle CssClass="Selected" />
<HeaderStyle CssClass="Header" />
<AlternatingRowStyle CssClass="Alternating" />
</asp:GridView>
<asp:SqlDataSource
ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT TOP 5 [EmployeeID], [FirstName], [LastName], [Country]
FROM [Employees]"
/>
</ContentTemplate>
</asp:UpdatePanel>
</p>
The OrderList UserControl is as follows:
<%@ Control Language="C#"
AutoEventWireup="true" CodeFile="OrderList.ascx.cs"
Inherits="UserControls_OrderList" %>
<asp:Panel ID="pnlTitle" runat="server" Visible="false">
<p class="title">
Orders for Employee ID <b><%= this.employeeID %></b>:
</p>
</asp:Panel>
<p>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView
ID="GridView1" runat="server"
AllowSorting="True"
AutoGenerateColumns="False"
DataKeyNames="OrderID"
CssClass="Professional"
HeaderStyle-CssClass="Header"
AlternatingRowStyle-CssClass="Alternating"
SelectedRowStyle-CssClass="Selected"
GridLines="None"
DataSourceID="SqlDataSource1"
>
<Columns>
<asp:BoundField
DataField="OrderID" HeaderText="OrderID"
InsertVisible="False" ReadOnly="True"
SortExpression="OrderID" />
<asp:BoundField DataField="CustomerID"
HeaderText="CustomerID" SortExpression="CustomerID" />
<asp:BoundField
DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" />
<asp:BoundField
DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" />
</Columns>
</asp:GridView>
<p>
</p>
<asp:SqlDataSource
ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT TOP 5 [OrderID], [CustomerID], [OrderDate], [ShipCountry]
FROM [Orders] WHERE ([EmployeeID] = @EmployeeID)"
OnSelecting="SqlDataSource1_Selecting">
<SelectParameters>
<asp:Parameter DefaultValue="-1" Name="EmployeeID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
To start with, let us discuss how this scenario will work.
The Employee’s GridView in the EmployeeList UserControl is placed within an
UpdatePanel which means any postback that will be fired within the UpdatePanel
will be an asynchronous postback and a part-update will be done.
In the event handler of the host page, we will add a call to
the Update method of the UpdatePanel located inside the OrderList UserControl.
Since the host page caused a partial-update to the EmployeeList we need a way
to tell the host page to cause a partial-update to the OrderList UserControl to
reflect the changes in the OrderList GridView.
First of all we expose the UpdatePanel located inside the
OrderList UserControl so that the host page can force a partial-update on the
OrderList UserControl.
The event handler in the host page now looks like Listing 6.
Listing 6
protected void EmployeeListajax1_RowSelected(object sender,
RowSelectedEventArgs e)
{
// bind the OrderList with the EmployeeID selected
this.OrderListajax1.BindData(e.EmployeeID);
// Force a partial-update
this.OrderListajax1.AjaxPanel.Update();
}
Notice the call to the Update method of the UpdatePanel
located inside the OrderList UserControl. One important note pops up here is
that to be able to call the Update method of the UpdatePanel, the UpdatePanel
should have the UpdateMode set to Conditional!
In the above scenario we have seen how to enable the
application with AJAX by placing the UpdatePanels inside the UserControls
directly. Notice that the UpdatePanels in both UserControls are using the same
ScrpitManager that is placed on the host page.