Completing an ASP.NET AJAX Client-Centric Wiki Application

---

A downloadable .rar file is included for this article.

---

The Client Side

Herein I have purposely leveraged all the ASP.NET 2.0 server controls-from the TextBox along with its related RequiredFieldValidator control to the DropDownList, as well as the commonly-used SqlDataSource control which is used to provide data for the DropDownList. Here, there's only a small piece of code worth discussing:

<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="SqlDataSource1"

DataTextField="CategoryName" DataValueField="CategoryID"
Width="385px">

</asp:DropDownList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.SQLEXPRESS;AttachDbFilename=
|DataDirectory|WikiDatabase.mdf;Integrated Security=True;User
Instance=True"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT
[CategoryID],[CategoryName] FROM [ArticleCategory]">

</asp:SqlDataSource>

Here's the typical ASP.NET 2.0 usage: the SqlDataSource control is bound to the DropDownList to provide data for it. Since Microsoft has provided a good article that dwells on this kind of data binding we will not explain it here.

When the user populates all the necessary fields and clicks the Post button a JavaScript function named SendMsg() will be invoked. Here is its related code:

<script type="text/javascript">

  var xmlhttp;

  function createHTTP() {

    if(window.ActiveXObject) {

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

    else if(window.XMLHttpRequest) {

     xmlhttp=new XMLHttpRequest();

 }

}

function SendMsg(){

document.getElementById("divlist").innerText="Posting the
article...";

var msgtitle=document.getElementById("<%= txttitle.ClientID %
>").value;

var msgcontent=document.getElementById("<%= txtcontent.ClientID
%>").value;

var categoryid=document.getElementById("<%=
DropDownList1.ClientID %>").value;

  createHTTP();

   xmlhttp.onreadystatechange=stateChange;

xmlhttp.open("POST","SendMsgServer.aspx?title="+escape(msgtitle)
+"&content="+escape(msgcontent)+"&categoryid="+escape
(categoryid),true);

  xmlhttp.send(null);

}

function stateChange(){

  if(xmlhttp.readystate==4) {

//if the status equals 200, then OK

  if(xmlhttp.status==200) {

//format the response data

document.getElementById
("divlist").innerHTML=xmlhttp.responseText;

  }

 }

}

</script>

As is clearly seen, in the SendMsg function, we first show to the users the message 'Posting the article...', then get the required values from the three ASP.NET 2.0 server controls using the 'document.getElementById' and <%...%> methods. Next, we create the famous asynchronous XMLHTTP object (only in Internet Explorer; in other browsers it is the XMLHttpRequest object) by calling the createHTTP() method. Next, we attach the above asynchronous object state to a specified callback function, named stateChange, which bears responsibility for judging whether the asynchronous invoking has been completed and succeeded and makes the corresponding arrangements. Next, we call the open method of the asynchronous object to set up the connection with the server side and, at the same time, pass the required parameters (here, the server side page SendMsgServer plays the role of a CGI). At last, we start up the asynchronous request.

The Server Side

As is mentioned above, the SendMsgServer.aspx page serves as a CGI's functionality. Now let's look into the source code:

  protected void Page_Load(object sender, EventArgs e){

//get the name of current user

  string username = HttpContext.Current.User.Identity.Name;

  string title = Request.QueryString["title"];

  string content = Request.QueryString["content"];

  int categoryid = int.Parse(Request.QueryString["categoryid"]);

   ArticleManager myarticle = new ArticleManager();

    myarticle.AddArticle(title, username, categoryid);

//add the details into a XML file

myarticle.AddXML(Server.MapPath(".") + @"content.xml", title,
content, username);

Response.Write("Congratulation! You've succeeded in sending the
post.");

}

There are four tasks here in total.

1. Accept the passed parameters. 
   
2. Add the general article information into the database table. 
   
3. Put the detailed article content into the corresponding '.xml' file using an XML file template (i.e. file content.xml located at the root folder, which specifies the format of a newly-generated XML file). 
   
4. Send back to the client side the message about the asynchronous invocation.
   

Obviously, steps 2 and 3 are of major interest to us. Let's continue to study them.

First, let's check out the code for the AddArticle method:

public void AddArticle(string title, string user, int
categoryid)

{

  StringBuilder strSQL = new StringBuilder();

    SqlParameter[] newsParms = GetParameters();

     newsParms[0].Value = title;

     newsParms[1].Value = getFilename().ToString();

     xmlfilename = getFilename().ToString();

     newsParms[2].Value = DateTime.Now;

     newsParms[3].Value = 0;

     newsParms[4].Value = DateTime.Now;

     newsParms[5].Value = user;

     newsParms[6].Value = categoryid;

using (SqlConnection conn = new SqlConnection(ConnectionString))

{

  strSQL.Append("INSERT INTO ArticleInfo VALUES " +

"(@title,@filename,@posttime,@replycount,@lastreplytime,
@postuser,@categoryid)");

SqlHelper.ExecuteNonQuery(conn, CommandType.Text,
strSQL.ToString(), newsParms);

 }

}

Here, we first get the buffered parameters using the helper method GetParameters; if there are no buffered parameters this method will automatically create a list of parameters and buffer them. Next, we assign values to each parameter. At last, within the 'using' code block we accomplish the task of inserting the current article information into the ArticleInfo table with the help of a helper class named SqlHelper (you can study it in the downloaded source code).

Additionally, it's worth doing some more research into the above private method named getFilename:

private int getFilename(){

  int cardrule = 0;

string strsql = "select top 1 InfoID from ArticleInfo order by
InfoID desc ";

 try {

  cardrule = (int)SqlHelper.ExecuteScalar(ConnectionString,
CommandType.Text, strsql, null);

}

 catch { cardrule = 0; }

  return cardrule + 1;

}

As you can see above, using the SqlHelper helper class gives us the maximum value for the InfoID field in the current ArticleInfo table, and then adds 1 to it. Finally, we return the integer value as the file name.

Next, let's take a look at the code of the AddXML method:

public void AddXML(string filename/*include path*/, string
title, string content, string user){

 XmlDocument mydoc = new XmlDocument();

   mydoc.Load(filename);

 XmlElement ele = mydoc.CreateElement("title");

 XmlText text = mydoc.CreateTextNode(title);

 XmlElement ele1 = mydoc.CreateElement("posttime");

 XmlText text1 = mydoc.CreateTextNode(DateTime.Now.ToString());

 XmlElement ele2 = mydoc.CreateElement("content");

 XmlText text2 = mydoc.CreateTextNode(content);

 XmlElement ele3 = mydoc.CreateElement("postuser");

 XmlText text3 = mydoc.CreateTextNode(user);

 XmlNode newElem = mydoc.CreateNode("element", "xmlrecord", "");

  newElem.AppendChild(ele);

  newElem.LastChild.AppendChild(text);

  newElem.AppendChild(ele1);

  newElem.LastChild.AppendChild(text1);

  newElem.AppendChild(ele2);

  newElem.LastChild.AppendChild(text2);

  newElem.AppendChild(ele3);

  newElem.LastChild.AppendChild(text3);

    XmlElement root = mydoc.DocumentElement;

      root.AppendChild(newElem);

      int index = filename.LastIndexOf(@"");

      string path = filename.Substring(0, index);

      path = path + @"" + xmlfilename + "file.xml";

    FileStream mystream = File.Create(path);

 mystream.Close();

XmlTextWriter mytw = new XmlTextWriter(path, Encoding.Default);

 mydoc.Save(mytw);

  mytw.Close();

}

Here, we are performing the typical ASP.NET 2.0 XML data operation-mainly using the XmlDocument class and the XmlTextWriter class together with a ready XML file template to construct an XML file which, due to the reason discussed before, will finally be stored at the root folder of the website. Since there is nothing more peculiar to be emphasized (you can find out much about XML operations in MSDN), we will leave the subject here, but it is highly recommended that you study it together with the ready template file named 'content.xml'-it's a pretty universal module that you can put to use elsewhere.

So much for the 'sending post' module. Next, let's continue to study the last part of this article-adding comments to the current article.

Write a Post Related to the Special Article

As is pointed out, there are a lot of puzzles and awkwardness to tackle in dealing with the XML typed data using a Microsoft AJAX client-centric scheme. Therefore, here, we still have to resort to the original AJAX mode when adding posts (which will be persisted in the '.xml' file form) to the present article.

Now, when you click the Reply hyperlink at the ContentList.aspx page, you will be redirected to another page named ReplyMsg.aspx. The following Figure 13 corresponds to it as a design-time snapshot.

Figure 13-the design-time snapshot when replying to the current article.

Whether the inner logic or the user interface design, this part is quite similar to the above 'Writing a New Article Using......'. Therefore, we will make a long story short. The above Reply hyperlink corresponds to the following HTML code:

<div >

<a id='btnReply' href="javascript:backdata()" title="Reply the
post">

<img src="images/reply.PNG" />

</a>

</div>

Obviously, all the secrets are wrapped in the JavaScript function backdata:

function backdata(){

  document.getElementById("hintMsg").innerHTML="Posting Data...";

   var filename=getParm();

   var title=document.getElementById("txttitle").value;

   var content=document.getElementById("txtcontent").value;

 createHTTP();

  xmlhttp.onreadystatechange=stateChange;

  xmlhttp.open("POST","ReplyMsgServer.aspx?filename="+
filename+"&title="+escape(title)+"&content="+escape
(content),true);

  xmlhttp.send(null);

}

As is seen from above, all the coding here exactly resembles the coding we did for posting a new article.

Next, let's take a look at the server side programming within the  'ReplyMsgServer.aspx.cs' file (the so-called 'CGI'). As usual, we first give the related code snippet, as follows:

protected void Page_Load(object sender, EventArgs e){

  ArticleManager manager = new ArticleManager();

   string filename = Server.MapPath(".") + @"" +
Request.QueryString["filename"] + "file.xml";

  manager.UpdateXmlFile(filename, Request.QueryString["title"],

Request.QueryString["content"],
HttpContext.Current.User.Identity.Name);

manager.UpdateDatabase(int.Parse(Request.QueryString
["filename"]));

  Response.Write("");

}

There are still four tasks to perform:

1. Accept the passed parameters and rebuild a file name with full path. 
   
2. Update the corresponding '.xml' file that holds the detailed article content. 
   
3. Update the general article information into the database table. 
   
4. Post back to the client side the message about the asynchronous invocation. All the contents relevant to the UpdateXmlFile() and UpdateDatabase() functions are nearly the same as those in the above AddXML() and AddArticle() functions.

Here, still for the sake of brevity, we omit all of them. However, there turns up a peculiar bug here that I have to mention. If we, as usual, replace the above last sentence with the following:

Response.Write("The asynchronous invocation is successful!");

I will see some messy content (beginning with this above specified hint message) at the bottom of the above Figure 13. To my astonishment, anything else is still OK-we can , as usual, see the recently-posted contents when we again launch the web application! For this reason, I have to post an empty string to the client side. If anyone e is successful in overcoming this bug, I would be very glad to hear about it. 

Oh, so much is for this long and mildly awkward application. You can finally press F5 and give it a test!

Summary

In this article we've developed a simple article-related wiki application using an ASP.NET AJAX client-centric framework. As hinted at the beginning of this article, there are rather more difficulties in constructing an MS AJAX client-centric application than the server-centric ones-on the one hand, the MS AJAX client-centric architecture has not been fully fledged; on the other hand, practical web applications usually bring forth new and complex business requirements which require the developers take the reins firmly and freely with many respects that are relevant to the web applications.

I've brought this tutorial to you only with the aim that you can balance every technique you know to decide whether to select the server-centric programming mode or the client-centric one in building your next web 2.0 applications.

By the way, as just a demo, the application in this article has only brought you the basic routine in constructing a Microsoft AJAX client-centric application. The following points remain to be improved or added:

• Substituting the current page switching solution with more fluid and user-friendly ones.
  
• Finding new ways of dynamically updating the client-side article content after new users add new comments/posts to it.
  
• Adding more convenient article editing function support.
  
• Replacing the current TEXT-format based editing in authoring a new article with the real scenario online HTML-based editing support and therefore storing the HTML content instead of the XML content.
  
• Further optimizing the speed of displaying UI elements since the xml-script resolution greatly tampers with this display speed.
  
• Using the client-side Validator controls to validate the article title and content.
  
• Adding RSS support as achieved by many modern web applications

Happy ajaxifying your web applications!

blog comments powered by Disqus