The Task System
Now that you have seen a simple implementation of the framework, I'd like to show you an application with real-world relevance. The next set of instructions will guide you through creating a simple task system that will help someone keep track of a to-do list. The application described in this article allows users to add, edit, and delete tasks.
shows a screen shot of the final product in read mode.
|Figure 2. Read Mode: The figure shows the task system in read mode.|
shows the application in edit mode.
|Figure 3. Edit Mode: The figure shows the task system in edit mode.|
You can download the code
for this article to follow along. This article discusses all the functional code needed to make this application work. You will see screen shots of the project that have Cascading Style Sheet entries applied to them giving the screens a styled layout. The CSS used in this application is out of the scope of this article and therefore I won't discuss it here. If you would like to code this application from scratch using the article, please feel free, but I highly recommend that you at least retrieve the default.aspx.css
file from the download package to help give your page an appropriate look and feel.
The task system is simple. When the page loads, a populated instance of the TaskCollection class is returned to the browser. The client will then iterate through the collection and build up some HTML to display each item.
When a user clicks the edit link, the information about the selected task is filled into the controls that make up the edit box allowing the user to update the task information. When the user clicks the save link, the updated information is sent back to the server to update the data store and then the client is updated.
For demonstration purposes, I've added a five-second delay to the add and edit features to allow you to see how you may continue to work with the application even if a lengthy server-side operation is in progress.
The data container for this article is a custom class called Task
. I've packaged multiple tasks into the TaskCollection class. This article uses custom classes and collections to show that you may use your custom business entity classes natively while using the Ajax.NET Framework.
This sample application creates a way to fake a persistence medium. Rather than worrying about the implementation details of dealing with a database or the file system, an instance of TaskCollection is placed into the Application state object. This will act as a stand-in for any sort of persistence medium. When you implement your applications you may follow the same techniques as outlined here, but instead of reading and writing to the Application state object, you may interact with the persistence medium of your choice.
Now that you have that background under your belt, I'll show you how to implement the application.
Start with a fresh ASP.NET Web application by creating a new Web project in Visual Studio .NET 2003. Call this project AjaxNET
Following the steps described above in the Hello World application, add a reference to the Ajax.dll file. Next, update web.config with the Ajax.NET HttpHandler.
Now delete WebForm1.aspx
and create a new Web Form and name the file default.aspx
Next, in your AjaxNET
project add a new folder called Components
. This folder will house some of the application's supporting classes.
Create the Entity and Collection Classes
Add a new class to the Components
folder and name the file Task.cs
. Listing 1
defines the Task class which is the foundation of the application. The Task class will keep track of three pieces of information: ID, the description, and task title. The only behavior in the class right now is a constructor that will request the description and title. Task IDs are generated by the constructor when the object is created.
Notice that this class is decorated with the Serializable attribute. Applying this attribute allows the .NET Framework to serialize a class instance for transport through the Ajax.NET Framework. You must apply this attribute to your custom classes.
The next class to create will fill the role of holding a collection of Task objects. The TaskCollection class is a custom collection object that is sub-classed from CollectionBase. This class begins with two methods. Each method ensures type safety by taking instances of the Task class as arguments to add and remove items from the collection.
public class TaskCollection : CollectionBase
public int Add(Task task)
public void Remove(Task task)