Developing an ASP.NET AJAX Server Centric Based Mini Blog System - Part 1
page 8 of 9
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 44352/ 124

Designing the Home Page - Index.aspx

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">-&gt;</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>:&nbsp;&nbsp;<%# 
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&gt;&gt;" PrevPageText="&lt;&lt;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]


View Entire Article

User Comments

Title: Khabar   
Name: Sarfraz
Date: 2010-12-20 8:55:44 AM
Comment:
Hello Nice






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-11-20 7:47:27 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search