ASP.NET 2.0 Web Development

Introduction

Web developers are finding out that the ASP.NET AJAX technology results in more effective desktop applications because it uses client-side scripting. AJAX stands for Asynchronous JavaScript and XML. Stated loosely, AJAX is solely a method of data transport that can avoid the post back process by updating only part of the page that needs updating. This is called partial page rendering. The flashy animations are not from AJAX but are the output of DHTML and JavaScript. So, if you have used ASP.NET 2.0 as a web development technology, you can see that this technology differs from that of server-side scripting that aims to separate the markup presentation content from the application logic. This paper is not meant as a substitute for any means of learning the newer ASP.NET AJAX technology. This paper will focus on server-side scripting using managed code to form a desktop application. This desktop application will function to place reservations for banquet rooms (in perhaps a convention center or something). Anyone who is familiar with the code-behind file should overlook this part of the paper, if not the entire paper. It is the writer's belief that a stronger foundation in ASP.NET 2.0 will enable branching off to the client-side ASP.NET AJAX technology.

ASP.NET 2.0 is a web page development technology that simplifies the development process by using web forms. The controls on an ASP page appear in the client's browser, and clicking one of them results in a server-side process of programmatically referencing the control by its ID and therefore executing an event handler. This process produces the corresponding HTML to stream and dynamically change the page's content. Here is a basic example:

<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="resultLabel" /><br />
<asp:Button runat="server" ID="triggerButton" Text="Click Me"
   OnClick="triggerButton_Click" />
</div>
</form>

Notice both the Label control's and the Button control's ID: resultLabel and triggerButton, respectively. The runat="server" attribute means that they will be processed on the server side. Now, here is the code-behind file (using Visual Studio 2005):

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {

   }
   protected void triggerButton_Click(object sender, EventArgs e)
   {
      resultLabel.Text = "Button clicked!";
   }
}

Any instance of a web form in ASP.NET is an instance of the Page class that derives from the System.Web.UI namespace. When using Visual Studio 2005 (or 2008), you can double-click the Button control to reveal the code -behind file and add code for the event handler. Note that the event handler's code involves the IDs of the Label and Button controls. These IDs can be set in the property manager of any Visual Studio web developer IDE. Now, consider the HTML above the code-behind file. The attributes at the top defines the page characteristics that are important to a C# web developer. There is a Language attribute that specifies that you will use C# through your web page. The other three attributes, AutoEventWireup, CodeFile, and Inherits are used to associate the web form with a class in a code -behind file (the file that has an .aspx.cs file extension).

Going back to the design surface, you can see that your controls have been added. Any server controls become part of the object model you are building in your web form. To make this application do something, we must add an event handler for the clicking of the Button. If we double-click the Button, we automatically get an event-handling method as follows:

void triggerButton_Click(object sender, EventArgs e)
{
...

}

This is hooked up to the Button by some code added to the source of the Default.aspx page:

<div>
<asp:Label runat="server" ID="resultLabel" /><br />
<asp:Button runat="server" ID="triggerButton" 
   Text="ClickMe" OnClick="triggerButton_Click" />
</div>

A Desktop Application

To create a desktop application, we have to create the framework for a web application, a Banquet Room Reservation tool. This web form contains fields for user name, event name, banquet room, and attendees, along with a calendar control to select the date. One thing that I have learned is to avoid filling up a page with unnecessary controls. This is why the main body of the form will be enclosed in an HTML table. Inserting a table with, say, three columns and two rows allows the web developer to drag and drop any photographic images that are kept in an images folder that was obtained by right-clicking the Solution Explorer and clicking Add New Folder. The table with columns formats the page with the presentation content, and also serves to keep controls in a proper array. So, here is the procedure: using Visual Studio 2005 (or if you’re using 2008, double-check the code-behind file namespaces), go to File, and then Add New Web Site. Choose C# as the language, and the ASP.NET Web Site template. Delete the contents of the Default.aspx page, and copy and paste this code into your .aspx.cs page:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            calendar.SelectedDate = System.DateTime.Now;
        }
    }

    protected void submitButton_Click(object sender, EventArgs e)
    {
        if (this.IsValid)
        {
            resultLabel.Text = roomList.SelectedItem.Text +
               " has been booked on " +
               calendar.SelectedDate.ToLongDateString() +
               " by " + nameBox.Text + " for " +
               eventBox.Text + " event. ";
            foreach (ListItem attendee in attendeeList.Items)
            {
                if (attendee.Selected)
                {
                    resultLabel.Text += attendee.Text + ", ";
                }
            }
            resultLabel.Text += " and " + nameBox.Text +
               " will be attending.";
        }
    }
}

As you examine the HTML, you will notice that the table is divided into three columns: the first column holds the text labels, the second column holds UI fields corresponding to those text labels, and the third column contains a Calender control for the date selection, which spans four rows. The fifth row contains a submission button spanning all columns. Here is the Default.aspx file to copy and paste in:

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Banquet Room Reservations</title>

</head>
<body>
<form id="form1" runat="server">

<div>
<h1 style="text-align: center;">
Enter details and set a day to initiate an event.
</h1>
</div>
<div style="text-align: center;">
<table style="text-align: left; border-color: #000000; 
              border-width: 2px; background-color: #fff99e;"
  cellspacing="0" cellpadding="8" rules="none" width="540">
<tr>
<td valign="top">
Your Name:
</td>
<td valign="top">
<asp:TextBox ID="nameBox" runat="server" Width="160px" />
<asp:RequiredFieldValidator ID="validateName" runat="server"
 ErrorMessage="You must enter a name."
 ControlToValidate="nameBox" Display="None" />
</td>
<td valign="middle" rowspan="4">
<asp:Calendar ID="calendar" runat="server" BackColor="White" />
</td>
</tr>
<tr>
<td valign="top">
Event Name:
</td>
<td valign="top">
<asp:TextBox ID="eventBox" runat="server" Width="160px" />
<asp:RequiredFieldValidator ID="validateEvent" runat="server"
   ErrorMessage="You must enter an event name."
   ControlToValidate="eventBox" Display="None" />
</td>
</tr>
<tr>
<td valign="top">
Meeting Room:
</td>
<td valign="top">
<asp:DropDownList ID="roomList" runat="server" Width="160px">
<asp:ListItem Value="1">The Accounting Room</asp:ListItem>
<asp:ListItem Value="2">The IT Room</asp:ListItem>
<asp:ListItem Value="3">The Programmers
Room</asp:ListItem>
<asp:ListItem Value="4">The Investors
Room</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="validateRoom" runat="server"
   ErrorMessage="You must select a room."
   ControlToValidate="roomList" Display="None" />
</td>
</tr>
<tr>
<td valign="top">
Attendees:
</td>
<td valign="top">
<asp:ListBox ID="attendeeList" runat="server" 
   Width="160px" SelectionMode="Multiple"
   Rows="6">
<asp:ListItem Value="1">Joe Hart</asp:ListItem>
<asp:ListItem Value="2">Mary DuPont</asp:ListItem>
<asp:ListItem Value="3">Stephen Golden</asp:ListItem>
<asp:ListItem Value="4">Andre the Giant</asp:ListItem>
<asp:ListItem Value="5">Ernest Hemingway</asp:ListItem>
<asp:ListItem Value="6">William Blake </asp:ListItem>
</asp:ListBox>
<asp:RequiredFieldValidator ID="validateAttendees" runat="server"
    ErrorMessage="You must have at least one attendee."
    ControlToValidate="attendeeList" Display="None" />
</td>
</tr>
<tr>
<td align="center" colspan="3">
<asp:Button ID="submitButton" runat="server" 
   Width="100%" Text="Submit meeting  room request" 
   OnClick="submitButton_Click" />
</td>
</tr>
<tr>
<td align="center" colspan="3">
<asp:ValidationSummary ID="validationSummary" runat="server"
   HeaderText="Before submitting your request:" />
</td>
</tr>
</table>
</div>
</form></body></html>

Here is a copy of the output:

Notice the page as three columns that are placed in tabular form. Learning the control, and where they are placed, helps understand Web Parts, a path that can help lead to AJAX.