12.4. Adding AJAX to the Web Parts Page
The next step will be to add AJAX capabilities to the page that was just built. This example lessens the amount of data going back and forth between the client and the server, it will also remove the flicker that happens with pages that are not using AJAX capabilities.
The first step is to add your ScriptManager server control to the page and then encapsulate much of the Web Part capabilities inside of the UpdatePanel control. This approach is illustrated in Listing 12-3.
Example 12-3. Incorporating AJAX capabilities into a page with Web Parts
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
<%@ Register Src="HelloUser.ascx" TagName="HelloUser" TagPrefix="uc1" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack){
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = "You selected " + Calendar1.SelectedDate.ToShortDateString();
}
protected void LinkButtonBrowse_Click(object sender, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}
protected void LinkButtonDesign_Click(object sender, EventArgs e)
{
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Parts with AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<asp:LinkButton ID="LinkButtonBrowse" runat="server"
OnClick="LinkButtonBrowse_Click">
Browse</asp:LinkButton>
<asp:LinkButton ID="LinkButtonDesign" runat="server"
OnClick="LinkButtonDesign_Click">
Design</asp:LinkButton>
<table>
<tr valign="top">
<td colspan="2">
<h1>Bill Evjen's Web Page</h1>
</td>
</tr>
<tr valign="top">
<td>
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server"Title="Select a date"
OnSelectionChanged="Calendar1_SelectionChanged">
</asp:Calendar>
<asp:Label ID="Label1" runat="server"
Title="Selected Date:"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<uc1:HelloUser ID="HelloUser1" runat="server"
Title="Entry Form" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html> |
When looking over the code from Listing 12-3, you can see that there are now two managers. There is a manager for the AJAX capabilities on the page (the ScriptManager control) and then there is a manager for the Web Parts capabilities (the WebPartManager control).
It is important that the WebPartManager server control is contained within the ScriptManager control. The WebPartManager manages the movement of the Web Parts and the WebPartZone controls as well. If you do not put the WebPartManager control directly inside an UpdatePanel server control, you won't be able to move parts when in the Design mode.
With the code from Listing 12-3 in place, when the page is first loaded, there are scripts called for AJAX in addition to the other calls. This is illustrated here in Figure 12-7.
Figure 12-7. Figure 12-7
With the AJAX capabilities built into the page, you will now be able to work with the Web Parts and to move them around the page with very few annoyances from an end user perspective. There is no flicker for the page as the entire page contents is encased within that UpdatePanel control.