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.