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.
