Maintaining a task list (or a to-do list) is a common time management technique that helps us keep track of work and agenda items, along with their priority and status. No wonder Windows Task Manager is often an integral part of web and desktop calendaring applications. In this two-part article, we will build our own task-list application using jQuery, ASP.NET, and Windows Communication Foundation (WCF). Though simple, our task-list application will illustrate how jQuery can interact with server data through WCF services. We will also get to apply several jQuery concepts such as selectors, AJAX calls, and plug-ins.
Functional Requirements
First, let’s summarize our expectations for the task-list application that we are going to build:
- Users should be able to define tasks. A task definition consists of title, description, priority (e.g., high, normal, low); status (e.g., pending, in-process, completed); and due date.
- Users should be able to add, edit, and delete tasks.
- Users should be able to filter tasks on the basis of priority and status.
- Tasks that have a due date that has already passed should be highlighted when the application starts.
- The application should talk with the server only during add, edit, and delete operations to keep post backs or page refreshes to a minimum.
We will use jQuery, ASP.NET 4.0, and SQL Server 2008 to develop the task-list application. The application will illustrate how to:
- Use common jQuery selectors.
- Use Microsoft's jQuery template plug-in to create a grid layout.
- Deal with dates while communicating with WCF.
- Make AJAX calls to WCF service through jQuery.
- Create your own plug-in using jQuery.
Creating the Web Application
To begin, use Visual Studio to create a new ASP.NET website. Figure 1 shows the New Web Site dialog box in Visual Studio.
Figure 1: Creating a new website in Visual Studio
Once the website is created, add a new folder named Scripts, and place the jQuery files in it, as Figure 2 illustrates.
Figure 2: Placing jQuery script files
Note: For detailed instructions about downloading the jQuery library and the jQuery templates plug-in, see the ReadMe.txt file in the code download that accompanies this article.
All the data that the task-list application requires will be stored in a SQL Server database. To add a new SQL Server database to your website, right-click the App_Data folder and select Add New Item to open a dialog box, which Figure 3 shows.
Figure 3: Adding a SQL Server database
Give the database a name, such as TaskListDb.mdf. Once the database is ready, create a new table named Tasks with the schema as shown in Figure 4.
Figure 4: Tasks table schema
The Tasks table has six columns: TaskID, Title, Description, Priority, DueDate, and Status.
Creating a WCF Service to Perform Data Access
The data from the Tasks table needs to be accessed from the client side using jQuery code. Hence, we need a callable endpoint at the server end that can be consumed from the client. A WCF service can provide such an endpoint. We will use a WCF service for adding, updating, deleting, and retrieving data from the Tasks table. Later, we will call this WCF service from the jQuery code.