Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

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. Use the same directory structure on your PC and on Yorktown.

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 on the desktop and giving it the same name as your parent folder on Yorktown (ie. 141Username). Select language as "C#". Select "ASP.NET Empty Web Site" and click OK.

  4. Target Framework - Change the target framework to 4.0. In Solution Explorer right-click on "C:\..." and select Property Pages. Select Build and "Target Framework" 4.0. The server is running 4.0 so this will avoid problems when you transfer your code to the server.

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

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

  7. 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" 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.

Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.