1、C# Lab: Creating Dynamic Web UI Using Web FormsC# 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 W
2、eb. 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. Sou
3、nd easy? It is, and youve 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
4、Debugger labs.ObjectivesAfter 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 codeBefore You BeginPrerequisitesThis lab assu
5、mes that you have a computer running Windows 2000 and the Microsoft Visual Studio.NET Beta1 development system.BackgroundWeb Forms Support in Visual Studio.NETOne 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
6、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 designe
7、r 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 cl
8、icking 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 C# Lab: C# Web Forms2all of the features of the Visual Studio.NE
9、T C# code editor including color-coding, design-time syntax checking and IntelliSense statement completion.Figure 1. WebForm files in Solution ExplorerInput ValidationValidation controls are added to a Web Form like other server controls. There are controls for specific types of validation, such as
10、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
11、 are validation controls for specific types of validation, such as range checking or pattern matching. This is the complete list: Control Name DescriptionRequiredFieldValidator Ensures that the user does not skip an entry.CompareValidatorCompares a users entry against a constant value or a property
12、value of another control using a comparison operator (less than, equal, greater than, and so on).RangeValidatorChecks that a users 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 con
13、stants or as values derived from another control.RegularExpressionValidatorChecks 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, telepho
14、ne numbers, postal codes, and so on.CustomValidatorChecks the users entry using validation logic that you code yourself. This type of validation allows you to check for values derived at run time.C# Lab: C# Web Forms3ValidationSummary Displays the validation errors in summary form for all of the val
15、idators 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 t
16、he 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 su
17、bset 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 PropertyHtmlInputText ValueHtmlTextArea ValueHtmlSelect ValueHtmlInputFile ValueTextBox TextListBox SelectedItemDropDownList Selecte
18、dItemRadioButtonList SelectedItemExercisesThe 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 ViewIn this exercise, you will use the Design View of the Web Forms designer to create Web Forms using clas
19、sical Visual Basic-like drag, drop and click techniques. Exercise 2: Working in HTML ModeIn 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 ValidationIn this exercis
20、e, 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.C# Lab: C# Web Forms4Exercise 1: Design a Basic Web
21、FormIn 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 Application1. Start Visual Studio.NET.2. From the File Menu, choose Ne
22、w 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:/localhost7. Click OK.C# creates and opens a new application. The startup form for the project WebForm1.
23、aspx is open in the designer. Change the forms TargetSchema property to HTML 4.0.For this form, well 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 t
24、op of this window, select DOCUMENT.4. Set TargetSchema to HTML 4.0 Set the background color of the form1. Make sure DOCUMENT is still selected in the Properties window2. Set bgcolor to any light color. Add some static textMany forms contain static text. In the Web Forms designer you add text as if y
25、ou were typing in a word processor like Word.1. At the top of the form, type: Select a date2. Press Enter three times.3. Type: You selected: 4. Press Enter once more. Change the text properties1. Highlight all of the text2. Using the buttons in the toolbar, set the font face to Verdana3. Set the fon
26、t size to 4.4. Using the buttons in the toolbar, set the font color to any dark color. Add a Calendar control to the form1. Verify that the Web Forms tab is selected in the toolbox.C# Lab: C# Web Forms52. Drag a Calendar control to the one of the blank lines between the two lines of text. (You may n
27、eed to switch the PageLayout property of the Document to GridLayout to move the control). Change the ID property of the Calendar to myCal1. Make sure the Calendar control is selected.2. Using the Properties window, set ID to myCal. AutoFormat the Calendar1. Click the AutoFormat command link in the p
28、roperty grid (in the Properties window, under the Properties listed for myCal).2. Select a format.3. Click OK. Add a Label to the pageYoull 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
29、text “You selected:“ Change the ID property of the Label to myLabel1. Make sure the Label control is selected.2. Using the Properties window, set ID to myLabel. Double-click the CalendarThis will generate a stub event handler for the Calendars default event, “SelectionChanged.“1. Double-click the Ca
30、lendar. Add some code to the myCal_SelectionChanged event handler1. Within the event handler routine, enter:myLabel.Text = myCal.SelectedDate.ToShortDateString(); Press F5 to run the formWebForm1.aspx is the default page for the project, so running the project will launch WebForm1.1. Press F5.2. Cli
31、ck the days in the Calendar and verify that the label updated with the selected date. Stop the form1. Close the browser window.2. Click the stop button.C# Lab: C# Web Forms6Exercise 2: Working In HTML ViewIn this exercise, you will explore the additional features that enable you to directly manipula
32、te 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 project1. Close any open forms2. To create another new Web Form, select Add Web Form from the Project menu3. For Name, type WebForm2.aspx4. Click Open t
33、o create and open the form. Set this as the projects startup form1. 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 form1. Select the form and press Enter a few times to add some blank lines t
34、o the form2. 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 control1. Right-click the Button2. Select Run At Server from the context menu. Add a Label control to the form1. Select the Web Forms tab in the toolbox.2.
35、 Drag a Label control to the next blank line in the form. Double-click the ButtonThis will generate a stub event handler for the Html Buttons default event, “ServerClick.“1. Double-click the Button. Add some code to the Button1_ServerClick event handler1. Within the event handler routine, enter:Labe
36、l1.Text = Now.ToShortDateString(); Switch to HTML view1. 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
37、 (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 window1. Select View Other Windows Document Outline from the menu.C# Lab: C# Web Forms7 Navigate to Label1 using
38、the Document Outline1. Click the Label1 node in the Document Outline.2. Position your cursor at a blank space within the tag for Label13. Type: BackColor =4. Use the inline color picker to choose a BackColor for Label1Bug: In the Beta1 PreRelease, the color picker may not work when clicking once on
39、the Color Picker, but by moving the caret elsewhere, the Color Picker can be made to appear. Add client event handlers for Button11. After the last tag, and before the tag, add the following code:2. Change the code for Button1 to use the onmouseover and onmouseout functions that we just created:Note
40、: 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 form1. Press F5.2. Click the button to display the label. Note that the background color of the button changes when you hover over it
41、with the mouse. Stop the form1. Close the browser window.2. Click the stop button.C# Lab: C# Web Forms8Exercise 3: Input ValidationIn 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 us
42、er 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 project1. Close any open forms2. To create another new Web Form, select Add Web Form from the Project menu3. For Name,
43、type WebForm3.aspx4. Click Open to create and open the form. Set this as the projects startup form1. 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 form1. Select the form and press Enter a f
44、ew times to add some blank lines to the form2. 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
45、line in the form.7. Set the TextMode property of the TextBox to Password. Add an HTML Submit button to the form1. 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 form1. Select the Web Forms tab in the to
46、olbox.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 form1. Drop a CompareValidator to the rig
47、ht of TextBox3.2. Set its ControlToValidate property to TextBox3.3. Set the ControlToCompare property to TextBox2.4. For Text, type Compare Failed! Press F5 to run the form1. Press F5.C# Lab: C# Web Forms9 Test the form validation1. First, click the Submit button on the form. You will see the “Requi
48、red!“ message appear next to each textbox. 2. Enter a value in the first textbox, then select the second textbox. Youll note that the “Required“ message next to the textbox disappears.3. Repeat for the second textbox. This ones TextMode is set to password, so your input will be displayed only as ast
49、erisks. 4. In the third field, enter a different value than for the second field, then select one of the other textboxes. You will see the “Compare Failed!“ message next to the last textbox.5. Finally, enter the same value in the second and third textboxes, then select the first textbox. Youll note that the “Compare Failed!“ message next to the textbox disappears. Stop the form1. Close the browser window.2. Click the stop button.
