Now that Figure 1 gives you the running-time snapshot of the
homepage index.aspx, let us continue to look at its related design-time
snapshot as is shown in Figure 8.
Figure 8: The design-time snapshot of page Index.aspx
As is easily seen from Figure 8, the left sub panels correspond
to several ASP.NET 2.0 DataList controls with associated data attached to them
at the running time. When you click the "Login" button you will be
navigated to page Login.aspx. The "Blogs" panel shows to the surfers
all the existing blog categories while the "Comments" panel indicates
all the possible comments made to related blog articles. The "Favorite
Links" panel shows the current blog host's interested favorite blog
hyperlinks. The "Leave a word" under panel "About Me" will
lead you to the page Message.aspx for you to leave a possible word to the
current blog host which will be detailed in the third part of the article.
Now, let us focus on the AJAX related topics in this page. In
fact, as you may have guessed, when the user clicks the left hyperlinks the
right part will present to you the related contents, which is a typical case to
put into use the ASP.NET AJAX server control UpdatePanel so as to achieve the
partial updating effect in the asynchronous way.
The following Listing 4 gives the related pieces of HTML
mark code.
Listing 4: The interesting UpdatePanel related HTML
mark code in the homepage
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:datagrid id="NewsList" runat="server" PageSize="20"
AutoGenerateColumns="False"
HorizontalAlign="Center" AllowPaging="True"
OnPageIndexChanged="Get_Page" Width="98%" CellPadding="0"
BorderColor="Maroon" BorderStyle="Solid" BorderWidth="2px">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<a href="Index.aspx"
style="font-size:xx-large">Home</a>
<span style="font-size:xx-large">-></span>
<a href="#" style="font-size:xx-large">
<%= Request.QueryString["name"]%></a>
</HeaderTemplate>
<ItemTemplate>
<table width="98%" border="0">
<tr>
<td colspan='2' >
<div >
<a href='<%# DataBinder.Eval(Container.DataItem, "ST_n_id") %>.aspx'>
<%# DataBinder.Eval(Container.DataItem, "ST_n_key")%></a></div>
</td>
</tr>
<tr>
<td colspan="2"><b>Abstract</b>: <%#
DataBinder.Eval(Container.DataItem, "ST_n_id")%>
</td>
</tr>
<tr >
<td align="right"
colspan="2">[<a href='<%#
DataBinder.Eval(Container.DataItem, "ST_n_id")
%>.aspx'>Click and Read</a>]
Read:[<%#
DataBinder.Eval(Container.DataItem, "ST_n_hit")%>]
Comment:[<%#
DataBinder.Eval(Container.DataItem, "ST_n_re")%>]
Time:[<%#
DataBinder.Eval(Container.DataItem, "ST_n_date")%>]</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle NextPageText="next>>" PrevPageText="<<prev"
PageButtonCount="20" Mode="NumericPages"></PagerStyle>
</asp:datagrid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClassList" EventName="ItemCommand" />
<asp:AsyncPostBackTrigger ControlID="ClassList"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
First, you should notice that the UpdateMode property of
control UpdatePanel "UpdatePanel1" is set to "Conditional."
As you have found at the end, this UpdatePanel control owns two AsyncPostBackTrigger
triggers which correspond to the two events (ItemCommand and SelectedIndexChanged)
of DataList control "ClassList."
Next, since the trivial inner contents of the DataList
control is purely ASP.NET related issues and not complex to grasp, it is not
worthy to be discussed in detail any more.
Downloads
[Download
Sample]
