When the common user clicks the link "Leave a Word" below the "About Me" page, Message.aspx is invoked. For a clearer understanding with the implementing logic take look at the design-time snapshot.

Figure 5 - The design-time snapshot to leave a message

First, you will notice that this page is a content page of the master page, OneColumn.master, since there is no category menu required.

The whole layout is composed of three parts: the topmost navigating bar, the left part for the user to leave new message, and the right to show all the already left words.

Shrewd readers may have noticed that the left part is pretty similar to the lower right part of page Show.aspx. Surely it is. But you should also notice that we have painstakingly introduced the AJAX Control Toolkit extender NoBot.

NoBot is one of the great ASP.NET AJAX Toolkit controls that attempts to provide CAPTCHA-like bot/spam prevention without requiring any user interaction. This approach is easier to bypass than an implementation that requires actual human intervention, but NoBot has the benefit of being completely invisible.  NoBot is probably most relevant for low-traffic sites where blog/comment spam is a problem and 100% effectiveness is not required. For more details about the NoBot extender, please refer to the ASP.NET AJAX Control Toolkit online tutorials.

Author's Note: You can test NoBot by violating any of the above techniques: posting back quickly, posting back many times, or disabling JavaScript in the browser.

Now, let us look at the NoBot related HTML code.

Listing 6

<ajaxToolkit:NoBot ID="myNoBot" runat="server"
    ResponseMinimumDelaySeconds="15"
    CutoffMaximumInstances="3"
    CutoffWindowSeconds="150"
    OnGenerateChallengeAndResponse="MyChallengeResponse" />

The two properties, ResponseMinimumDelaySeconds and OnGenerateChallengeAndResponse of NoBot, need to be discussed. First, property ResponseMinimumDelaySeconds is set to 15 seconds, which means that within this period if the "Submit" button is pressed then the current action is suspected to be some robot one, as a result of which the submitting content is rejected and a warning message is thrown out at the left bottom of the page.

Next, take a look at the property OnGenerateChallengeAndResponse related value- a javascript function, as is shown in Listing 7.

Listing 7 - The NoBot's OnGenerateChallengeAndResponse property related javascript function

protected void MyChallengeResponse(object sender, NoBotEventArgs e)
{
    Panel p = new Panel();
    Random rand = new Random();
 
    // set the related properties for the panel
    p.ID = "panCheckNoBot";
    p.Width = rand.Next(123);
    p.Height = rand.Next(456);
    // hide Panel
    p.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
    p.Style.Add(HtmlTextWriterStyle.Position, "absolute");
    // add control Panel into the  NoBot control
    ((NoBot)sender).Controls.Add(p);
    // specify the chanllenge and response
    e.ChallengeScript = String.Format(
        "var e = document.getElementById('{0}'); e.offsetWidth + e.offsetHeight;",
        p.ClientID);
    e.RequiredResponse = (p.Width.Value + p.Height.Value).ToString();
}

In this function, a <div> element with random width and height is generated and then added onto the DOM tree in the page. At the same time, the sum of the width and height is stored, and a javascript code snippet is written in the page. Note that this javascript code snippet will be invoked at the client-side running time to find the above <div> and obtain the factual sum of its width and height. In this way when the page postback takes place, the NoBot control can compare the expected value with that fetched from the browser to judge whether the client side is a browser and further judge whether it is a robot action or not.

The second point requires is the right DataList control. As you have guessed, it is enclosed with an UpdatePanel control. If the left new record is inserted into the database table, the DataList control will accordingly be updated in the AJAX way. Since the implementation is easy to follow, we are won't go into more detail.

As of now, we have examined all the web pages in the blog sample website. Next, we are going to summarize the key techniques used in writing the sample application.