ASP.NET To Do List Application

• Download To Do ASP.NET project files - 25.3 Kb

Overview

I recently attended an excellent two day ASP.NET workshop given by the folks at Wintellect. After I returned to my desk, I decided I need to write an application using ASP.NET in order to make the things I had learned stick in my brain. This simple application is the result. However, this simple two page web application demonstrates how to use all of the following ASP.NET features:

• Web controls, including the awe inspiring DataGrid control (I'm not kidding).
• DataGrid template columns.
• Web form data binding.
• Dynamic control creation.
• View state.
• Code render blocks.
• Data binding expressions.
• Code behind.

In addition to the above, there's also code showing how to do simple ADO.NET actions, using CSS within Web Forms, and I even threw in a little JScript for variety! I used C# as the code-behind programming language, again for the learning experience.

Installation & Setup

I'll start with the installation and setup of the sample code. Microsoft has boasted that ASP.NET applications can be "XCOPY" installed. (If you don't know what XCOPY is, go to a command prompt and type HELP XCOPY.) This is almost true. You can certainly copy an .aspx file to your \inetpub\wwwroot directory, then open it with your browser and have the page execute and display. This is in fact how I started building the application. Very quickly, I found out that I would need to use a debugger to figure out what was going on, so I moved the project inside Visual Studio .NET to get more control, and I never looked back. In a nutshell, here's what you will have to do to install the project files correctly, so that you can build and debug the code with VS.NET:

1. Unzip the project source into a todo or other directory under your \inetpub\wwwroot directory.
2. Open up the IIS MMC snap-in, or the Internet Services Manager. Browse to the directory and select Properties. Under the Application Settings section on the Directory tab, click on Create. This makes IIS and VS.NET happy.
3. Edit the file ToDo.csproj.webinfo and set the URLPath to the correct URL to get to whatever location you stashed the project in for 1.
4. In the web.config file, set the location of the Microsoft Access database correctly down in the <appSettings> tags (see below).
5. You must give the local machine ASPNET account Modify, Read & Execute, Read and Write permissions to the file todo.mdb, or you will get the somewhat confusing error message "Operation must use an updateable query" when trying to update entries. Welcome to the world of secure programming!

When you've done this, you should be able to double click on Todo.csproj and open the project in VS.NET. Note that I manually created a Default.htm file that redirects to the ToDoList.aspx file, as I prefer this to adding the default pages to the IIS configuration. This allows you to hit, for example, http://localhost/todo and bring up the application.

Source Code Overview

I'm not going to attempt a soup to nuts ASP.NET tutorial here. I will assume that if you're interested in this sample, you are willing to do your own background reading of the help files. Here, I will just highlight the key points of the code.

First, a word about the database. I've used Access 2000 and ADO.NET to do the data access for the application. This is by far the easiest way to get up and running. I used the OleDbDataAdapter class in conjunction with raw SQL almost exclusively. The following code snippet is common in using ADO.NET and ASP.NET:

string connStr = ConfigurationSettings.AppSettings["ConnectionString"];
string queryStr = "select * from Items where id=" + idStr;
OleDbDataAdapter adapter = new OleDbDataAdapter(queryStr, connStr);

DataSet ds = new DataSet();
adapter.Fill(ds);

Note also that I stored the connection string for the database in the application configuration file, as described in the installation steps. In the web.config file, look for the following section:

<appSettings>
    <add key="ConnectionString" 
       value="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=
                  C:\Inetpub\wwwroot\todo\ToDo.mdb" />
</appSettings>

The main page is ToDoList.aspx. A snapshot is shown at the top of this document. My goals for this page where to show the list of to do items, allow some simple filtering, and to allow add, modify, delete and closure of items. In the code, you can see that it's quite OK to mix ASP.NET web controls with good old fashioned HTML and CSS. In fact, it's Microsoft recommendation that for performance reasons, you don't use a Web Control until you need to generate some content dynamically.

<asp:TemplateColumn ItemStyle-Width="12">
    <ItemTemplate>
    <img 
          src='<%# _priorityUrls[(int)DataBinder.Eval(Container.DataItem,
                             "Priority") - 1] %>'/>
    </ItemTemplate>
</asp:TemplateColumn>

This code shows how to add a template column to a DataGrid. In this case, I'm using to display an icon for the to do item priority. A key thing to note here is the use of the single quotes (') around the src= tag. It's not documented, but this appears to be the only way to get this data binding expression to work as the contents of an attribute tag.

In the code behind C# for this page, note how we dynamically create columns, depending on the query selected. For example:

bcOpened = new BoundColumn();
bcOpened.HeaderText = "Opened";
bcOpened.DataField = "Opened";
ToDoDataGrid.Columns.Add(bcOpened);

This code dynamically adds a bound column to the ToDoDataGrid, in this case, to show the date the to-do item was first opened.

Another interesting code to examine in this file is the way that the Edit, Delete, Close and Reopen commands are handled:

public void ToDoDataGrid_Command(Object sender, DataGridCommandEventArgs e)

The way the databound grid columns work is that there's a little snippet of JScript code that runs when you click on any of the Edit/Delete/Done/Reopen anchors. This JScript causes an HTTP POST request to be sent back to the ASP.NET application.

One piece of code may have you scratching your head for a while, and that is the following:

int query = 2;

if (IsPostBack) 
{ 
    query = (int)ViewState["query"]; 
} 
else 
{
    string queryStr = Request.Params["query"]; 
    
    if (queryStr != null) 
        query = Int32.Parse(queryStr);
    
    ViewState["query"] = query;
}

What I'm doing on this page is using a parameter on the URL to indicate which one of three grid layouts to display. If the parameter is missing, we just default to showing the open to-do items. However, when the HTTP POST requests come back to us when the user clicks on any of the bound column anchors, the query parameter is missing from the request, so we have no idea what grid we were looking at. Never fear, ASP.NET view state is here to save the day. The view state is actually implemented as a hidden field in the generated HTML that gets sent back with all the other HTTP POST data. It basically contains a bunch of serializes .NET objects for all of the web controls on your form, and the great part is you can add your own stuff to it. In this example, we are actually using the view state for the web form itself, but we could have attached the value to the view state for the grid in much the same way.

The code in ToDoEdit.aspx contains a little bit of JScript to set focus to the control on the form. You'd think this would be part of the ASP.NET framework, but it does not appear to be.

<script for="window" event="onload">
window.document.forms["EditItemForm"].children["DescriptionTextBox"].focus();
</script>

Notice also that the OnSubmit method can get called either by pressing the Enter key, or by clicking on the anchor. When submit occurs via the Enter key, it actually comes in via a post back on the page. When the anchor is clicked, it comes back via the SaveButton_Click method.

Conclusion

I have to say that ASP.NET makes building great looking, powerful and useful web applications really easy. The real hurdle is learning about the .NET Framework classes. There are literally thousands of classes to help you write applications faster. The problem is that when you start, you either won't know that a class exists, or how to use it correctly. Hopefully, this sample will help you get started with your ASP.NET development that much more quickly, by demonstrating how to use some of the key ASP.NET classes. I think you'll end up agreeing that ASP.NET is the killer feature of Microsoft's .NET initiative.