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 is available in the PH 210, PH 47 and all CF labs. Most students will find it convenient to install Visual Web Developer with SQL Server Express (download here) on their personal computers.

You will do your development work in VS or VWD and then 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 while you 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 thumb drive.

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. When you open the samples VWD will ask you if you want to upgrade the web site to .NET Framework version 4.0. Click the "no" button.

Creating your first web site with Visual Web Developer:

1. You will create only one Visual Studio web site in MIS 324. Weekly assignments and the project will be located within subfolders.

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

3. Under the File menu select "New Web Site." This will open a dialog box asking you to specify a template, web site name and location. Select "ASP.NET Empty Web Site" (second option). 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.

4. VS will create a new folder with a single file named web.config.

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

6. 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 appropriately named folders (such as A01, A02, ...). Visual Studio provides a copy feature for copying files from your PC to the server. (see image on right). You should keep a parallel file structure on your PC and the Yorktown server as shown in the image.

1. TimeGreeting.aspx -- Use Visual Web Developer (VWD) to create a time greeting. The assignment uses two label controls to display the dynamic content, the current date and .NET version number. Server-side code is used to assign the time and version information to the labels' 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. 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 method assigns the current time to the text property of the label.

8. Add a second label for the .NET version number. Assign to its text property in the page load, similar to the time. The code to retrieve the version is:

   System.Environment.Version.ToString().Substring(0,3);

   "system.environment.version" retrieves the version, the ToString() method converts it to a string, and Substring parses the first three characters.

9. Test the page by clicking the "View in Browser" icon (next to the green debug arrow). Your page should look similar to the sample page.

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 method to handle the button's click event. Double click on the button in design view and VS will create a handler. Inside the handler method 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 method 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 and 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 method.
   2. In the handler 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.

5. Uploading files to Yorktown. Accessing the Yorktown server explains how to copy files to Yorktown. Important: The root folder in your VS or VWD web site must correspond with your root folder on Yorktown (named something like "121Smith"). The root folder contains certain folders and settings that must only be located in the root folder (App_Code, App_Data, App_WebReferences folders and certain web.config settings). See the bottom image in the Yorktown instructions. The left panel is the root folder of the VS web site and the right panel is your root folder on Yorktown. The files and folders in VS and on Yorktown will typically mirror each other.

Upload only the files and folders created for the assignment. In particular, do not upload the web.config file. We will start using the web.config in assignment 5.

6. Class Roster- Make sure that you have added your name to the on-line class roster. If your name is not on the roster when assignment 1 is graded you will not receive credit.

Congratulations, you have created your first ASP.NET pages!