ASP.NET AJAX framework provides us with two types of
patterns to build richer, more interactive, standards-based Web 2.0
applications: the server-centric programming model and client-centric one, with
each holding its own advantages and disadvantages. According to Dino
Esposito, "For now, however, the best way out is to implement AJAX through the UpdatePanel control." For now, we are suggested to follow the
server-centric programming model to develop ASP.NET AJAX based applications. After
more than two years of researching into the ASP.NET AJAX framework, I greatly
approve of his viewpoint. The server-centric programming model enables you to
“…modify existing pages at your convenience. Also, it's unobtrusive and doesn't
require you to learn many new things before starting.”
In contrast, although the ASP.NET AJAX Client-Centric
provide cross-browser richer and more interactive user experience, developers
have to spend plenty of time to grasp multifold related techniques of both the
server side and the client side. Especially Visual Studio 2005, but even the
newest Visual Studio 2008 has not provided better support for the client-side
xml-script declarative programming mode, which in some degree adds the
difficulty in writing the xml-script code.
In this series (3 articles), I will try to show you how to
follow the ASP.NET AJAX server-centric programming model to develop a mini blog
system under ASP.NET 2.0 environments. In this first installment of this
series, we are going to focus upon the general design related issues, while in
the second part we are to construct the backend system around the manager
management, and in the last part to discuss the common user related things as
well as conclude the crucial techniques and skills utilized in the blog system.
A weblog, sometimes written as web log or Weblog, often has
the quality of being a kind of "log of our times" from a particular
point-of-view. It is the fourth important means of intercourse by internet in
succession to e-mail, BBS, and ICQ (IM). Generally, weblogs are devoted to one
or several subjects or themes, usually of topical interest, and, in general,
can be thought of as developing commentaries, individual or collective on their
particular themes. A weblog may consist of the recorded ideas of an individual
(a sort of diary) or be a complex collaboration open to anyone. Most of the
latter are moderated discussions.
In this mini blog sample application presented to you, the theme
is mainly limited to computer associated topics (of course you can alter it on
you own cases). And for brevity, we have not provided the reverse chronological
order based post classification, while merely accomplished a category based
OK, before delving into the inner workings of the mini blog
system, let us first take a quick look at the several main running time
snapshots of it to gain a more intuitionistic and clearer understanding.
The testing environment and tools used in this article are
Windows XP Professional (with IIS 5.1 installed)
Visual Studio 2008 (with the built-in support for ASP.NET AJAX
SQL Server 2005
ASP.NET AJAX Control Toolkit
Therefore, to gain a better understanding with the mini blog
website project provided in this article, you are required to be familiar with
ASP.NET 2.0/3.5 C# programming, SQL Server programming, and ASP.NET AJAX framework. In addition, you are highly recommended to download the source
files accompanying this article (see the download URL at the end). Last but not
least, for the convenience of those still under the Visual Studio 2005
environment, I tried to utilize the ASP.NET 2.0 compatible controls though I have
developed this sample application under Visual Studio 2008. So, with a little
modification, you can easily get it through under Visual Studio 2005.
For brevity, we herein are going to exhibit to you only a
few of the key running-time snapshots related to the blog system. Figure 1
describes the homepage of the blog system when the administrator has not logged
in (note: for an integral view of the long page, I pieced together the key parts
of it - you can clearly catch sight of them from the red marks).
Figure 1: The homepage of the blog system
As is apparently shown, the whole interface is divided into
four parts: the top is a simple system log picture, the bottom is a typical and
common page footer, and the middle corresponds to the main part—the left panel
is classified into several typical sub control panels to better manipulate the
system and the right will indicate the detailed contents that corresponds to
the user gestures at the left panel.
It is worth noting that in real scenarios there are usually advertising
blocks left for the third-party companies, the recommended position for which
should be located in a third column to be added for you later. However, still
for brevity, we omitted them all.
In fact, Figure 1 happens to correspond to the common user
mode in this application, in which mode the user bears the ability to read the
blog articles, view the current blog associated comments left by other surfers,
navigate to the current host linked favorite hyperlinks, as well as leave a
word to the current blog host provided he or she is logged in the system.
Also, it is noted that the two important techniques
leveraged herein are updating the page in the AJAX mode (partially and
asynchronously), and url redirection for easy understanding and recollection. For
related details, please read on.
Now, let us continue to see what the interface looks like
after the administrator has logged into the system. Figure 2 gives one of the related
Figure 2: One of the running-time snapshots of the backend
management of the blog system
Note that as an administrator (and, for simplicity, the blog
host herein), you can manipulate the blog category, blog articles, comments
left by passengers, your own interested hyperlinks, and words (opinions) to the
blog host left by permitted readers, all of which are constructed under ASP.NET
2.0/3.5 environments with the help of ASP.NET AJAX components. Note that Figure
2 just relates to the blog articles management snapshot.
Note that herein we are to omit introducing the operation
flow since you will easily catch on it when we introduce the system module
Based on the fact that we are developing a demo blog system
and mainly focusing our interests upon how to make use of the ASP.NET AJAX
server-side techniques, I choose to use the simplest two-tier architecture to
build the sample rather than fall back on the three-tier or even the newest
ASP.NET MVC ones (all of which are recommended architectures in practical
As is well known, in the two-tier architecture you can
directly access the backend database in each page of the presentation tier
without implementing the individual database interface. Advantages and
disadvantages are apparent: the developing and debugging processes are greatly
simplified while the maintenance will become fussy and even more difficult.
At any rate, let us examine the two-tier architecture
applied to this mini blog system, as is depicted in Figure 3.
Figure 3: The two-tier architecture utilized in
this mini blog system
Apparently, in the two-tier module we are able to directly
manipulate the backend system via .aspx web pages (the presentation tier). In
detail, through the web pages, we can directly achieve all the operations such
as adding, modifying, or deleting the data persisted in the SQL Server
System Functionality Modules
The sample website, named AajxMiniBlog in
this article, provides different functionalities according to the corresponding
role of the users. On the whole, there are two kinds of roles in this system:
the administrator (and, for simplicity, the blog host) and the common user (any
common surfers). The former owns the right of category management, blog
management, comments management, and hyperlinks management while the common
users are assigned the rights to browse blogs and related comments, leave a
word, as well as make comments on their interested blogs.
As of now, you can clearly understand that the whole system
is easily divided into two parts from the view point of the user roles, as in
illustrated in Figure 4 and Figure 5.
Figure 4: The blog administrator modules
Figure 5: The common users related modules
With the general architecture and modules in mind, let us
roll up our sleeves to start to work. But first of all, let us dissect at the
database design and its related tables together with the relationships between
them one by one.
In this case, we will design a SQL Server database named ST_BLOG_DATA.mdf, which contains seven tables with each
taking their own responsibilities listed below.
—ST_admin for holding users info. For
simplicity we have not included the user registration module. The default
system administrator name and password are admin and 1 respectively. And also, we have not added any blog host
user info—you can add them on your own situation.
—ST_class to hold the blog
categories to facilitate the blog article management.
—ST_link to hold the hyperlinks to
other blogs that the blog host user shows interest in.
—ST_message to hold all the words
left to the current blog host by the valid users.
—ST_news to hold all the blog
articles written by the current blog host.
—ST_replay to hold comments made
to the current blog article by the valid readers.
—codetable to hold authentication
info used to distinguish the human being operations from the robot ones.
Next, to achieve a better understanding with these tables
above, I listed each of their schema definitions in table form below.
Designing the tables
The following tables give the corresponding structure
definitions and field notes of the tables mentioned above, respectively.
Table 1: Structure for table ST_admin
Can be null.
The administrator user name.
The password corresponding to ST_admin_user field above.
Table 2: Structure for table ST_class
IDENTITY (1,1) NOT NULL, Primary Key.
The auto incremental category id.
The blog category name.
Table 3: Structure for table ST_link
The auto incremental id for the hyperlink that the blog
host is interested in.
The shortened hyperlink name.
The complete url for the above hyperlink.
Table 4: Structure for table ST_message
The auto incremental id for the message that valid
The nickname of the passenger that leaves the word.
The title of the word.
The title of passenger’s homepage.
The details of the words left.
The datetime when the word was left.
Mark when the left word is replied or not in text mode.
Table 5: Structure for table ST_news
The auto incremental id for the blog article.
The author name of the blog.
The title of the blog.
The abstract of the blog.
The details of the blog.
The datetime for posting the blog.
The times of the blog read by surfers.
The times of replies for this blog.
Mark when the left word is replied or not in text string.
Table 6: Structure for table ST_replay
The auto incremental id for the comment.
The nick name of the comment.
The title of the comment.
The details of the comment.
The datetime for making the comment.
Table 7: Structure for table codetable
The field that identifies the id of the code for the
CAPTCHA verification usage.
Cannot be null. The text string to achieve the CAPTCHA
With the table schemas established, we should further familiarize
ourselves with the relationships between the tables introduced above.
Set up the Table Relationships
Figure 6 illustrates the table reference dependencies
defined inside the database ST_BLOG_DATA.mdf (I created the database diagram
inside Visual Studio Team System 2008; or you can create it using SQL Server
Figure 6: The reference relationships between the
Again, since this system is a simplified version there are
no complex reference dependencies between the above tables, but there are still
few relations between the three tables as is easily caught sight of from the
About the Common Modules
Only two points need to be noticed here: the database connection
mode and the general layout of the system.
As for the database connection, I select to directly put the
sample database under the sub-folder App_data of the website for you to more
easily debug the system. However, in real cases, the databases commonly reside
in the SQL Server side which is located at independent machines. So, the database
connection string will be different under these cases. Herein, we only consider
the above simplest situation as indicated in the config file web.config below.
Code Listing 1
<add name="ConnectionString" connectionString=
Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient" />
As for the general layout of the system, we select to
leverage the master page introduced in ASP.NET 2.0 since it is the recommended
means to construct real case projects. In our case, there are two types of
master pages: Admin.master (for backend management content pages) and OneColumn.master
(for login.aspx and Message.aspx). Moreover, for greater flexibility we have
also put into use two common ASP.NET Web forms—index.aspx and Show.aspx.
Next, let us set out for the long journey to write the mini
blog system one by one. The first part comes to you is the login system.
In this case, we have not utilized the normal and strict
ASP.NET authenticating system, but adopted a simple login means, which is accomplished
through page Login.aspx. Figure 7 gives the related design-time
Figure 7: The design-time snapshot of page Login.aspx
First, we should notice that now Visual Studio 2008 provides
the ability to add "AJAX Master Page" template directly, which
results in an ASP.NET AJAX ScriptManager control being added into the master
page. Therefore, we now (in the content page) are unable to see the control.
Next, we can see this login content page contains only a few simple ASP.NET
controls as well as two ASP.NET AJAX Control Toolkit extender controls - TextboxWatermarkExtender
(which is used to achieve the watermark effect with the TextBox control adminname) and PasswordStrength (which is used to intuitively
remind the users of the password strength of what they enter into the password
textbox control). And also, we used the simplest ASP.NET validator, RequiredFieldValidator,
to ensure the user does enter something.
Next, let us look more closely at the crucial HTML mark
code, as shown in Listing 2.
Listing 2: The key HTML mark code in page Login.aspx
<td width="50%" >
<div align="center">User Name:</div>
<td style="text-align: left">
<asp:TextBox id="adminname" runat="server" CssClass="cssUnwatermark"
<asp:RequiredFieldValidator id="rfN" runat="server"
Text="The name field cannot be empty!"
InitialValue="Please enter username here..."
<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="adminname"
Text="The name field cannot be empty!"
WatermarkText="Please enter username here...">
<td ><div align="center">Password:</div>
<td style="text-align: left">
<asp:TextBox id="adminpsw" runat="server" TextMode="Password"
style="text-align: left" Width="227px"></asp:TextBox>
runat="server" ErrorMessage="The password field cannot be empty!"
<cc1:PasswordStrength ID="PasswordStrength1" runat="server"
<asp:Label ID="Label1" runat="server" Width="369px"></asp:Label>
<td ><div align="center">Please confirm your password:</div>
<td style="text-align: left">
<asp:TextBox id="PasswordStr" runat="server" TextMode="Password"
style="text-align: left" Width="227px"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ErrorMessage="The password is different from the previous one!">
<td height="25" colspan="2">
<asp:Button id="Button1" runat="server" Text="Login"
</asp:Button> [<a href="Index.aspx">Back to Home</a>]
It is worth noting that for brevity we select to omit
explaining the two simple ASP.NET AJAX Control Toolkit extenders. Therefore,
for more details concerning their usage you can refer to the downloaded source
code at the end as well as the tutorial site
for ASP.NET AJAX Control Toolkit controls.
Author’s Notes: In constructing an
ASP.NET AJAX Server-Centric based website, you are recommended to use ASP.NET
server controls as much as possible rather than the client-side HTML controls
in order to set up your system more rapidly. However, what is better to choose
will in the end fall back upon your own familiarity with the tools at hand.
When the button "Login" is clicked, its related
click event handler is triggered. Listing 3 gives the related code snippet.
Listing 3: The key code for file Login.aspx.cs
public partial class Login : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
string ST_dns =
ST_myConn = new SqlConnection(ST_dns);
protected void Button1_Click(object sender, EventArgs e)
SqlCommand ST_myCmd = new SqlCommand(
"select * from ST_admin where ST_admin_user='" +
adminname.Text.Trim() + "' and ST_admin_psw='" +
adminpsw.Text.Trim() + "'", ST_myConn);
SqlDataReader ST_read = ST_myCmd.ExecuteReader();
//store the value of field ST_admin_user into Session
//redirect the user to the page Admin_Admin.aspx
"<script>alert('Sorry,the username and password are incorrect!')</script>");
In function Page_Load, we found the database connection
string from file web.config and set up the connection using the ADO.NET object—SqlConnection.
Next, when button "Login" is clicked, its click event handler Button1_Click
is invoked. As you have seen, here we directly worked with the SELECT SQL
clause which represents the typical two-tier architecture operation.
Note that at the very beginning of designing table ST_admin
there is only a record in it—the value of field ST_admin_user being "admin"
and the value of field ST_admin_psw being "1." So, according to your
own situation, you can add by hand to the table any other records that describe
the valid users (often blog hosts). In this case, when the current user is
verified to be the valid user, he will be navigated to the backend
administrator management related page, Admin_Admin.aspx.
Again, for simplicity, we grant the sale privileges to the
administrator and the blog host, while in real scenarios this may not necessarily
be the case.
So far the discussion has been about page login.aspx. Next we
switch our topic to the homepage of the system, 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
Listing 4: The interesting UpdatePanel related HTML
mark code in the homepage
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<asp:datagrid id="NewsList" runat="server" PageSize="20"
OnPageIndexChanged="Get_Page" Width="98%" CellPadding="0"
BorderColor="Maroon" BorderStyle="Solid" BorderWidth="2px">
<a href="#" style="font-size:xx-large">
<table width="98%" border="0">
<td colspan='2' >
<a href='<%# DataBinder.Eval(Container.DataItem, "ST_n_id") %>.aspx'>
<%# DataBinder.Eval(Container.DataItem, "ST_n_key")%></a></div>
<td colspan="2"><b>Abstract</b>: <%#
%>.aspx'>Click and Read</a>]
<PagerStyle NextPageText="next>>" PrevPageText="<<prev"
<asp:AsyncPostBackTrigger ControlID="ClassList" EventName="ItemCommand" />
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.
We have finished up introducing the general design of the
blog system, with two additional pages, login.aspx and index.aspx, also
introduced. In the next part of the article we will delve into the backend
administrator management related issues.