Developing an ASP.NET AJAX Client-Centric Wiki Application

---

A downloadable .rar file is available for this article.

---

However, inasmuch as I’m still a newbie to this framework, and thanks to the immaturity of the framework’s client side, there exist quite a few deficiencies in this sample application. Therefore, as the message stuffed nearly everywhere in this sample hints, the solution provided by this application is "just for your reference."

Author's Note: To follow along with the sample in this article, you're assumed to have installed Visual Studio 2005 and at least two components of MS AJAX: ASP.NET AJAX Extensions and ASP.NET AJAX Futures January CTP. In addition, it is suggested that you download the source files accompanying this article (see the link above).

About the Client-Centric Programming Model

The ASP.NET AJAX framework has provided web developers with two types of programming model: the server-centric programming model and the client-centric programming model. As is well known, the server-centric programming model will generate JavaScript code at run-time and send it to the client side, which obviously causes the leaden burden to fall onto the server side and thus reduces the performance of the whole system.

In contrast, the client-centric programming model moves large quantities of business logic from the server side to the client side by introducing plenty of MS AJAX characteristic client-side controls and a pretty integrated and comparatively perfect architecture. The following Figure 1 shows the general architecture of the client-centric programming model supplied by MS AJAX.

 Figure 1—the MS AJAX client-centric programming model.

The Three-Tier Model and Key Techniques

To construct this article wiki application, we’ll try our best to follow the standard three-tier model. The following Figure 2 shows the rough model leveraged in this example.

Figure 2—the three-tier model that our wiki application follows.

There are two points that deserve to be noticed. First, the imperfection results in our having to use a little ASP.NET 2.0 server-side solution in this demo, which is not indicated in Figure 2. Second, we’ve combined XML with an MS SQL Server database to persist the article-related contents.

Now, let's do a little research into the key techniques required by this application.

Key Techniques

In my opinion, the following crucial techniques are required in constructing this sample wiki system:

1. The role and membership management. This is usually a must have in real ASP.NET 2.0 applications. In this application, you should use the ASP.NET Web Site Administration tool to create roles and their corresponding users that own different access rules. Since many readers may already be quite familiar with this tool we won’t dwell on it. The really interesting part lies in Sys.Services.AuthenticationService, which is a static class contained in the MicrosoftAjax.js file that allows you to authenticate using the ASP.NET 2.0 membership application service. What we need to do is pass it the username and password and the name of the function to call once the logging in is complete, which allows our MS AJAX application to use the standard ASP.NET 2.0 authentication system.

2. Data Storage. Under real environments the data in a web system are mainly persisted in XML and HTML files, and various databases. For simplicity, we have utilized the Microsoft SQL Server Express database to store the roles and users information, the article category and general information; we've only chosen XML to persist the article details. One point that deserves to be noticed is that we’ve painstakingly selected two important client-side controls—XmlDataSource and XsltView--to exhibit the article content so that we can show to readers as many MS client-centric techniques as possible. However, because it is still in its verdant phase, the XsltView control is constrained in bearing the burden of displaying the contents of an ".xml" file.

3. Client-side and server-side programming. Based on practical requirements, we have synthetically used JavaScript (i.e. imperative mode) and xml-script (i.e. declarative mode) programming on the client side. But, as mentioned above, due to the immaturity of the client-side control (XsltView), to deal with XML data, we, at rare times, have to resort to the traditional ASP.NET 2.0 server-side techniques and controls to more effectively handle XML data. Later on we’ll take a closer look at each of these.

Data Tier Design

Now, let’s shift our attention to the database design.

Launch Visual Studio 2005, click menu item "File | New Website…", and then select the template named "ASP.NET AJAX CTP-Enabled Web Site" to create a new website. Name it AjaxWiki (select Visual C# as the built-in language). After that, the system should automatically add references to the necessary assemblies—System.Web.Extensions.dll and Microsoft.Web.Preview.dll. Also, you should see a ScriptManager server control, the headquarters of the whole ASP.NET AJAX framework, automatically added to the "Default.aspx" page.

Now, right click the project, select "Add new Item…", and then choose the template "SQL Database" to create a database named "WikiDatabase.mdf." In this application, we add to it only two tables named ArticleCategory and ArticleInfo, respectively. The following Table 1 and Table 2 give detailed explanations on the fields contained in the two database tables, respectively. The following Figure 3 shows the relationship between the two tables.

After that, we must create four pairs of stored procedures: DeleteRecord vs. DeleteArticleInfoRecord, GetAllRecords vs. GetAllArticleInfoRecords, InsertRecord vs. InsertArticleInfoRecord, UpdateRecord vs. UpdateArticleInfoRecord, which are associated with the typical CRUD database operations. For instance, the stored procedure DeleteRecord is responsible for deleting a record from the  ArticleCategory table while DeleteArticleInfoRecord takes the same action toward the ArticleInfo table. We won't dwell much on these since our main interests don't lie here.

 Table 1—structure for table ArticleCategory.

Field name	Type	Notes
CategoryID	int	Primary Key
CategoryName	nchar(50)	The article category name
CategoryDes	nchar(255)	The article category description

 Table 2—structure for table ArticleInfo.

Field name	Type	Notes
InfoID	int	Primary Key
Title	nchar(50)	The article topic
FileName	nchar(100)	The article file location
PostTime	datetime	The time to write the article
ReplyCount	int	The times to add comments to the present article
LastReplytime	datetime	The time at which the comment is added for the last time
PostUser	nchar(50)	The name of the user who posts the comments
CategoryID	int	The category this article belongs to (also a Foreign Key)

 Figure 3—the relationship between the ArticleCategory table and ArticleInfo table.

Author's Note: We should also create an XML file named "content.xml" which serves as the template of all XML files since we choose to save the article content using .xml files. However, for brevity, we will not discuss it carefully. For its related content, you can refer to the downloaded source code.

Web Service Design

From the point of view of MS AJAX client-centric architecture, a web service plays the role of a broker agent to connect the client side with the database, and the client-side JavaScript programming can directly invoke the web service via the ready "Client Side Script Proxy." In this application, we'll write two parallel web services, MyDataService and ArtInfoDataService, which are both derived from the DataService class and to be consumed from the browser side in the MS AJAX way.

Now, right click the project, choose "Add new item," and create two new web services named "MyDataService.asmx" and "ArtInfoDataService.aspx," respectively. Next, open the "MyDataService.cs" file and add all of our required web methods: DeleteRecord, GetAllRecords, InsertRecord, and UpdateRecord. These four web methods will respectively invoke the four corresponding stored procedures -- DeleteRecord, GetAllRecords, InsertRecord, and UpdateRecord --within the WikiDatabase database to perform the basic CRUD operations.

Also, take MyDataService for example. The above four web methods will be invoked from the client side, in this case mainly by the means of xml-script. Since things are quite similar to the web service ArtInfoDataService, we choose to omit the related enumeration. For the associated details, please further examine the downloaded source code.

 Next we will focus on the user interface design phase.

Visualize the finish line

When you run this article-related wiki application, you will see a homepage screen as in Figure 4.

Figure 4— the runtime snapshot of the homepage of the wiki application.

Here we use an ordinary <table> HTML element to lay out the homepage while borrowing a bit from the famous codeproject.com website. On the left side of the page, there are a few layer-based categories—when you click the Sections or Manage items the associated sub items will unfold or collapse. Clicking Login in the upper left corner will lead you into another common login page—login.aspx. By clicking items under Sections, for example "Vista," the user will be navigated to the MsgList.aspx page (Figure 5) to view the article titles that belong to the selected category.

Figure 5—a runtime snapshot of page MsgList.aspx.

However, only a user with the Admin role can own the ability to open and edit article categories in the editcategory.aspx page (Figure 6), while a common user or a passing guest will be redirected to the login.aspx page. As you see, the right and larger part of the homepage shows directly the rather detailed article category information. Note here, to be honest, that I have purposefully not achieved the functionality of clicking the interested hyperlink from the right part to see the articles. However, you can easily supplement this with the help of the implementation of the hyperlinks added to the sub sections under Sections.

Figure 6—a runtime snapshot of page editcategory.aspx.

Rather simple? Yes, it is. But since the sample is mainly built up upon MS AJAX client-centric techniques, there are still some interesting things and knots with it. Let’s dissect them one by one.

Please check back tomorrow for the continuation of this article.

blog comments powered by Disqus