Assignment 1 - Server Controls, Forms, Validation and Event Handling

Visual Web Developer & SQL Server Express -- MIS 324 uses Visual Studio (VS) and/or Visual Web Developer (VWD) to write and debug ASP.NET code. Visual Studio .NET is available in the PH 210 computer lab and all of the labs in the Communications Building. Most students will find it convenient to install Visual Web Developer with SQL Server 2008 Express (download here) on their personal computers. You will also need SQL Server 2005 Express Edition SP2 (download here).

You will do most of your development work on a PC then use Aspen to upload the finished files to Yorktown for grading. For simplicity, I recommend that you use the same directory structure on your PC and on Yorktown.

Working on campus: VS does not run properly when your files are located on the U drive. If you store files on the U drive, copy them to the desktop to work on them and then copy them back to the U drive when you are finished. VS does work properly with files stored on a memory stick. 

Quickstart Tutorials: Microsoft provides a series of on-line tutorials called the ASP.NET Quickstart Tutorials. You may find it helpful to look at the examples which include both working examples and the source code in both C# and VB.NET.

Textbook Code Samples -- The code samples from the MacDonald book (download here as zip) will be useful for both your assigned reading and assignments. The samples can be opened and run on your PC using Visual Web Developer. I suggest downloading the code samples and putting them on your PC in the following location:

My Documents
    My Webs
       MacDonaldSampleCode
          Chapter03
          Chapter05 ...

To open and run the code samples in Visual Web Developer click on "Open Web Site" and browse down to the individual chapters. Each chapter is configured as a stand-alone web site and the "Chapter0x" folder must be the root folder. For example, to run the examples in Chapter05 open the Chapter05 folder as a web site in Visual Web Developer.

Creating your first web site with Visual Web Developer:

1. Start Visual Web Developer (or Visual Studio).

2. Under "Recent Projects" click "Create: Web Site." This will open a dialog box asking you to specify a template, web site name and location. I suggest locating the web site in the "My Webs" folder and naming it "MIS324". Select language as "C#". Select "ASP.NET Web Site" and click OK.

3. VS will create some files and a directory named "App_Data." By default it creates an empty web page named default.aspx. This page uses code behind which we don't want to use so we will not use this page.

4. To create a new page, under "Solution Explorer" (right side of screen) right-click on "C:\...\MIS324\" and select "Add new Item."

5. This will open a dialogue box. Select "Web Form" and fill in your desired file name (you can change it later). Uncheck "place code in separate file" and click the "Add" button.

Testing the debugger & preview:

1. Type some text between the div tags of the new file. Then click the green arrow in the top menu.

2. VS will ask for permission to modify the web.config file to allow debugging. Click "yes."

3. A new browser window should open and you should see the text that you typed between the div tags.

4. If these steps succeeded, VS is configured correctly and you are ready to start the assignment

I suggest that you organize your assignment files on Yorktown by placing them into an appropriately named folders (such as A01, A02, ...). You only need to upload the .aspx files (not the web.config file, etc.).

---

1. TimeGreeting.aspx -- Use Visual Web Developer (VWD) to create a time greeting. The assignment uses a label control to display the current time.  Server-side code is used to assign the time to the label's text property. Tips:

1. Use VWD to create a new folder named A01. Do this in Solution Explorer by right clicking on "C:\...\MIS324\Assignments" and selecting "New Folder."

2. Create a new .aspx page by right-clicking on the new folder and selecting "Add new Item." Add a new Web Form named TimeGreeting.aspx. Uncheck the box "Place code in separate file." Click the Add button.

3. Adding text and controls is most easily done in Design view. Change from Source to Design view by clicking the "Design" button at the bottom of the screen.

4. Type in the text shown in the sample above. From the HTML section of the Toolbox (left side of screen) drag a Horizontal Rule

5. We will display the time using a label control. Add a label control by dragging a label from the "Standard" section of the Toolbox into the work area.

6. Name the label control "lblTime" Do this by right-clicking on the label and changing its name from Label1 to lblTime.

7. Assign the time to the text property of the label. We will do this when the page loads. Change back to Source view and add the following code between the script tags:
       void Page_Load()
      {
          lblTime.Text = DateTime.Now.ToLongDateString();
      }
   
   We will discuss Page events later, but for now it is enough to know that the Page_Load event fires when the page is loaded. The second line in the subroutine assigns the current time to the text property of the label.

8. Test the page by crossing your fingers and clicking the green debug arrow.

2. HelloPage.aspx -- Create a page with a textbox, a button and a label. When the button is clicked the button's handler assigns the text in the textbox to the text property of the label control.  This exercise is similar to the handout 01_Hello.aspx. Tips:

1. In VS create a new web form as in the previous exercise. Click on "Design" (bottom left-corner) and add the page heading and a <hr> tag. Drag-and-drop from the Toolbox onto the work surface: a textbox, a button and a label. Change their IDs to something descriptive like tbName, btnSubmit, and lblMessage, respectively. You may switch between design view & source view.

2. We need a subroutine to handle the button's click event. Double click on the button in design view and VS will create a handler. Inside the handler subroutine assign the text property of the textbox to the text property of the label:
         lblMessage.Text = "Hello " + tbName.Text + "!";

3. Set the default text property of the textbox to "Please enter your name."

4. Assign a few properties to the label by clicking on the label and changing the properties in the "properties" box on the right side of the screen. Change its default text property to "Please enter your name," its font to bold and its forecolor to red.

3. HelloValid.aspx -- ASP.NET's validation controls are easy to use and provide both client and server side validation. The QuickStart tutorials provide good examples of how to implement the validation controls.

Copy the previous exercise and add two validation controls to it: a RequiredFieldValidator and a RegularExpressionValidator. Tips:

1. In VS design view drag a RequiredFieldValidator from the toolbox and place it below the textbox.
   
2. Do the same with a RegularExpressionValidator.
   
3. Click on the requiredFieldValidator and in the property window (right side of screen) change ControlToValidate to "tbName", ErrorMessage to "Please enter your name" and Display to "Dynamic."
   
4. Click on the RegularExpressionValidator and in the property window change ControlToValidate to tbName, ErrorMessage to "Please enter 2 or more characters," and ValidationExpression to "[a-zA-Z]{2,}" and Display to "Dynamic."
5. To ensure server-side validation the following code must be added to the button's event handler:
      if (!Page.IsValid) return;
   This code must be located prior to assigning text to the label control. This code says "If the page is not valid then terminate execution of this subroutine and display the validation control's error message."

4. CalendarControl.aspx -- ASP.NET includes a few "rich controls" that provide more complex and commonly used functionality such as calendars, advertising rotators and wizards. All of these controls include a large number of properties that methods that allow you to customize them to your needs. Add a calendar control to a page, provide a handler for the "SelectionChanged" event that fires when a date is clicked and add some formatting properties. Tips:

1. Use VS to create a new web form and name it CalendarControl.aspx.
2. Switch to design view.
3. Drag a calendar control from the toolbox (located in the Standard controls section) and change at least three of its formatting properties.
4. Drag a label control from the toolbox and rename it "lblMessage"
5. Create a handler for the calendar's "SelectionChanged" event as follows:
   1. Double click on any day (in design view). This will create a handler subroutine.
   2. In the subroutine add the code:
      lblMessage.Text = "Selected date is " + Calendar1.SelectedDate.ToLongDateString();
      
   3. Documentation for the SelectedDate property with example showing how to handle this event.

---

Congratulations!  You have finished your first ASP.NET pages.