In this scenario we will use the original UserControls and
place them inside UpdatePanels on the host page. This means that no additional
work of adding any UpdatePanel is needed on the UserControls’ side.
We will get the same behavior as in the above scenario where
clicking an Employee record in the EmployeeList UserControl will cause an
asynchronous postback and a partial update to the OrderList UserControl.
The code inside the host page is as follows:
Listing 7
<%@ Page Language="C#"
AutoEventWireup="true" StylesheetTheme="Default"
CodeFile="UserControlsInsideUpdatePanels.aspx.cs"
Inherits="UserControlsInsideUpdatePanels" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<bhaidar:employeelist ID="EmployeeList1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<br />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<bhaidar:orderlist id="OrderList1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="EmployeeList1" EventName="RowSelected" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
What you will notice in the code snippet above is the
presence of the Triggers property inside the UpdatePanel. This property tells
the UpdatePanel to update its content when the control listed in the Triggers
section fires its event. In this context, when the EmployeeList event RowSelected
is fired, the second UpdatePanel that contains the OrderList UserControl shall
be updated in a partial-update fashion.
We could have also not used the Triggers property and
instead caused a refresh to the UpdatePanel programmatically as explained in the
above scenario.
The only difference between the two scenarios is that the
UserControls are left untouched and the UpdatePanels were added on the host
page. This has an advantage over the first scenario especially when it comes to
adding AJAX to already existing applications. With this scenario in hand, you do
not have to do any extra work on your existing UserControls. You only have to
add UpdatePanels into the host page. This leaves the UserControl free and
usable in any situation, even where no AJAX is required!
