Delving Deeper into Constructing ASP.NET AJAX-based Applications

(Page 1 of 4 )

In the previous article we started our examination of three patterns for constructing ASP.NET AJAX-based applications. We were just starting to "ajaxify" JSSK. In this article we continue our exploration of these three patterns.

---

A downloadable .rar file is available for this article.

---

Using the UpdatePanel Server Control to Update Partially

The UpdatePanel server control holds the functions of updating asynchronously and locally posting back, which is pretty suitable for reconstructing a legacy ASP.NET 2.0 application. For more about it please refer to the online tutorials. Here, let's delve into some related parts for rebuilding JSSK using UpdatePanel.

1. Reconstructing the Navigator Tree

The navigator tree, as one of the most frequently-accessed controls, serves as the control center to dispatch each function of JSSK. There are two distinct cases to be considered here: one, there is no need to ajaxify the leaf nodes. Here each of the leaf nodes is associated with another page (such as Login.aspx, PostResume.aspx, etc. ) through a hyperlink; thus, when users click one of the them a whole page post back will be triggered. Since we don't plan to reconstruct the whole architecture of the web site, we choose not to ajaxify the leaf nodes.

As to the second point, the non-leaf nodes, such as Main Options, Job Seekers, Employers, and so forth, however, need to be rebuilt using the UpdatePanel control since each of them is only in relation to the ASP.NET TreeView control while clicking them will still result in a meaningless post back, which obviously provides a poor user experience.

The solution is simple -- enclose the navigator tree with UpdatePanel. Just open the user control NavigationTree.ascx and put this idea into action, as follows:

 

<asp:UpdatePanel ID="navUp" UpdateMode="Conditional" runat="server">

   <ContentTemplate>

     <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1"

       NodeIndent="5" ShowLines="True" OnDataBound="TreeView1_DataBound" OnDataBinding="TreeView1_DataBinding"

       OnTreeNodeDataBound="TreeView1_TreeNodeDataBound">

       <DataBindings>

         <asp:TreeNodeBinding DataMember="TopMenu" Value="Options" Text="Menu Options"></asp:TreeNodeBinding>

         <asp:TreeNodeBinding DataMember="Login" NavigateUrlField="url" Value="Login" Text="Login">

         </asp:TreeNodeBinding>

         //...(omitted)

       </DataBindings>

     </asp:TreeView>

     <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/UserControls/NavigationTree.xml">

     </asp:XmlDataSource>

   </ContentTemplate>

</asp:UpdatePanel>

 

Note that the navigator tree is completely "static." Therefore, there is no need to update it when the rest of the UpdatePanel controls in the web site are to be refreshed. And thus, we set the Mode property of this UpdatePanel herein to Conditional -- only this tree itself triggers a post back that can be updated, which drastically decreases the unnecessary network traffic and improves the user experience.

2. Ajaxifying page postresume.aspx

Job seekers can modify their resumes on the postresume.aspx page and save the modification into the server-side database by clicking the "Save" button below. The initial page looks like Figure 2.

Figure 2-the pre-modified snapshot for page postresume.aspx.

Here, when the job seeker clicks the "Save" button a whole page post back will be triggered. However, the factually changed parts are merely the one line of prompt message just below the two buttons, which tremendously wastes the network bandwidth and leads to unavoidable flickering.

Now, with the analysis above, we can enclose this ASP.NET Label control that is used to show the prompt message with an UpdatePanel control and set its trigger to the "Save" button above so as to gain a much smoother asynchronous post back. The following is the related modified code snippet:

 

<asp:UpdatePanel ID="up1" runat="server">

   <Triggers>

     <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />

   </Triggers>

   <ContentTemplate>

     <asp:Label ID="lblMsg" runat="server" SkinID="FormLabel"></asp:Label>

   </ContentTemplate>

</asp:UpdatePanel>

 

Here, the two objects, namely the "Save" button and the "lblMsg" label, are bound together. When the "Save" button is clicked the contents within the < ContentTemplate > block will be updated. Now you can register with the web site using the "alok" name (the job seeker role) to appreciate the ajaxified locally updating experience.

Next: Using the UpdateProgress Server Control to Indicate Updating Progress >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Delving Deeper into Constructing ASP.NET AJAX-based Applications

>>> Be the FIRST to comment on this article!