Section 21.5. Web Controls
21.5. Web ControlsThis section introduces some of the Web controls located in the Standard section of the Toolbox (Fig. 21.9). Figure 21.15 summarizes some of the Web controls used in the chapter examples.
21.5.1. Text and Graphics ControlsFigure 21.16 depicts a simple form for gathering user input. This example uses all the controls listed in Fig. 21.15, except Label, which you used in Section 21.4. The code in Fig. 21.16 was generated by Visual Web Developer in response to dragging controls onto the page in Design mode. To begin, create an ASP.NET Web Site named WebControls. [Note: This example does not contain any functionalityi.e., no action occurs when the user clicks Register. In subsequent examples, we demonstrate how to add functionality to many of these Web controls.] Figure 21.16. Web Form that demonstrates Web controls.
Before discussing the Web controls used in this ASPX file, we explain the XHTML that creates the layout seen in Fig. 21.16. The page contains an h3 heading element (line 16), followed by a series of additional XHTML blocks. We place most of the Web controls inside p elements (i.e., paragraphs), but we use an XHTML table element (lines 2555) to organize the Image and TextBox controls in the user information section of the page. In the preceding section, we described how to add heading elements and paragraphs visually without manipulating any XHTML in the ASPX file directly. Visual Web Developer allows you to add a table in a similar manner. Adding an XHTML Table to a Web FormTo create a table with two rows and two columns in Design mode, select the Insert Table command from the Layout menu. In the Insert Table dialog that appears, select the Custom radio button. In the Layout group box, change the values of Rows and Columns to 2. By default, the contents of a table cell are aligned vertically in the middle of the cell. We changed the vertical alignment of all cells in the table by clicking the Cell Properties… button, then selecting top from the Vertical align combo box in the resulting dialog. This causes the content of each table cell to align with the top of the cell. Click OK to close the Cell Properties dialog, then click OK to close the Insert Table dialog and create the table. Once a table is created, controls and text can be added to particular cells to create a neatly organized layout. Setting the Color of Text on a Web FormNotice that some of the instructions to the user on the form appear in a teal color. To set the color of a specific piece of text, highlight the text and select Format > Foreground color…. In the Color Picker dialog, click the Named Colors tab and choose a color. Click OK to apply the color. Note that the IDE places the colored text in an XHTML span element (e.g., lines 2223) and applies the color using the span's style attribute. Examining Web Controls on a Sample Registration FormLines 2021 of Fig. 21.16 define an Image control, which inserts an image into a Web page. The images used in this example are located in the chapter's examples directory. You can download the examples from www.deitel.com/books/vbforprogrammers2. Before an image can be displayed on a Web page using an Image Web control, the image must first be added to the project. We added an Images folder to this project (and to each example project in the chapter that uses images) by right clicking the location of the project in the Solution Explorer, selecting New Folder and entering the folder name Images. We then added each of the images used in the example to this folder by right clicking the folder, selecting Add Existing Item… and browsing for the files to add. You can also drag a folder full of images onto the project's location in the Solution Explorer to add the folder and all the images to the project. The ImageUrl property (line 21) specifies the location of the image to display in the Image control. To select an image, click the ellipsis next to the ImageUrl property in the Properties window and use the Select Image dialog to browse for the desired image in the project's Images folder. When the IDE fills in the ImageUrl property based on your selection, it includes a tilde and forward slash (~/) at the beginning of the ImageUrlthis indicates that the Images folder is in the root directory of the project (i.e., http://localhost/WebControls, whose physical path is C:\Inetpub\wwwroot\WebControls). Lines 2555 contain the table element created by the steps discussed previously. Each td element contains an Image control and a TextBox control, which allows you to obtain text from the user and display text to the user. For example, lines 3031 define a TextBox control used to collect the user's first name. Lines 6473 define a DropDownList. This control is similar to the Windows ComboBox control. When a user clicks the drop-down list, it expands and displays a list from which the user can make a selection. Each item in the drop-down list is defined by a ListItem element (lines 6672). After dragging a DropDownList control onto a Web Form, you can add items to it using the ListItem Collection Editor. This process is similar to customizing a ListBox in a Windows application. In Visual Web Developer, you can access the ListItem Collection Editor by clicking the ellipsis next to the Items property of the DropDownList, or by using the DropDownList Tasks menu. You can open this menu by clicking the small arrowhead that appears in the upper-right corner of the control in Design mode (Fig. 21.17). This menu is called a smart tag menu. Visual Web Developer displays smart tag menus for many ASP.NET controls to facilitate common tasks. Clicking Edit Items... in the DropDownList Tasks menu opens the ListItem Collection Editor, which allows you to add ListItem elements to the DropDownList. Figure 21.17. DropDownList Tasks smart tag menu. The HyperLink control (lines 7680 of Fig. 21.16) adds a hyperlink to a Web page. The NavigateUrl property (line 77) of this control specifies the resource (i.e., http://www.deitel.com) that is requested when a user clicks the hyperlink. Setting the Target property to _blank specifies that the requested Web page should open in a new browser window. By default, HyperLink controls cause pages to open in the same browser window. Lines 8996 define a RadioButtonList control, which provides a series of radio buttons from which the user can select only one. Like options in a DropDownList, individual radio buttons are defined by ListItem elements. Note that, like the DropDownList Tasks smart tag menu, the RadioButtonList Tasks smart tag menu also provides an Edit Items… link to open the ListItem Collection Editor. The final Web control in Fig. 21.16 is a Button (lines 99100). A Button Web control represents a button that triggers an action when clicked. This control typically maps to an XHTML input element with attribute type set to "button". As stated earlier, clicking the Register button in this example does not do anything. 21.5.2. AdRotator ControlWeb pages often contain product or service advertisements, which usually consist of images. Although Web site authors want to include as many sponsors as possible, Web pages can display only a limited number of advertisements. To address this problem, ASP.NET provides the AdRotator Web control for displaying advertisements. Using advertisement data located in an XML file, an AdRotator randomly selects an image to display and generates a hyperlink to the Web page associated with that image. Browsers that do not support images display alternate text that is specified in the XML document. If a user clicks the image or substituted text, the browser loads the Web page associated with that image. Demonstrating the AdRotator Web ControlFigure 21.18 demonstrates the AdRotator Web control. In this example, the "advertisements" that we rotate are the flags of 10 countries. When a user clicks the displayed flag image, the browser is redirected to a Web page containing information about the country that the flag represents. If a user refreshes the browser or requests the page again, one of the eleven flags is again chosen at random and displayed. Figure 21.18. Web Form that demonstrates the AdRotator Web control.
The ASPX file in Fig. 21.18 is similar to that in Fig. 21.4. However, instead of XHTML text and a Label, this page contains XHTML text (the H3 element in line 17) and an AdRotator control named countryRotator (lines 1819). This page also contains an XmlDataSource control (lines 2022), which supplies the data to the AdRotator control. The background attribute of the page's body element (line 13) is set to the image background.png, located in the project's Images folder. To specify this file, click the ellipsis provided next to the Background property of DOCUMENT in the Properties window and use the resulting dialog to select background.png from the Images folder. The images and XML file used in this example are both located in the chapter's examples directory. You do not need to add any code to the code-behind file, because the AdRotator control "does all the work." The output depicts two different requests. Figure 21.18(a) shows the first time the page is requested, when the American flag is shown. In the second request, as shown in Figure 21.18(b), the French flag is displayed. Figure 21.18(c) depicts the Web page that loads when the French flag is clicked. Connecting Data to an AdRotator ControlAn AdRotator control accesses an XML file (presented shortly) to determine what advertisement (i.e., flag) image, hyperlink URL and alternate text to display and include in the page. To connect the AdRotator control to the XML file, we create an XmlDataSource controlone of several ASP.NET data controls (found in the Data section of the Toolbox) that encapsulate data sources and make such data available for Web controls. An XmlDataSource references an XML file containing data that will be used in an ASP.NET application. Later in the chapter, you will learn more about data-bound Web controls, as well as the SqlDataSource control, which retrieves data from a SQL Server database, and the ObjectDataSource control, which encapsulates an object that makes data available. To build this example, we first add the XML file AdRotatorInformation.xml to the project. Each project created in Visual Web Developer contains an App_Data folder, which is intended to store all the data used by the project. Right click this folder in the Solution Explorer and select Add Existing Item…, then browse for AdRotatorInformation.xml on your computer. We provide this file in the chapter's examples directory in the subdirectory named exampleXMLFiles. After adding the XML file to the project, drag an AdRotator control from the Toolbox to the Web Form. The AdRotator Tasks smart tag menu will open automatically. From this menu, select <New Data Source…> from the Choose Data Source drop-down list to start the Data Source Configuration Wizard. Select XML File as the data-source type. This causes the wizard to create an XmlDataSource with the ID specified in the bottom half of the wizard dialog. We set the ID of the control to adXmlDataSource. Click OK in the Data Source Configuration Wizard dialog. The Configure Data Source - adXmlDataSource dialog appears next. In this dialog's Data File section, click Browse… and, in the Select XML File dialog, locate and select the XML file you added to the App_Data folder. Click OK to exit this dialog, then click OK to exit the Configure Data Source - adXmlDataSource dialog. After completing these steps, the AdRotator is configured to use the XML file to determine which advertisements to display. Examining an XML File Containing Advertisement InformationXML document AdRotatorInformation.xml (Fig. 21.19)or any XML document used with an AdRotator controlmust contain one Advertisements root element (lines 494). Within that element can be several Ad elements (e.g., lines 512), each of which provides information about a different advertisement. Element ImageUrl (line 6) specifies the path (location) of the advertisement's image, and element NavigateUrl (lines 79) specifies the URL for the Web page that loads when a user clicks the advertisement. Note that we reformatted this file for presentation purposes. The actual XML file cannot contain any whitespace before or after the URL in the NavigateUrl element, or the whitespace will be considered part of the URL, and the page will not load properly. Figure 21.19. XML file containing advertisement information used in AdRotator example.
The AlternateText element (line 10) nested in each Ad element contains text that displays in place of the image when the browser cannot locate or render the image for some reason (i.e., the file is missing, or the browser is not capable of displaying it), or to assist the visually impaired. The AlternateText element's text is also a tooltip that Internet Explorer displays when a user places the mouse pointer over the image (Fig. 21.18). The Impressions element (line 56) specifies how often a particular image appears, relative to the other images. An advertisement that has a higher Impressions value displays more frequently than an advertisement with a lower value. In our example, the advertisements display with equal probability, because the value of each Impressions element is set to 1. 21.5.3. Validation ControlsThis section introduces a different type of Web control, called a validation control (or validator), which determines whether the data in another Web control is in the proper format. For example, validators could determine whether a user has provided information in a required field or whether a ZIP-code field contains exactly five digits. Validators provide a mechanism for validating user input on the client. When the XHTML for our page is created, the validator is converted into ECMAScript[1] that performs the validation. ECMAScript is a scripting language that enhances the functionality and appearance of Web pages and is typically executed on the client. However, some clients do not support scripting or disable scripting. So, for security reasons, validation is always performed on the serverwhether or not scripting is enabled on the client.
Validating Input in a Web FormThe example in this section prompts the user to enter a name, e-mail address and phone number. A Web site could use a form like this to collect contact information from site visitors. After the user enters any data, but before the data is sent to the Web server, validators ensure that the user entered a value in each field and that the e-mail address and phone number values are in an acceptable format. In this example, (555) 123-4567, 555-123-4567 and 123-4567 are all considered valid phone numbers. Once the data is submitted, the Web server responds by displaying an appropriate message and an XHTML table repeating the submitted information. Note that a real business application would typically store the submitted data in a database or in a file on the server. We simply send the data back to the form to demonstrate that the server received the data. Figure 21.20 presents the ASPX file. Like the Web Form in Fig. 21.16, this Web Form uses a table to organize the page's contents. Lines 2425, 3637 and 5859 define TextBoxes for retrieving the user's name, e-mail address and phone number, respectively, and line 78 defines a Submit button. Lines 8082 create a Label named outputLabel that displays the response from the server when the user successfully submits the form. Notice that outputLabel's Visible property is initially set to False (line 81), so the Label does not appear in the client's browser when the page loads for the first time. Figure 21.20. Validators used in a Web Form that retrieves user's contact information.
Using RequiredFieldValidator ControlsIn this example, we use three RequiredFieldValidator controls (found in the Validation section of the Toolbox) to ensure that the name, e-mail address and phone number TextBoxes are not empty when the form is submitted. A RequiredFieldValidator makes an input control a required field. If such a field is empty, validation fails. For example, lines 2630 define RequiredFieldValidator nameInputValidator, which confirms that nameTextBox is not empty. Line 28 associates nameTextBox with nameInputValidator by setting the validator's ControlToValidate property to nameTextBox. This indicates that nameInputValidator verifies the nameTextBox's contents. We set the value of this property (and the validator's other properties) by selecting the validator in Design mode and using the Properties window to specify property values. Property ErrorMessage's text (line 29) is displayed on the Web Form if the validation fails. If the user does not input any data in nameTextBox and attempts to submit the form, the ErrorMessage text is displayed in red. Because we set the validator's Display property to Dynamic (line 28), the validator is displayed on the Web Form only when validation fails. Space is allocated dynamically when validation fails, causing the controls below the validator to shift downward to accommodate the ErrorMessage, as seen in Fig. 21.20(a)(c). Using RegularExpressionValidator ControlsThis example also uses RegularExpressionValidator controls to match the e-mail address and phone number entered by the user against regular expressions. (Regular expressions are introduced in Chapter 16.) These controls determine whether the e-mail address and phone number were each entered in a valid format. For example, lines 4451 create a RegularExpressionValidator named emailFormatValidator. Line 46 sets property ControlToValidate to emailTextBox to indicate that emailFormatValidator verifies the emailTextBox's contents. A RegularExpressionValidator's ValidationExpression property specifies the regular expression that validates the ControlToValidate's contents. Clicking the ellipsis next to property ValidationExpression in the Properties window displays the Regular Expression Editor dialog, which contains a list of Standard expressions for phone numbers, ZIP codes and other formatted information. You can also write your own custom expression. For the emailFormatValidator, we selected the standard expression Internet e-mail address, which uses the validation expression \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* This regular expression indicates that an e-mail address is valid if the part of the address before the @ symbol contains one or more word characters (i.e., alphanumeric characters or underscores), followed by zero or more strings comprised of a hyphen, plus sign, period or apostrophe and additional word characters. After the @ symbol, a valid e-mail address must contain one or more groups of word characters potentially separated by hyphens or periods, followed by a required period and another group of one or more word characters potentially separated by hyphens or periods. For example, bob.white@email.com, bob-white@my-email.com and bob's-personal.email@white.email.com are all valid e-mail addresses. If the user enters text in the emailTextBox that does not have the correct format and either clicks in a different text box or attempts to submit the form, the ErrorMessage text is displayed in red. We also use RegularExpressionValidator phoneFormatValidator (lines 6673) to ensure that the phoneTextBox contains a valid phone number before the form is submitted. In the Regular Expression Editor dialog, we select U.S. phone number, which assigns ((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4} to the ValidationExpression property. This expression indicates that a phone number can contain a three-digit area code either in parentheses and followed by an optional space or without parentheses and followed by required hyphen. After an optional area code, a phone number must contain three digits, a hyphen and another four digits. For example, (555) 123-4567, 555-123-4567 and 123-4567 are all valid phone numbers. If all five validators are successful (i.e., each TextBox is filled in, and the e-mail address and phone number provided are valid), clicking the Submit button sends the form's data to the server. As shown in Fig. 21.20(d), the server then responds by displaying the submitted data in the outputLabel (lines 8082). Examining the Code-Behind File for a Web Form That Receives User InputFigure 21.21 depicts the code-behind file for the ASPX file in Fig. 21.20. Notice that this code-behind file does not contain any implementation related to the validators. We say more about this soon. Figure 21.21. Code-behind file for a Web Form that obtains a user's contact information.
Web programmers using ASP.NET often design their Web pages so that the current page reloads when the user submits the form; this enables the program to receive input, process it as necessary and display the results in the same page when it is loaded the second time. These pages usually contain a form that when submitted, sends the values of all the controls to the server and causes the current page to be requested again. This event is known as a postback. Line 11 uses the IsPostBack property of class Page to determine whether the page is being loaded due to a postback. The first time that the Web page is requested, IsPostBack is False, and the page displays only the form for user input. When the postback occurs (from the user clicking Submit), IsPostBack is true. Lines 1315 use the Request object to retrieve the values of nameTextBox, emailTextBox and phoneTextBox from the NameValueCollection Form. When data is posted to the Web server, the XHTML form's data is accessible to the Web application through the Request object's Form array. Lines 1824 append to outputLabel's Text a line break, an additional message and an XHTML table containing the submitted data so the user knows that the server received the data correctly. In a real business application, the data would be stored in a database or file at this point in the application. Line 25 sets the outputLabel's Visible property to TRue, so the user can see the thank you message and submitted data. Examining the Client-Side XHTML for a Web Form with ValidationFigure 21.22 shows the XHTML and ECMAScript sent to the client browser when Validation.aspx loads after the postback. (We added the comments in lines 12.) To view this code, select View > Source in Internet Explorer. Lines 2755, lines 126190 and lines 196212 contain the ECMAScript that provides the implementation for the validation controls and for performing the postback. ASP.NET generates this ECMAScript. You do not need to be able to create or even understand ECMAScriptthe functionality defined for the controls in our application is converted to working ECMAScript for us. Figure 21.22. XHTML and ECMAScript generated by ASP.NET and sent to the browser when Validation.aspx is requested.
The EnableViewState attribute determines whether a Web control's value is retained when a postback occurs. Previously, we explicitly set this attribute to False. The default value, true, indicates that the control's value is retained. In Fig. 21.20(d), notice that the user input is retained after the postback occurs. A hidden input in the XHTML document (lines 1725 of Fig. 21.22) contains the data of the controls on this page. This element is always named __VIEWSTATE and stores the controls' data as an encoded string. Performance Tip 21.1
|
EAN: 2147483647
Pages: 435