Building a Code Sample Website

Overview of the Sample Website

The primary purpose of the website is to act as a code sample website for .NET code. Anyone who visits the website can post a new code sample entry. A code sample entry can consist of one or more code sample files. The author of the code sample entry can provide a description of each of the files. Furthermore, the author can add one or more tags to the code samples to categorize and describe their purpose. Visitors to the website can browse the existing code sample entries. They can rate code samples when they view them. Furthermore, they can copy the code samples so they can use the samples in their own applications.

The website also includes a simple blog. The administrator of the website can post blog entries about the code samples or about any other topic. Visitors to the website can add comments to a blog entry. The website exposes both an ATOM and RSS feed. If someone wants to subscribe to the blog, that person can subscribe to either the ATOM or RSS feed. The home page of the website displays a code cloud and a list of recent blog entries (see Figure 1). The code cloud consists of a distinct list of all the code entry tags. The more code entries that share a tag, the larger the tag appears in the code cloud. In the figure, you’ll notice that a lot of code samples are related to validation. If you click a tag in the code cloud, you are transferred to a page that contains a list of code samples associated with the tag.

Figure 1:

Using Client-Side ASP.NET AJAX

Making JavaScript Look Like C#

Let me start by saying that there is nothing wrong with JavaScript the language. It is not a toy language. It is not a limited language. JavaScript simply has it roots in a different programming language family than other languages you are familiar with, such as C# and VB.NET. For a great, quick introduction to JavaScript the language, I recommend that you read “A re-introduction to JavaScript” at http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript. JavaScript is an object-oriented programming language. In fact, one could argue that it is more object-oriented than languages such as C# and VB.NET. In a language such as C#, you make a distinction between classes (Aristotelian forms) and objects (Aristotelian matter). An object is an instance of a class, but a class does not exist in its own right. In JavaScript, classes do not exist. The only thing that exists are objects (everything is matter). Objects are not related to one another by being instances of the same class. Instead, one object can be related to another object when one object is the prototype for another object. Another major difference between JavaScript and C# is that JavaScript is a dynamic language. The type of a variable can change at any moment during runtime. When JavaScript code is executed, a String might transform into an Integer and back again. The C# language, on the other hand, is statically typed. Once declared, a String is a String and it can never be anything else.

Using the Microsoft AJAX Library

The supporting code for the client-side Microsoft AJAX Framework is contained in a single JavaScript file named MicrosoftAjax.js. This file is included in a page automatically when you add an ASP.NET ScriptManager control to a page. If you add an AJAX Web Form to a website within Visual Web Developer, the page contains the ScriptManager control automatically.

Creating an AJAX Client Library

Before we do anything else, we need to discuss how you create an external JavaScript file and reference it in an AJAX Web Form page. You create a JavaScript file by selecting the menu option Website, Add New Item and selecting the AJAX Client Library  For example, the file in Listing contains a single JavaScript function called sayMessage() that displays a JavaScript alert with a message.

Ajax

Ajax, shorthand for Asynchronous Javascript and XML, is a set of technologies that allows you to create Web applications that don't need to refresh Web pages in the browser. You can operate behind the scenes, connecting to the server, uploading and downloading data, and display the results in the browser using dynamic HTML. Using Ajax gives your Web pages the feel of a desktop application-the whole display will no longer flash when you click a button. VTC Author Steve Holzner helps you get started developing and building your own Ajax capable web pages. A familiarity with JavaScript, XML, PHP is recommended for this course. To begin learning, simply click the links.

Using the ASP.NET AJAX Control Toolkit

The ASP.NET AJAX Control Toolkit is not included with the ASP.NET 3.5 Framework. The Toolkit is being continuously updated. A new release of the Toolkit is available every couple months. The Toolkit is maintained as a project at Microsoft CodePlex. You can download the latest release of the ASP.NET AJAX Control Toolkit at the following location:

http://www.codeplex.com/AtlasControlToolkit

When you download the Toolkit, you have the choice of either

(1) downloading the controls and the source code or

(2) downloading the controls only. You’ll need to unzip the download onto your hard drive.

As part of the download, you get a sample website that demonstrates each of the Toolkit controls. You can open the sample website by launching Visual Web Developer, selecting the menu option File, Open Website, and browsing to the SampleWebSite folder in the unzipped download.

Using Server-Side ASP.NET AJAX

The Ajax Vision

ASP.NET is a server-side technology for building web applications. Almost all the work happens on the web server and not the web browser. Whenever you perform an action in an ASP.NET page—such as clicking a button or sorting a GridView—the entire page must be posted back to the web server. Any significant action on a page results in a postback. If you think about it, this is incredibly inefficient. When you perform a postback in an ASP.NET page, the entire page must be transported across the Internet from browser to server. Next, the .NET class that corresponds to the page must re-render the entire page again from scratch. Finally, the finished page must be sent back across the Internet to the browser. This whole long, slow, agonizing process must occur even if you are updating a tiny section of the page.

Using a server-side technology such as ASP.NET results in a bad user experience. Every time a user performs some action on a page, the universe temporarily freezes. Whenever you perform a postback, the browser locks, the page jumps, and the user must wait patiently twiddling his thumbs while the page gets reconstructed. All of us have grown accustomed to this awful user experience. However, we would never design our desktop applications in the same way.

Google Docs (http://docs.google.com) demonstrates that you can build Microsoft Office better than Office by building it as a web application. Google Docs enables you to save your documents, spreadsheets, and presentations on a central server so that they don’t get lost and can be accessed anywhere. Furthermore, Google Docs enables people to collaborate on documents and spreadsheets over the Internet, which is something that you just cannot do in Microsoft Office. Google Suggest (http://www.google.com/webhp?complete=1&hl=en) was the Google application that convinced me that the future is Ajax. Google Suggest works like the normal Google home page, except for the fact that the Google Suggest page offers suggestions as you type. While you are typing, Google Suggest looks up matching words from its database and shows them to you in real time (before seeing Google Suggest, I would have thought this violated the laws of physics).