Completing an ASP.NET AJAX Client-Centric Wiki Application
(Page 1 of 4 )
In this conclusion to a four-part series on building an ASP.NET client-centric wiki application, we will delve deeply into the code, both client side and server side. We will also look at how to add comments to articles.
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.
Next: The Server Side >>
More ASP.NET Articles
More By Xianzhong Zhu
