C#LabC#WebForms.doc

C# Lab: C# Web Forms
C# Lab: Creating Dynamic Web UI Using Web Forms
C# is built from the ground up to create scalable, dynamic applications for the Microsoft® .NET® platform. For the pages that make up the user interface of a dynamic Web application C# brings Visual Basic-like WYSIWYG design and coding techniques to the Web.

Imagine this: you drag a button from the toolbox and drop it on a form. Double-click the button and your view switches to the code view with your cursor already positioned in the appropriate event handler. As you type, IntelliSense statement completion helps you create error-free code, fast. Sound easy? It is, and you’ve just created a form for the Web.

In this lab, you will use the Web Forms designer in Visual Studio.NET to create dynamic, scalable, browser-independent UI for a Web application using the C# programming language.
Note: There are additional Web Forms exercises in the Data and Debugger labs.
Objectives
After completing this lab, you will be able to:
ü Use C# to create dynamic Web pages based on the ASP+ Web Forms technology
ü Add input validation to Web Form fields that executes on both the client and the server without writing any code

Before You Begin
Prerequisites
This lab assumes that you have a computer running Windows 2000 and the Microsoft Visual Studio.NET Beta1 development system.
Background
Web Forms Support in Visual Studio.NET
One of the key benefits of the Web Forms framework over ASP is a clean separation of code from the declarative HTML and XML tags that define the visible elements of a page. Visual Studio.NET separates these two components in a .CS file, which contains the logic for the page, and an ASPX file, which contains the HTML and XML tags.
When you open the ASPX file in Visual Studio, the file is displayed using the Web Forms designer. This designer presents two views of the ASPX file. The Design View lets you edit the visual elements of the form using the familiar drag, drop and click techniques used in Visual Basic programming. HTML View permits you to directly manipulate the declarative HTML and XML tags. You can switch between views by clicking the Design and HTML buttons at the bottom of the page.
When you open the .CS file (or double-click a control in Design View) this file is opened using the C# code editor. You get the full power of the C# programming language plus all of the features of the Visual Studio.NET C# code editor including color-coding, design-time syntax checking and IntelliSense statement completion.

Figure 1. WebForm files in Solution Explorer
Input Validation
Validation controls are added to a Web Form like other server controls. There are controls for specific types of validation, such as range checking or pattern matching, plus a RequiredFieldValidator that ensures a user does not skip an entry field. You can attach more than one validation control to an input control. For example, you might specify that an entry is both required and that it contain a specific range of values.
There are validation controls for specific types of validation, such as range checking or pattern matching. This is the complete list:
Control Name
Description
RequiredFieldValidator
Ensures that the user does not skip an entry.
CompareValidator
Compares a user's entry against a constant value or a property value of another control using a comparison operator (less than, equal, greater than, and so on).
RangeValidator
Checks that a user's entry is between specified lower and upper boundaries. You can check ranges within pairs of numbers, alphabetic characters, and dates. Boundaries can be expressed as constants or as values derived from another control.
RegularExpressionValidator
Checks that the entry matches a pattern defined by a regular expression. This type of validation allows you to check for predictable sequences of characters, such as those in social security numbers, e-mail addresses, telephone numbers, postal codes, and so on.
CustomValidator
Checks the user's entry using validation logic that you code yourself. This type of validation allows you to check for values derived at run time.
ValidationSummary
Displays the validation errors in summary form for all of the validators on a page.

Since the validation controls can display error text, they are typically placed where you want the error text to display. Then the controls are hooked up to an input control (like a TextBox or DropDownList) simply by setting a few properties. The Web Forms framework takes care of the processing the input validation. Validation occurs on the server for all browsers and can optionally occur on the client for certain browsers.
Note: For the Technology PreRelease, client-side validation is supported for Internet Explorer 5 and later only.
Validation controls work with a limited subset of input controls. For each control, a specific property contains the value to be validated. Here are the input controls that may be validated:
Control
Validation Property
HtmlInputText
Value
HtmlTextArea
Value
HtmlSelect
Value
HtmlInputFile
Value
TextBox
Text
ListBox
SelectedItem
DropDownList
SelectedItem
RadioButtonList
SelectedItem

Exercises
The following exercises will allow you to become familiar with the concepts and techniques covered in this lab:
Exercise 1: Create a Web Form in Design View
In this exercise, you will use the Design View of the Web Forms designer to create Web Forms using classical Visual Basic-like drag, drop and click techniques.
Exercise 2: Working in HTML Mode
In this exercise, you will explore the additional features that enable you to directly manipulate the HTML and XML tags that make up the visual elements of a Web Form.
Exercise 3: Input Validation
In this exercise, you will add input validation to a form using extremely easy RAD techniques – no code required. For invalid values, your form will give the user immediate feedback that she can use to correct her input before submitting the form to the Web server.
Exercise 1: Design a Basic Web Form
In this exercise, you will use the Design View of the Web Forms designer to create Web Forms using classical Visual Basic-like drag, drop and click techniques.
º Estimated time to complete this lab: 15 minutes.
þ Create a new Web Application
1. Start Visual Studio.NET.
2. From the File Menu, choose New then Project.
3. In the New Project Dialog, select C# Projects in the left hand list.
4. Select Web Application in the right-hand list.
5. For Name, type WebApplication1
6. For Location, type http://localhost
7. Click OK.
C# creates and opens a new application. The startup form for the project – WebForm1.aspx – is open in the designer.
þ Change the form’s TargetSchema property to HTML 4.0.
For this form, we’ll target features supported only in HTML 4.0 and higher, like in-line style properties.
1. Click any blank part of the form to select it.
2. Find the Properties Window.
3. From the dropdown list at the top of this window, select DOCUMENT.
4. Set TargetSchema to HTML 4.0
þ Set the background color of the form
1. Make sure DOCUMENT is still selected in the Properties window
2. Set bgcolor to any light color.
þ Add some static text
Many forms contain static text. In the Web Forms designer you add text as if you were typing in a word processor like Word.
1. At the top of the form, type: Select a date
2. Press Enter three times.
3. Type: You selected:
4. Press Enter once more.
þ Change the text properties
1. Highlight all of the text
2. Using the buttons in the toolbar, set the font face to Verdana
3. Set the font size to 4.
4. Using the buttons in the toolbar, set the font color to any dark color.
þ Add a Calendar control to the form
1. Verify that the Web Forms tab is selected in the toolbox.
2. Drag a Calendar control to the one of the blank lines between the two lines of text. (You may need to switch the PageLayout property of the Document to GridLayout to move the control).
þ Change the ID property of the Calendar to myCal
1. Make sure the Calendar control is selected.
2. Using the Properties window, set ID to myCal.
þ AutoFormat the Calendar
1. Click the AutoFormat command link in the property grid (in the Properties window, under the Properties listed for myCal).
2. Select a format.
3. Click OK.
þ Add a Label to the page
You’ll set the contents of this label from your code.
1. Verify that the Web Forms tab is selected in the toolbox.
2. Drag a Label control to the blank line beneath the text "You selected:"
þ Change the ID property of the Label to myLabel
1. Make sure the Label control is selected.
2. Using the Properties window, set ID to myLabel.
þ Double-click the Calendar
This will generate a stub event handler for the Calendar’s default event, "SelectionChanged."
1. Double-click the Calendar.
þ Add some code to the myCal_SelectionChanged event handler
1. Within the event handler routine, enter:
myLabel.Text = myCal.SelectedDate.ToShortDateString();
þ Press F5 to run the form
WebForm1.aspx is the default page for the project, so running the project will launch WebForm1.
1. Press F5.
2. Click the days in the Calendar and verify that the label updated with the selected date.
þ Stop the form
1. Close the browser window.
2. Click the stop button.

Exercise 2: Working In HTML View
In this exercise, you will explore the additional features that enable you to directly manipulate the HTML and XML tags that make up the visual elements of a Web Form.
º Estimated time to complete this lab: 15 minutes.
þ Add a new Web Form to the project
1. Close any open forms
2. To create another new Web Form, select Add Web Form from the Project menu
3. For Name, type WebForm2.aspx
4. Click Open to create and open the form.
þ Set this as the project’s startup form
1. Find WebForm2.aspx in the Solution Explorer window.
2. Right-click WebForm2.aspx.
3. Select Set As Start Page from the context menu
þ Add an HTML button to the form
1. Select the form and press Enter a few times to add some blank lines to the form
2. Select the HTML tab in the toolbox.
3. Drag a Button control to the first blank line in the form.
þ Mark the Button to run as a server control
1. Right-click the Button
2. Select Run At Server from the context menu.
þ Add a Label control to the form
1. Select the Web Forms tab in the toolbox.
2. Drag a Label control to the next blank line in the form.
þ Double-click the Button
This will generate a stub event handler for the Html Button’s default event, "ServerClick."
1. Double-click the Button.
þ Add some code to the Button1_ServerClick event handler
1. Within the event handler routine, enter:
Label1.Text = Now.ToShortDateString();
þ Switch to HTML view
1. Click the WebForm2.aspx tab at the top of your workspace. (Alternatively, you can double-click the WebForm1.aspx file in the Solution Explorer window.)
2. Switch to HTML view by clicking on the HTML button in the lower left corner of the editor (next to the Design button).
3. Find the Properties Window.
4. From the dropdown list at the top of this window, select DOCUMENT.
5. Set TargetSchema to HTML 4.0
þ Open the Document Outline window
1. Select View >Other Windows >Document Outline from the menu.
þ Navigate to Label1 using the Document Outline
1. Click the Label1 node in the Document Outline.
2. Position your cursor at a blank space within the <asp:Label> tag for Label1
3. Type: BackColor =
4. Use the inline color picker to choose a BackColor for Label1
Bug: In the Beta1 PreRelease, the color picker may not work when clicking once on the Color Picker, but by moving the caret elsewhere, the Color Picker can be made to appear.
þ Add client event handlers for Button1
1. After the last <meta> tag, and before the </head> tag, add the following code:

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function Button1_onmouseover() {
document.all("Button1").style.backgroundColor="yellow";
}

function Button1_onmouseout() {
document.all("Button1").style.backgroundColor="buttonface";
}

//-->
</SCRIPT>

2. Change the code for Button1 to use the onmouseover and onmouseout functions that we just created:

<input type=button value=Button id=Button1 RUNAT="SERVER" LANGUAGE=javascript onmouseover="return Button1_onmouseover()" onmouseout="return Button1_onmouseout()">

Note: In future versions, and the final release of Visual Studio.NET, the manual process of function stub code generation will no longer be required.
þ Press F5 to run the form
1. Press F5.
2. Click the button to display the label. Note that the background color of the button changes when you hover over it with the mouse.
þ Stop the form
1. Close the browser window.
2. Click the stop button.

Exercise 3: Input Validation
In this exercise, you will add input validation to a form using extremely easy RAD techniques – usually no code is required. For invalid values, your form will give the user immediate feedback that she can use to correct her input before submitting the form to the Web server.
º Estimated time to complete this lab: 15 minutes.
þ Add a new Web Form to the project
1. Close any open forms
2. To create another new Web Form, select Add Web Form from the Project menu
3. For Name, type WebForm3.aspx
4. Click Open to create and open the form.
þ Set this as the project’s startup form
1. Find WebForm3.aspx in the Solution Explorer window.
2. Right-click WebForm3.aspx.
3. Select Set As Start Page from the context menu
þ Add three TextBoxes to the form
1. Select the form and press Enter a few times to add some blank lines to the form
2. Select the Web Forms tab in the toolbox.
3. Drag a TextBox control to the first blank line in the form.
4. Drag a TextBox control to the next line in the form.
5. Set the TextMode property of the TextBox to Password.
6. Drag a TextBox control to the third line in the form.
7. Set the TextMode property of the TextBox to Password.
þ Add an HTML Submit button to the form
1. Select the HTML tab in the toolbox.
2. Drag a Submit Button control to the first blank line in the form.
þ Add three RequiredFieldValidators to the form
1. Select the Web Forms tab in the toolbox.
2. Drop a RequiredFieldValidator to the right of each TextBox.
3. Set the ControlToValidate property of RequiredFieldValidator1 to TextBox1.
4. For Text, type Required!
5. Repeat for each of the other RequiredFieldValidators.
þ Add a CompareValidator to the form
1. Drop a CompareValidator to the right of TextBox3.
2. Set it’s ControlToValidate property to TextBox3.
3. Set the ControlToCompare property to TextBox2.
4. For Text, type Compare Failed!
þ Press F5 to run the form
1. Press F5.
þ Test the form validation
1. First, click the Submit button on the form. You will see the "Require