Build an AJAX Based ASP.NET Web Tag Application - Part 2
page 1 of 12
Published: 05 Nov 2008
Abstract
In this second part of the series, Xianzhong delves deeper into the system design and implementation of the web tag application, which involves all the web tag related functions with the help of relevant source code and screenshots. He examines the different ways of web tag manipulation, such as displaying and moving the web tag category list, moving and removing a web tag, as well as adding, removing and modifying a web tag Category. Towards the end of the article he also examines how to add and modify a new web tag.
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 41420/ 141

Displaying the Web Tag Category List

To gain a more intuitive reference, let us again take a look at the running time snapshot of the main and only page (Default.aspx) in this system.

Figure 1 - One of the running time snapshots of the web tag page

As shown above, the web tag category list is shown on the left, where users can click one of the categories to see relevant tag info on the larger right part.

On the whole, it takes two steps to accomplish the aim of displaying the tag category list:

1.    Author the server-side page ListSection.aspx, whose functionality is inquire the section data table, and then compose the HTML code with the returned data.

2.    On the client side, use the JavaScript code to manipulate the XMLHttpRequest object to trigger the request to page ListSection.aspx, and then use the returned HTML data to render the tag category list on the page.

Next, let us take a look at the behind-code for page ListSection.aspx, as is shown in Listing 1.

Listing 1 - The behind-code for page ListSection.aspx

protected void Page_Load(object sender, EventArgs e)
{
    Database db = DatabaseFactory.CreateDatabase("DatabaseConnectionString");
    string sqlCommand = "SELECT id,name,[order] FROM section ORDER BY [order]";
    DbCommand dbCommand = db.GetSqlStringCommand(sqlCommand);
    StringBuilder readerData = new StringBuilder();
    using (IDataReader dataReader = db.ExecuteReader(dbCommand))
    {
        readerData.Append("<ul id=\"section_list\">");
        while (dataReader.Read())
        {
            readerData.Append("<li id=\"");
            readerData.Append("li_" + dataReader["id"]);
            readerData.Append("\">");
            readerData.Append(dataReader["name"]);
            readerData.Append("</li>");
        }
        readerData.Append("</ul>");
    }
    Response.Write(readerData.ToString());
 
}

Considering that there are generally not many tag categories and the HTML code required by the tag list is also simple, herein we have directly used the connecting string mode to output the result string. Apparently, this solution only applies to cases most like this. However, if the page contents to render are rather complex, it would be better to fall back upon the XSLT transformation solution. In later examples we will discuss this kind of method.

Let us continue to look at the possible returned HTML code by page ListSection.aspx (note the factual rendering contents do not contains the ENTER and SPACE chars).

Listing 2

<ul id="section_list">
      <li id="li_5">Java</li>
      <li id="li_1">Ajax</li>
      <li id="li_3">ASP</li>
      <li id="li_6">Ruby</li>
      <li id="li_7">JavaScript</li>
</ul>

Next, let us take a look at the client-side implementation. As is mentioned above, the client side will send out requests to page ListSection.aspx in the Ajax mode, and then render the returned data onto the web page. On the client side, we use a <div/> element with id being "sections" to hold and display the tag category list. Listing 3 indicates the crucial piece of code.

Listing 3 - Sending Ajax request and rendering the tag category list

var ajax = new Ajax.Request("ListSection.aspx", {onComplete: InitSection});
 
function InitSection(xmlhttp) {
  // Show tag category list
  $("sections").innerHTML = xmlhttp.responseText;
……

The code above used the "Ajax.Request" class provided by the Prototype framework. Herein, the "Ajax.Request" class sends an Ajax request to page ListSection.aspx. And if the call succeeds, the callback function"'OnComplete" is triggered, which in turn will invoke another function, InitSection, to append the returned data to the tag category list related <div/> element. That is it.

Next, let us discuss how to move the web tag category related items.


View Entire Article

User Comments

Title: Thanks   
Name: Cong Doan
Date: 2009-04-13 11:17:25 AM
Comment:
Thanks for your Article! It's wonderful!






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


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-06-25 10:08:43 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search