Creating Web Applications Using ASP.NET 2.0

Transcription

1 12 Creating Web Applications Using ASP.NET Chapter CXXXX Page 1 07/14/06--JHR After studying Chapter 12, you should be able to: Define the terms used when talking about the Web Create a Web application Add static text, controls, and code to a Web form Save, close, open, and start a Web application View a Web form in a browser Align the text and controls on a Web form Create a hyperlink Explain the important properties of a RadioButtonList control and DropDownList control Include an Image control and an ImageButton control on a Web form

2 2 Chapter 12 Creating Web Applications Using ASP.NET 2.0 WEB TERMINOLOGY The Internet is the world s largest computer network, connecting millions of computers located all around the world. One of the most popular features of the Internet is the World Wide Web, often referred to simply as WWW or the Web. The Web consists of documents called Web pages that are stored on Web servers. A Web server is a computer that contains special software that serves up Web pages in response to requests from clients. A client is a computer that requests information from a Web server. The information is requested and subsequently viewed through the use of a program called a Web browser or, more simply, a browser. Currently, the two most popular browsers are Microsoft Internet Explorer and Netscape Communicator. Figure 12.1 illustrates the relationship between a client, a browser, and a Web server. request for a Web page Client with browser FIGURE 12.1 HTML document sent Web server with HTML documents Illustration of the relationship between a client, a browser, and a Web server Many Web pages are static. A static Web page is a document whose purpose is merely to display information to the viewer. You can create a static Web page by opening a document in a text editor (such as Notepad) and then saving the document using a filename extension of.htm or.html. Within the document you enter the information you want displayed on the Web page. You then can use HTML (Hypertext Markup Language) tags to tell the browser how to display the information. For example, to instruct the browser to display the word Hello in italics, you can use the <I> and </I> tags, like this: <I>Hello</I>. Similarly, to display the word Hello in boldface, you can use the <B> and </B> tags as shown here: <B>Hello</B>. Figure 12.2 shows a static Web page created for the Greenview Toy Store. Displayed on the Web page are the store s name, address, telephone number, and business hours. 12 Chapter CXXXX Page 2 07/14/06--JHR

3 Web Terminology 3 FIGURE 12.2 Example of a static Web page 12 Chapter CXXXX Page 3 07/14/06--JHR Every Web page has a unique address that indicates its location on the Web. The address is called a Uniform Resource Locator or, more simply, a URL. To view a Web page, you enter the page s URL in the appropriate box of a Web browser; the appropriate box depends on the browser you are using. As Figure 12.2 indicates, you enter the URL in the Address box in Microsoft Internet Explorer. A URL consists of four parts. The first part of the URL shown in Figure 12.2, refers to the HTTP communication protocol, which is the protocol used to transmit Web pages on the Web. A protocol is an agreement between a sender and a receiver regarding how data are sent and interpreted. If you do not enter the communication protocol in a URL, Web browsers assume the HTTP protocol. The second part of the URL is the name of the Web server where the document resides. The Web server can be a remote computer or your local machine, and is often referred to as the host. In the URL shown in Figure 12.2, the Web server s name is localhost and refers to the user s local machine. The third part of the URL is the path, which specifies the location of the document on the Web server. The URL shown in Figure 12.2 indicates that the document is located in the public_html folder on the localhost server. It is important that the path you enter in the URL is exact; otherwise, the browser will not be able to locate the document. If you do not specify a path, the Web server assumes that the document is contained in a default location on the server. The network administrator defines the default location when the Web server is configured. The last part of the URL specifies the name of the document in this case, greenview.html. If you do not specify the name, most Web servers send a default home page to the Web browser. When you type a URL in the Address box and then press the Enter key, the browser looks for the Web server specified in the URL. If the browser is able to locate the server, it submits your request. When the server receives a request for a static Web page, it locates the file, opens it, and then transfers its contents to the browser. The browser interprets the HTML instructions it receives and renders the Web page on the client s screen. One drawback of static Web pages is that they are not interactive. The only interaction that can occur between static Web pages and the user is through links that allow the user to jump from one Web page to another. Although static Web pages provide a means for a store such as the Greenview Toy Store to list its location and hours, a company wanting to do business on the Web must be able to do more than just list information. Rather, it must be able to interact with customers through its Web site. The Web site should allow customers to submit inquiries,

4 4 Chapter 12 Creating Web Applications Using ASP.NET 2.0 select items for purchase, provide shipping information, and submit payment information. It also should allow the company to track customer inquiries and process customer orders. Tasks such as these can be accomplished using dynamic Web pages. Unlike a static Web page, a dynamic Web page is interactive: it can accept information from the user and also retrieve information for the user. Examples of dynamic Web pages that you might have already used include forms for purchasing merchandise online and submitting online resumes. Figure 12.3 shows an example of a dynamic Web page that converts American dollars to British pounds. To use the Web page, you enter the number of American dollars in the American dollars box and then click the Convert button. The button s Click event procedure displays the corresponding number of British pounds on the Web page. Recall that Windows forms are created in the Windows Form Designer window. FIGURE 12.3 In this chapter, you learn how to create Web applications using ASP.NET 2.0, Microsoft s newest technology for creating Web applications containing dynamic (interactive) Web pages. ASP is an acronym for Active Server Pages the first server-side Web programming technology introduced by Microsoft. CREATING A WEB APPLICATION Example of a dynamic Web page You create (or design) a Web page in the Web Form Designer window. You open the window in Visual Web Developer 2005 Microsoft s newest product for creating Web applications. Visual Web Developer 2005 is available as a stand-alone product (called Visual Web Developer 2005 Express Edition) or as part of Visual Studio (You can download a copy of Visual Web Developer 2005 Express Edition from Microsoft s Web site. At the time of this writing, the address is Figure 12.4 shows the procedure you follow to create a Web application using Visual Web Developer Chapter CXXXX Page 4 07/14/06--JHR

5 Creating a Web Application 5 HOW TO Create a Web Application 1. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. If you are using Visual Studio 2005, click File on the menu bar, point to New, and then click Web Site. If you are using Visual Web Developer 2005 Express Edition, click File on the menu bar, then click New Web Site. The New Web Site dialog box opens with ASP.NET Web Site selected in the Visual Studio installed templates section. 2. Select File System in the Location list box, if necessary. 3. Select Visual Basic in the Language list box, if necessary. 4. Enter the name of, as well as the path to, the folder that will store the Web application. Figure 12.5 shows a completed New Web Site dialog box. 5. Click the OK button to close the New Web Site dialog box. A new Web application appears on the screen. See Figure Click the Design tab on the Web Form Designer window, then use the Properties window to assign a more meaningful value to the DOCUMENT object s Title property. See Figure Chapter CXXXX Page 5 07/14/06--JHR FIGURE 12.4 How to create a Web application The first four steps in Figure 12.4 contain the instructions for opening and completing the New Web Site dialog box. Notice that, in Step 2, you are instructed to select File System in the dialog box s Location box. The File System selection allows you to store your Web application in any folder on your computer or a network drive; in this chapter, you will store your Web applications in project folders contained in the VbReloaded\Chap12 folder. Also available in the Location box are the HTTP and FTP selections. If you select HTTP in the Location box, your Web application will be stored in the location set up by Internet Information Services (IIS), a program that manages the Web server for computers using Microsoft Windows. The FTP selection is available for publishing your application on a remote computer. Figure 12.5 shows an example of a completed New Web Site dialog box.

6 6 Chapter 12 Creating Web Applications Using ASP.NET 2.0 Use this template to create a Web application FIGURE 12.5 Completed New Web Site dialog box When you close the New Web Site dialog box, a new Web application appears in the Web Form Designer window, as shown in Figure The application contains a Web form file, or Web page, named Default.aspx. The name appears on the tab at the top of the designer window and also in the Solution Explorer window. The Design and Source tabs that appear at the bottom of the designer window allow you to view the Design and Source panes, respectively. You use the Design pane (which you will view in the next section) to add text and controls to the Web page. The Source pane, which is shown in Figure 12.6, contains the HTML tags that tell a browser how to render the Web page. It is not necessary to know HTML to create a Web page in Visual Web Developer 2005, because the tags are automatically generated as you are designing the Web page in the Design pane. 12 Chapter CXXXX Page 6 07/14/06--JHR

7 Creating a Web Application 7 Name of the Web form file (Web page) Name of the Visual Basic code file Name of the Visual Basic code file Name of the Web form file (Web page) Tabs 12 Chapter CXXXX Page 7 07/14/06--JHR Value entered in the DOCUMENT s Title property FIGURE 12.6 New Web application In addition to the Default.aspx file, the application also contains a file named Default.aspx.vb. As you learned in Chapter 1, the.vb extension on a filename indicates that the file is a Visual Basic source file, which is a file that contains Visual Basic code. In this case, the Default.aspx.vb file will contain the code you enter to tell the objects on the Web page how to respond to the user s actions, such as clicking and double-clicking. The Default.aspx.vb name appears in the Solution Explorer window. It also appears in the first instruction in the Source pane; as the instruction indicates, the Default.aspx.vb file is referred to as the code file. The last step in the procedure shown in Figure 12.4 is to assign a more meaningful value to the Title property of the DOCUMENT object, which is the Web form itself. When the Web form is displayed in a browser, the value in its Title property (in this case, Gentry Supplies) appears in the browser s title bar, as shown in Figure FIGURE 12.7 Title bar showing the DOCUMENT s Title property value

8 8 Chapter 12 Creating Web Applications Using ASP.NET 2.0 ADDING STATIC TEXT TO A WEB FORM On a Windows form, you use label controls to display static text, which is text that a user is not allowed to edit. Such text includes headings that appear at the top of a form and captions that identify other controls. On a Web form, however, you can simply type the static text on the form itself. Figure 12.8 shows the procedure for including static text on a Web form. Font Size box Font Name box Block Format box Formatting toolbar HOW TO Add Static Text to a Web Form 1. Click the Design tab, if necessary, to view the Web form in the Design pane. 2. Position the insertion point where you want the text to appear on the Web form. (You can use the Enter key and Spacebar to insert lines and space characters, respectively.) 3. Type the text. 4. If necessary, use either the Formatting toolbar (shown in Figure 12.9) or the Format menu to select the block format, font name, font size, and so on for the text. Figure shows some sample static text entered on a Web form in the Design pane. FIGURE 12.8 FIGURE 12.9 How to add static text to a Web form Formatting toolbar 12 Chapter CXXXX Page 8 07/14/06--JHR

9 Adding Controls to a Web Form 9 Design pane is active 12 Chapter CXXXX Page 9 07/14/06--JHR FIGURE Sample static text entered in the Design pane ADDING CONTROLS TO A WEB FORM Similar to the way you add controls to a Windows form, you use the tools contained in the toolbox to add controls to a Web form. The toolbox in Visual Web Developer 2005 contains many of the same tools found in Visual Basic 2005, such as the Label, TextBox, and Button tools. You can use these tools to create label, text box, and button controls for your Web applications; to do this, you simply drag the tool to the Web form. You then use the Properties window to set the control s properties. The How To boxes in Figures through list the names and uses of several properties of the following Web controls: Button, CheckBox, Label, ListBox, and TextBox. Notice that, unlike Windows controls, Web controls have an ID property rather than a Name property. Also notice that the AutoPostBack property appears in the How To boxes for the Checkbox, ListBox, and TextBox controls. You will learn more about the AutoPostBack property later in this chapter. HOW TO Use a Web Button Control Property Use to Enabled indicate whether the button can respond to an action (such as clicking) Font specify the font to use for text ID give the button a meaningful name Text specify the text that appears inside the button FIGURE How to use a Web button

10 10 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HOW TO Use a Web CheckBox Control Property Use to AutoPostBack specify whether the form is posted back to the server when the check box is clicked Checked indicate whether the check box is checked or unchecked Font specify the font to use for text ID give the check box a meaningful name Text specify the text that appears inside the check box FIGURE How to use a Web check box HOW TO HOW TO Use a Web Label Control Property BorderStyle Font ID Text Visible FIGURE Use a Web ListBox Control Property AutoPostBack DataSourceID DataTextField Font ID Items Rows SelectionMode Use to specify the label s border (if any) specify the font to use for text give the label a meaningful name specify the text that appears inside the label indicate whether the label is visible or invisible Use to How to use a Web label specify whether the form is posted back to the server when a selection is made in the list box specify the data source for the DataTextField property indicate the field to display from the data source specified in the DataSourceID property specify the font to use for text give the list box a meaningful name specify the items to display in the list box indicate the number of rows to display in the list box specify whether the user can make one selection or multiple selections 12 Chapter CXXXX Page 10 07/14/06--JHR FIGURE How to use a Web list box

11 Coding a Web Application 11 HOW TO Use a Web TextBox Control Property AutoPostBack Font ID MaxLength Text TextMode Use to specify whether the form is posted back to the server when the text entered in the text box is changed; the postback occurs when the focus moves away from the text box specify the font to use for text give the text box a meaningful name indicate the maximum number of characters the text box will accept specify the text that appears inside the control indicate whether the user can enter one line of text or multiple lines of text, and whether the text is treated as a password 12 Chapter CXXXX Page 11 07/14/06--JHR Button TextBox ListBox CheckBox Label FIGURE The Web page in Figure contains the following five Web controls: Button, CheckBox, Label, ListBox, and TextBox. Although the Web controls look similar to their Windows counterparts, they are not identical to the Windows controls. (The Gentry Supplies, Company:, State:, and Shipping charge: text is typed on the Web form itself and is static text.) FIGURE How to use a Web text box Web controls contained on a Web page CODING A WEB APPLICATION After creating a Web application s interface, you then code the application. As you do when coding a Windows-based application, you enter the code for a Web application in the Code Editor window. Figure shows various ways of opening the Code Editor window, and Figure shows the code entered in the Code Editor window for the Gentry Supplies application.

12 12 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HOW TO Open the Code Editor Window Right-click the form, then click View Code. Verify that the designer window is the active window, click View on the menu bar, and then click Code. Verify that the designer window is the active window, then press the F7 key on your keyboard. Click a control on the Web form, click the Events button in the Properties window, and then double-click the desired event. FIGURE How to open the Code Editor window Web button Web list box Web check box Web label FIGURE Code for the Gentry Supplies Web application 12 Chapter CXXXX Page 12 07/14/06--JHR SAVING A WEB APPLICATION Figure shows two ways to save a Web application. When you save a Web application, the computer saves any changes made to the files included in the application. Saving the application also removes the asterisk that appears on the designer and Code Editor tabs.

13 Viewing a Web Form in a Browser Window 13 HOW TO Save a Web Application Click File on the menu bar, and then click Save All. Click the Save All button on the Standard toolbar. FIGURE How to save a Web application CLOSING AND OPENING AN EXISTING WEB APPLICATION You can close the current Web application by clicking File on the menu bar and then clicking Close Solution. You can open an existing Web application using the Open Web Site dialog box. Figure shows the steps you follow to open the dialog box and the Web application. 12 Chapter CXXXX Page 13 07/14/06--JHR HOW TO Open an Existing Web Application 1. Open the Open Web Site dialog box using one of the following methods: If you are using Visual Studio 2005, click File on the menu bar, point to Open, and then click Web Site. If you are using Visual Web Developer 2005 Express Edition, click File on the menu bar, and then click Open Web Site. 2. Click File System, if necessary, in the Open Web Site dialog box. 3. Select the folder that contains the Web application. (For example, the Gentry Supplies Web application is stored in the Gentry Supplies folder contained in the VbReloaded\Chap12 folder.) 4. Click the Open button to close the dialog box and open the Web application. 5. If a Web form does not appear in the Web Form Designer window, right-click the name of the Web form file in the Solution Explorer window, then click View Designer. (Recall that the name of a Web form file ends with.aspx.) FIGURE How to open an existing Web application VIEWING A WEB FORM IN A BROWSER WINDOW While you are designing a Web form, you should periodically view the form in a browser window to determine how it will appear to the user. You also can use the browser to verify that the form and its code work correctly. It is a good idea to view and test a Web form using as many different browsers as possible. Figure shows three methods that you can use to view a Web form in a browser window. If you use either of the first two methods, the Web form will open in the default browser on your computer. The third method allows you to select the desired browser before the Web form is opened.

14 14 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HOW TO View a Web Form in a Browser Window Right-click the Web form in the designer window, then click View in Browser to open the Web form in your default browser. Right-click the name of the Web form file in the Solution Explorer window, then click View in Browser to open the Web form in your default browser. Right-click the name of the Web form file in the Solution Explorer window, then click Browse With. See Figure Select the name of the browser in the Browsers list, then click the Browse button. FIGURE How to view a Web form in a browser window Identifies the default browser Use this button to set the default browser You also can use the Browse With dialog box to add the name of another browser program to the list. However, you first must install the browser program on your computer. FIGURE Browse With dialog box As Figure indicates, the Browse With dialog box also allows you to set the default browser. To do this, you click the browser s name in the Browsers list, which contains the names of the Web browsers available on your computer. You then click the Set as Default button. The word Default appears in parentheses next to the browser name in the list. You close the dialog box by clicking either the Cancel button or the Browse button. The Cancel button saves the change you made to the Browsers list before closing the dialog box. The Browse button also saves the change, but it then opens the Web form in the browser window before closing the dialog box. Figure shows a Web form displayed in the internal Web browser built into Visual Web Developer Chapter CXXXX Page 14 07/14/06--JHR

15 Starting and Ending a Web Application 15 Use this Close button to close the internal Web browser FIGURE Web form displayed in the internal browser built into Visual Web Developer Chapter CXXXX Page 15 07/14/06--JHR STARTING AND ENDING A WEB APPLICATION As you do with a Windows application, you need to start a Web application to determine whether it is working correctly. When you start a Web application, your default Web browser contacts the appropriate Web server and submits a request for the application s start page. The start page in a Web application is similar to the startup form in a Windows application. Upon receiving the request, the Web server locates the appropriate Web form file and processes the necessary code contained in the file s code file. As you learned earlier, the code file contains the Visual Basic code that tells the Web controls how to respond to the user s actions. Recall that the code file s name ends with.aspx.vb. The server then regenerates the Web form and sends it back to the Web browser, which renders the Web page on the computer screen. The entire process that occurs when a client requests services from a server and then the server responds to the client is called a round trip, because the process begins and ends in the same place, which is with the client. Figure shows one of many different methods of starting a Web application. You close a Web application by clicking the Close button on the browser window. HOW TO Start a Web Application 1. Specify the start page, if necessary. You can do this by right-clicking the name of the appropriate Web form file in the Solution Explorer window, and then clicking Set As Start Page. 2. Change the default browser, if necessary. You can do this by rightclicking the Web project name in the Solution Explorer window, and then clicking Browse With. Click the browser s name in the Browsers list, and then click the Cancel button. 3. Click Debug on the menu bar, and then click Start Without Debugging. See Figure FIGURE How to start a Web application

16 16 Chapter 12 Creating Web Applications Using ASP.NET 2.0 Use the Close button to close the Microsoft Internet Explorer browser window FIGURE Web form displayed in Internet Explorer You can use the Web form shown in Figure to display a shipping charge. The form provides a text box for entering a company s name and a list box for selecting one of four state names. The form also provides a check box that indicates whether overnight delivery is requested. To calculate the shipping charge, you complete the form and then click the Display Shipping Charge button. When you click the button, the Web form is sent back to the server with a request for additional services. In this case, the additional services involve processing the code contained in the Display Shipping Charge button s Click event procedure, using the data entered on the form. As shown earlier in Figure 12.18, the button s Click event procedure determines the appropriate shipping charge and then displays the charge on the form. The action of a client resubmitting a Web form to a server is referred to as a postback. When the server receives the request for additional services, it processes the request and sends the Web form back to the client. The client then renders the Web page on the screen, as shown in Figure Chapter CXXXX Page 16 07/14/06--JHR

17 Starting and Ending a Web Application Chapter CXXXX Page 17 07/14/06--JHR FIGURE Result of clicking the Display Shipping Charge button Although the Web button control triggers an automatic postback when it is clicked, not all Web controls react in the same manner. For example, the CheckBox, ListBox, and TextBox controls do not automatically generate a postback. However, these controls have an AutoPostBack property that you can use to change the default behavior. The AutoPostBack property can be set to either the Boolean value True or the Boolean value False. For instance, when a check box s AutoPostBack property is set to True, a postback occurs each time you click the check box. However, no postback occurs when the check box s AutoPostBack property is set to False. Keep in mind that a postback initiates a round trip, which consumes server resources and time: the server must process the request, regenerate the Web form, and then send the form back to the client. Depending on the volume of requests received by a server, the user might experience a delay waiting for the new form to appear on the screen. From the user s point of view, the delay can range from slight to unacceptable. Because each postback puts an additional burden on a server, you should limit the number of postbacks initiated by the controls on a Web form. Because of this, the AutoPostBack property for CheckBox, ListBox, and TextBox controls in most Web forms is left at its default value (False), and a button control is used to submit the Web form to the server for processing. This puts less of a burden on the server because it allows the user to complete the entire form before it is posted back to the server. However, there are instances where you may want to set a control s AutoPostBack property to True. For example, consider a Web form that contains a CheckBox control, a ListBox control, and a Button control. In the Web form, you want the list box to appear when the user selects the check box, and you want it to disappear when the user deselects the check box. You can accomplish this task by entering the appropriate code in the check box s CheckedChanged event procedure. The code will need to determine the current value of the check box s Checked property, and then take the appropriate action. In this case, when the check box is checked (selected), the code should set the list

18 18 Chapter 12 Creating Web Applications Using ASP.NET 2.0 An automatic postback also occurs when you click a LinkButton control or an ImageButton control on a Web page. box s Visible property to True; otherwise it should set the list box s Visible property to False. Besides coding the check box s CheckedChanged event procedure, you also need to set the check box s AutoPostBack property to True in the Properties window; the True value tells the client to initiate a postback each time the check box is clicked. When a postback occurs, the code contained in the check box s CheckedChanged event procedure is processed. If you do not set the check box s AutoPostBack property to True, the code contained in the CheckedChanged event procedure will not be processed until the user clicks the Button control, resulting in a postback. ALIGNING TEXT AND CONTROLS ON A WEB FORM The easiest way to align the static text and controls on a Web form is to use an HTML table. The table allows you to align the elements on the form in a row and column format. Figure shows the procedure you follow to include an HTML table on a Web form. HOW TO Indicates the number of rows and columns Include an HTML Table on a Web Form 1. Click Layout on the menu bar, then click Insert Table to open the Insert Table dialog box. 2. Either select a table template or build your own custom table. Figure shows an example of a completed Insert Table dialog box. 3. Click the OK button, which closes the Insert Table dialog box and adds the table to the Web form. See Figure FIGURE How to include an HTML table on a Web form 12 Chapter CXXXX Page 18 07/14/06--JHR Specifies the alignment of the table on the Web form Allows you to enter header text at the top of the table Controls the width of the table borders FIGURE Example of a completed Insert Table dialog box

19 Aligning Text and Controls on a Web Form 19 Click here and then type the header text The table is centered and contains five rows and three columns FIGURE Table created by the settings shown in Figure Chapter CXXXX Page 19 07/14/06--JHR As Figure indicates, the table is centered in the form and contains five rows and three columns. The intersection of a row and column in a table is called a cell. When you first add a table to a Web form, each cell in the table is empty. However, a cell can contain static text and/or one or more controls. To enter static text in a cell, you click the cell and then type the text. You can use the Formatting toolbar to change the font style, name, size, and so on used to display the text. To place a control in a cell, you drag the appropriate tool from the toolbox to the cell. You can change the height of a cell by positioning your mouse pointer on the cell s bottom border until the mouse pointer becomes a double horizontal line with arrows pointing up and down. You then press the left mouse button as you drag the border either up or down. You follow a similar process to adjust the width of a cell, except you position your mouse pointer on the cell s right border until the mouse pointer becomes a double vertical line with arrows pointing left and right. You then press the left mouse button as you drag the border either to the left or right. You also can merge two or more adjacent cells by selecting the cells and then using the Merge Cells option on the Layout menu. Figure shows an example of a completed table in the Design pane, and Figure shows how the table appears in an Internet Explorer window. The table contains a text box for entering the sale amount, a button for calculating two sales tax amounts, and two labels for displaying the calculated amounts. It also contains static text. FIGURE Example of a completed table in the Design pane

20 20 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HOW TO FIGURE Table displayed in Internet Explorer APPLICATIONS CONTAINING MULTIPLE WEB FORMS All of the Web applications you viewed in the previous sections in this chapter contained one Web form. However, a Web application can contain multiple Web forms. Figure shows a procedure for adding a new Web form to the current Web application. Add a New Web Form to the Current Application 1. Click Website on the menu bar, then click Add New Item to open the Add New Item dialog box. You also can open the Add New Item dialog box by right-clicking the project name in the Solution Explorer window and then clicking Add New Item. 2. Click Web Form in the Templates list. 3. If necessary, enter a new name in the Name box. 4. If necessary, click the Place code in separate file check box to select it. Figure shows an example of a completed Add New Item dialog box. 5. Click the Add button. 12 Chapter CXXXX Page 20 07/14/06--JHR FIGURE How to add a new Web form to the current application

21 Applications Containing Multiple Web Forms 21 Select Web Form Select this check box 12 Chapter CXXXX Page 21 07/14/06--JHR HOW TO When a Web application contains more than one form, you typically provide a way for the user to move from one Web page to another Web page; one method of doing this is to use a hyperlink. You can create a hyperlink using the HyperLink tool in the toolbox. Figure lists the names and uses of several properties of a HyperLink control, and Figure shows a HyperLink control on the FirstPage Web form in the Design pane. In this case, the HyperLink control s Font property is set to Large and its Text property is set to Click here to display the SecondPage. When the user starts the Web application and then clicks the HyperLink control on the FirstPage Web form, the SecondPage Web form will appear in the browser window. This is because the HyperLink control s NavigateUrl property contains the location of the SecondPage.aspx file. Use a Web HyperLink Control Property ID Font NavigateUrl Target Text FIGURE Use to Example of a completed Add New Item dialog box give the HyperLink control a meaningful name specify the font to use for text specify the location of the Web page to display when the HyperLink control is clicked indicate whether the Web page specified in the NavigateUrl property appears in the current window (_self, which is the default) or in a new window (_blank) specify the text to display on the Web form FIGURE How to use a Web HyperLink control

22 22 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HyperLink control FIGURE HyperLink control shown on the FirstPage Web form in the Design pane You can determine the URL attached to a static text hyperlink by clicking the hyperlink in the Design pane and then viewing the value stored in the hyperlink s HRef property in the Properties window. Using a HyperLink control is not the only way to include a hyperlink on a Web form. You also can use the Convert to Hyperlink button, which is located on the Formatting toolbar, to turn any of the form s static text into a hyperlink. Figure shows the procedure you follow when using the Convert to Hyperlink button to create a hyperlink, and Figure shows an example of a completed Hyperlink dialog box. Figure shows a static text hyperlink on the SecondPage Web form in the Design pane. In this case, when the user clicks the Return to FirstPage hyperlink in the browser window, the FirstPage Web form will appear. HOW TO Convert to Hyperlink button Use the Convert to Hyperlink Button to Create a Hyperlink 1. Select (highlight) the static text that you want turned into a hyperlink. 2. Click the Convert to Hyperlink button on the Formatting toolbar. The Hyperlink dialog box opens. 3. Use the Hyperlink dialog box to either enter or select the appropriate URL. Figure shows an example of a completed Hyperlink dialog box. 4. Click the OK button. Click another area on the Web form to deselect the selected text. FIGURE How to use the Convert to Hyperlink button to create a hyperlink 12 Chapter CXXXX Page 22 07/14/06--JHR Select the static text FIGURE Example of a completed Hyperlink dialog box

23 More Web Controls 23 Static text hyperlink FIGURE A static text hyperlink shown on the SecondPage Web form in the Design pane 12 Chapter CXXXX Page 23 07/14/06--JHR MORE WEB CONTROLS Visual Web Developer 2005 provides many controls for use on a Web form. Besides the controls already covered in this chapter, several of the more commonly used Web controls are the ImageButton, RadioButtonList, and DropDownList controls; an example of each of these controls is shown in Figure In addition, the names and uses of several properties of the controls are listed in Figures 12.40, 12.41, and (Figure contains an example of a completed ListItem Collection Editor dialog box, which can be used to enter the items to display in the RadioButtonList and DropDownList controls.) A good way to learn how to use the ImageButton, RadioButtonList, and DropDownList controls is to add the controls to a Web form and then use the information in the How To boxes to set the various properties. You can observe the way different property settings affect the appearance and behavior of the controls by opening the Web form in a browser.

24 24 Chapter 12 Creating Web Applications Using ASP.NET 2.0 The mouse pointer changes to a hand icon when it is positioned on an ImageButton control The RadioButtonList control contains five radio buttons Click the down arrow to view the list of items contained in the DropDownList control HOW TO FIGURE Use a Web ImageButton Control Property ID ImageUrl PostBackUrl Use to FIGURE Web controls shown on a Web form give the ImageButton control a meaningful name specify the location of the image that will appear in the control specify the URL to post to when the ImageButton control is clicked How to use a Web ImageButton control 12 Chapter CXXXX Page 24 07/14/06--JHR

25 More Web Controls 25 HOW TO Use a Web RadioButtonList Control Property AutoPostBack BorderStyle DataSourceID DataTextField ID Items RepeatDirection Use to specify whether the form is posted back to the server when a radio button is clicked indicate the type of frame (if any) that appears around the control specify the data source for the DataTextField property indicate the field to display from the data source specified in the DataSourceID property give the RadioButtonList control a meaningful name display the ListItem Collection Editor dialog box, where you can enter the text to display on the radio buttons; Figure shows an example of a completed ListItem Collection Editor dialog box control the direction in which the items are laid out: vertical (the default) or horizontal 12 Chapter CXXXX Page 25 07/14/06--JHR The DataSourceID and DataTextField properties, which appear in Figures and 12.43, allow you to connect a RadioButtonList control and a DropDownList control to a field in a database table. FIGURE FIGURE How to use a Web RadioButtonList control Example of a completed ListItem Collection Editor dialog box

26 26 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HOW TO Use a Web DropDownList Control Property AutoPostBack DataSourceID DataTextField ID Items Use to specify whether the form is posted back to the server when an item in the list is clicked specify the data source for the DataTextField property indicate the field to display from the data source specified in the DataSourceID property give the DropDownList control a meaningful name display the ListItem Collection Editor dialog box, where you can enter the text to display in the list FIGURE How to use a Web DropDownList control PROGRAMMING TUTORIAL You have completed the concepts section of Chapter 12. The next section is the Programming Tutorial section, which gives you step-by-step instructions on how to apply the chapter s concepts to an application. Following the Programming Tutorial in this chapter are the Quick Review, Key Terms, Self- Check Questions and Answers, Review Questions, Review Exercises Short Answer, Computer Exercises, and Case Projects sections. Creating the Rock, Paper, Scissors Game Web Application In Chapter 4 s Programming Tutorial, you created a Windows-based application that simulates the Rock, Paper, Scissors game. In this tutorial, you create a Web version of the game. (The directions for the game are shown in the Programming Tutorial section in Chapter 4.) The Web application s user interface is shown in Figure 12.44, and its TOE chart is shown in Figure Chapter CXXXX Page 26 07/14/06--JHR

27 Programming Tutorial Chapter CXXXX Page 27 07/14/06--JHR FIGURE User interface Task Object Event 1. Display the appropriate image in the rockimagebutton, Click playerimage control paperimagebutton, 2. Generate a random number from 1 to 3, scissorsimagebutton inclusive 3. Use the random number to display the rock, paper, or scissors image in the computerimage control 4. Determine whether there is a winner and display an appropriate message in the winnerlabel Display a message that indicates either the winner winnerlabel None or a tie game Display the image corresponding to the playerimage None player s choice Display the image corresponding to the computerimage None computer s choice FIGURE TOE chart

28 28 Chapter 12 Creating Web Applications Using ASP.NET 2.0 Creating the Rock, Paper, Scissors Game Interface In this section of the tutorial, you open a new Web application and then create the interface shown in Figure To open a new Web application and then create the user interface: 1. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. If necessary, close the Start Page window. 2. If you are using Visual Studio 2005, click File on the menu bar, point to New, and then click Web Site. If you are using Visual Web Developer 2005 Express Edition, click File on the menu bar, then click New Web Site. The New Web Site dialog box opens with ASP.NET Web Site selected in the Visual Studio installed templates section. 3. If necessary, select File System in the Location list box and select Visual Basic in the Language list box. 4. In this chapter, you will be instructed to save your Web applications in the C:\VbReloaded\Chap12 folder; however, you can use any location. In the box that appears next to the Location box, replace the existing text with C:\VbReloaded\Chap12\RockPaperScissors. The completed dialog box is shown in Figure The path to your RockPaperScissors application might be different FIGURE Completed New Web Site dialog box 5. Click the OK button to close the dialog box. A new Web application named RockPaperScissors appears on the screen. Temporarily display the Solution Explorer window, then click the plus box that appears next to the form file s name, which is Default.aspx. As Figure indicates, the application also contains a file named Default.aspx.vb; recall that this is the code file. 12 Chapter CXXXX Page 28 07/14/06--JHR

29 Programming Tutorial 29 Name of the code file Name of the form file 12 Chapter CXXXX Page 29 07/14/06--JHR FIGURE RockPaperScissors Web application 6. Click the Design tab on the Web Form Designer window. Temporarily display the Properties window. If necessary, click the down arrow button in the Properties window s Object box, then click DOCUMENT in the list. Change the DOCUMENT object s Title property to Rock, Paper, Scissors. 7. Click the Save All button to save the application. 8. Next, you will add an HTML table to the Web form. Press Enter four times; this positions the insertion point at the beginning of the fifth line on the Web form. Click Layout on the menu bar, then click Insert Table to open the Insert Table dialog box. If necessary, click the Custom radio button. Set the number of table rows to 7. Click the down arrow button in the Align box, then click center to center the table horizontally on the Web form. Click the OK button to close the dialog box. A seven-row, three-column table appears centered horizontally on the form. 9. Now you will add some static text to the table. Click the cell located in the first row, first column of the table. Click Format on the menu bar, point to Justify, and then click Left. Type Player:. 10. Click the cell located in the first row, third column of the table. Click Format on the menu bar, point to Justify, and then click Left. Type Computer:. See Figure FIGURE Static text entered in the table

30 30 Chapter 12 Creating Web Applications Using ASP.NET Next, you will add two Image controls to the table. Click the Image tool in the toolbox. Drag the mouse pointer to the cell located in the second row, first column of the table, then release the mouse button. Click the Image tool in the toolbox again. This time, drag the mouse pointer to the cell located in the second row, third column of the table, then release the mouse button. See Figure FIGURE Image controls added to the table You use an Image control s ImageUrl property to specify the location (path and name) of the image you want displayed in the control. In this case, the appropriate image is contained in the Blank.jpg file; you will find the file in the VbReloaded\Chap12 folder. However, to make it easier to copy the Web application from one computer to another, you will copy the Blank.jpg file to the Web application s folder. 12. Use Windows to copy the Blank.jpg file from the VbReloaded\Chap12 folder to the VbReloaded\Chap12\ RockPaperScissors folder. 13. Now you need to add the file to the Web site. Click Website on the menu bar, then click Add Existing Item to open the Add Existing Item dialog box. Open the RockPaperScissors folder, if necessary, then click Blank.jpg in the list of filenames. Click the Add button to close the dialog box. Temporarily display the Solution Explorer window. See Figure Notice that the Blank.jpg filename appears in the list of items contained in the Web site. Image filename FIGURE Solution Explorer window showing the Blank.jpg filename 12 Chapter CXXXX Page 30 07/14/06--JHR 14. Permanently display the Properties window. Click the Image1 control, which is contained in the first row, first column of the table. Set the control s (ID) property to playerimage. Click the ImageUrl property, then click the ellipsis button in the Settings box to open the Select Image dialog box. Click Blank.jpg in the Contents of folder section, then click the OK button. A green rectangular image appears in the table cell. 15. Click the Image2 control, which is contained in the first row, third column of the table. Set the control s (ID) property to computerimage. Set the ImageUrl property to Blank.jpg, then click the OK button to close the Select Image dialog box. A green rectangular image appears in the table cell. See Figure

31 Programming Tutorial Chapter CXXXX Page 31 07/14/06--JHR FIGURE Current appearance of the Image controls 16. Next, you will merge three cells into one, and then place a Label control in the cell. Click the cell located in the fourth row, first column of the table. Then press and hold down the left mouse button as you drag the mouse pointer to the right. When the three cells located in the fourth row are selected, release the mouse button. (Only the cells in the second and third column will be highlighted.) Click Layout on the menu bar, and then click Merge Cells. The three smaller cells merge into one larger cell. 17. Click the Label tool in the toolbox, and then drag the mouse pointer to the merged cell. Use the sizing handle that appears on the label s right border to make the label the same size as the cell. Set the label s (ID) property to winnerlabel. Set its Font/Size property to Large, and its ForeColor property to Red. (Select Red from the Web tab.) Delete the contents of the label s Text property. (Notice that the value of the label s ID property now appears inside the control.) 18. Merge the three cells contained in the sixth row in the table. Then type Click the Rock, Paper, or Scissors image in the cell. 19. You will use ImageButton controls rather than Image controls to display the images that the user clicks while playing the game. An ImageButton control is the appropriate control to use because, unlike an Image control, an ImageButton control has a Click event whose procedure you can code. Click the ImageButton tool in the toolbox. (Be sure to click the ImageButton tool rather than the Image tool.) Drag the mouse pointer to the cell located in the last row, first column of the table, then release the mouse button. Set the ImageButton1 s (ID) property to rockimagebutton. 20. Click the ImageButton tool in the toolbox again. This time, drag the mouse pointer to the cell located in the last row, second column of the table, then release the mouse button. Set the ImageButton1 s (ID) property to paperimagebutton. 21. Lastly, click the ImageButton tool in the toolbox again. Drag the mouse pointer to the cell located in the last row, third column of the table, then release the mouse button. Set the ImageButton1 s (ID) property to scissorsimagebutton. 22. The rock, paper, and scissors images are contained in image files named rock.jpg, paper.jpg, and scissors.jpg. Use Windows to copy the three image files from the VbReloaded\Chap12 folder to the VbReloaded\Chap12\ RockPaperScissors folder. Then use the Add Existing Item option on the Website menu to add the files to the Web site. Finally, use the three image files to set the ImageUrl property of the three ImageButton controls. Figure shows the completed interface.

32 32 Chapter 12 Creating Web Applications Using ASP.NET 2.0 Static text Image control Label control Static text ImageButton control HTML Table FIGURE Completed interface 23. Auto-hide the Properties window. 24. Now you will set the start page. Right-click Default.aspx in the Solution Explorer window, and then click Set As Start Page. 25. Next, you will determine your default browser. Right-click Default.aspx in the Solution Explorer window, and then click Browse With to open the Browse With Default.aspx dialog box. The default browser is identified by the word Default (in parentheses) after its name. Click the Cancel button to close the dialog box. 26. Click the Save All button to save the Web application. Click Debug on the menu bar, and then click Start Without Debugging to start the Web application. The application s start page (in this case, the Default.aspx Web form) appears in your default browser window. Figure shows the start page in Internet Explorer. Close button 12 Chapter CXXXX Page 32 07/14/06--JHR FIGURE Start page displayed in Internet Explorer 27. Close the browser window by clicking its Close button.

33 Programming Tutorial 33 Coding the Rock, Paper, Scissors Game Web Application First you will enter comments to document the application s name and purpose, as well as the programmer s name and the date the code was created or last revised. You also will enter the appropriate Option statements. To enter the comments and Option statements: 1. Open the Code Editor window. 2. Enter the comments and Option statements shown in Figure Replace the <your name> and <current date> text with your name and the current date. Enter these comments and Option statements 12 Chapter CXXXX Page 33 07/14/06--JHR FIGURE According to the TOE chart, shown earlier in Figure 12.45, you will need to code the Click event procedures for the rockimagebutton, paperimagebutton, and scissorsimagebutton controls. The first procedure you will code is the rockimagebutton s Click event procedure. Figure shows the procedure s pseudocode. Pseudocode 1. display the player s choice, which is represented by the image on the rockimagebutton, in the playerimage control 2. generate a random number from 1 to 3, inclusive Comments and Option statements entered in the Code Editor window 3. use the random number to display (in the computerimage control) the image that represents the computer s choice, and to display the appropriate message in the winnerlabel random number 1 display the rockimagebutton s image in the computerimage control display the string Tie Game in the winnerlabel 2 display the paperimagebutton s image in the computerimage control display the string Computer wins because paper covers rock. in the winnerlabel 3 display the scissorsimagebutton s image in the computerimage control display the string Player wins because rock breaks scissors. in the winnerlabel FIGURE Pseudocode for the rockimagebutton s Click event procedure

34 34 Chapter 12 Creating Web Applications Using ASP.NET 2.0 To code the rockimagebutton s Click event procedure, then test the procedure s code: 1. Open the code template for the rockimagebutton s Click event procedure. 2. Type displays the appropriate message when the user selects this choice and press Enter twice. 3. The procedure will use a Random object to represent the pseudo-random number generator, and an Integer variable to store the random number. Type dim randomgenerator as new random and press Enter, then type dim computerchoice as integer and press Enter twice. 4. The first step in the pseudocode is to display the rockimagebutton s image, which represents the player s choice, in the playerimage. Type display the image corresponding to the player s choice and press Enter, then type playerimage.imageurl = rockimagebutton.imageurl and press Enter twice. 5. The next step is to generate a random number from 1 to 3, inclusive. You will assign the random number to the computerchoice variable. Type generate a random number from 1 to 3, inclusive and press Enter. Type then use the random number to display the image and press Enter, then type corresponding to the computer s choice and press Enter. 6. Type computerchoice = randomgenerator.next(1, 4) and press Enter. 7. The last step is to use the random number to display the appropriate image and message in the computerimage and winnerlabel controls, respectively. Enter the additional code shown in Figure 12.56, which shows the completed rockimagebutton s Click event procedure. Enter the Select Case statement 12 Chapter CXXXX Page 34 07/14/06--JHR FIGURE Completed Click event procedure for the rockimagebutton 8. Save the Web application, then start the application. Click the rockimagebutton; doing this triggers an automatic postback and causes the server to process the code contained in the rockimagebutton s Click event procedure. When the processing is completed, the server sends the updated Web form back to the client. Click the rockimagebutton several times to verify that its Click event procedure is working properly. Figure shows a sample run of the application. Because the Click event procedure generates a random number for the computer s choice, the image and message displayed in the computerimage and winnerlabel controls on your screen might be different from the ones shown in the figure.

35 Programming Tutorial 35 Your application might display a different message and image 12 Chapter CXXXX Page 35 07/14/06--JHR The ImageButton control is one of the few Web controls that initiate an automatic postback when clicked. FIGURE Close the application by clicking the Close button on the browser window. Next, you will code the Click event procedure for the paperimagebutton. The procedure s pseudocode is shown in Figure Pseudocode 1. display the player s choice, which is represented by the image on the paperimagebutton, in the playerimage control 2. generate a random number from 1 to 3, inclusive Sample run of the Rock, Paper, Scissors Web application 3. use the random number to display (in the computerimage control) the image that represents the computer s choice, and to display the appropriate message in the winnerlabel random number 1 display the rockimagebutton s image in the computerimage control display the string Player wins because paper covers rock. in the winnerlabel 2 display the paperimagebutton s image in the computerimage control display the string Tie Game in the winnerlabel 3 display the scissorsimagebutton s image in the computerimage control display the string Computer wins because scissors cut paper. in the winnerlabel FIGURE Pseudocode for the paperimagebutton s Click event procedure

36 36 Chapter 12 Creating Web Applications Using ASP.NET 2.0 To code the paperimagebutton s Click event procedure, then test the procedure s code: 1. Open the code template for the paperimagebutton s Click event procedure. 2. Copy the code from the rockimagebutton s Click event procedure to the paperimagebutton s Click event procedure. 3. Modify the paperimagebutton s Click event procedure appropriately. 4. Save the Web application, then start the application. Click the paperimagebutton several times to verify that its Click event procedure is working properly. 5. Close the application by clicking the Close button on the browser window. Finally, you will code the Click event procedure for the scissorsimagebutton. The procedure s pseudocode is shown in Figure Pseudocode 1. display the player s choice, which is represented by the image on the scissorsimagebutton, in the playerimage control 2. generate a random number from 1 to 3, inclusive 3. use the random number to display (in the computerimage control) the image that represents the computer s choice, and to display the appropriate message in the winnerlabel random number 1 display the rockimagebutton s image in the computerimage control display the string Computer wins because rock breaks scissors. in the winnerlabel 2 display the paperimagebutton s image in the computerimage control display the string Player wins because scissors cut paper. in the winnerlabel 3 display the scissorsimagebutton s image in the computerimage control display the string Tie Game in the winnerlabel FIGURE Pseudocode for the scissorsimagebutton s Click event procedure To code the scissorsimagebutton s Click event procedure, then test the procedure s code: 1. Open the code template for the scissorsimagebutton s Click event procedure. 2. Copy the code from the rockimagebutton s Click event procedure to the scissorsimagebutton s Click event procedure. 3. Modify the scissorsimagebutton s Click event procedure appropriately. 4. Save the Web application, then start the application. Click the scissorsimagebutton several times to verify that its Click event procedure is working properly. 5. Close the application by clicking the Close button on the browser window. Click File on the menu bar, then click Close Solution. If the Save changes to the following items? prompt appears in a dialog box, click the Yes button.figure shows the code for the Web version of the Rock, Paper, Scissors Game. 12 Chapter CXXXX Page 36 07/14/06--JHR

37 Programming Tutorial 37 'ƒapplicationƒname: 'ƒapplicationƒpurpose: 'ƒcreated/revised: RockPaperScissors TheƒapplicationƒsimulatesƒtheƒRock,ƒPaper,ƒScissors game. <yourƒname>ƒonƒ<currentƒdate> OptionƒExplicitƒOn OptionƒStrictƒOn PartialƒClassƒ_Default ƒƒƒƒinheritsƒsystem.web.ui.page ƒƒƒƒprotectedƒsubƒrockimagebutton_click(byvalƒsenderƒasƒobject,ƒ_ ƒƒƒƒƒƒƒƒbyvalƒeƒasƒsystem.web.ui.imageclickeventargs)ƒ_ ƒƒƒƒƒƒƒƒhandlesƒrockimagebutton.click ƒƒƒƒƒƒƒƒ'ƒdisplaysƒtheƒappropriateƒmessageƒwhenƒtheƒuserƒselectsƒthisƒchoice 12 Chapter CXXXX Page 37 07/14/06--JHR ƒƒƒƒƒƒƒƒdimƒrandomgeneratorƒasƒnewƒrandom ƒƒƒƒƒƒƒƒdimƒcomputerchoiceƒasƒinteger ƒƒƒƒƒƒƒƒ'ƒdisplayƒtheƒimageƒcorrespondingƒtoƒtheƒplayer'sƒchoice ƒƒƒƒƒƒƒƒplayerimage.imageurlƒ=ƒrockimagebutton.imageurl ƒƒƒƒƒƒƒƒ'ƒgenerateƒaƒrandomƒnumberƒfromƒ1ƒtoƒ3,ƒinclusive ƒƒƒƒƒƒƒƒ'ƒthenƒuseƒtheƒrandomƒnumberƒtoƒdisplayƒtheƒimage ƒƒƒƒƒƒƒƒ'ƒcorrespondingƒtoƒtheƒcomputer'sƒchoice ƒƒƒƒƒƒƒƒcomputerchoiceƒ=ƒrandomgenerator.next(1,ƒ4) ƒƒƒƒƒƒƒƒselectƒcaseƒcomputerchoice ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ1 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒrockimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ TieƒGame ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ2 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒpaperimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Computerƒwinsƒbecauseƒpaperƒcoversƒrock. ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ3 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒscissorsimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Playerƒwinsƒbecauseƒrockƒbreaksƒscissors. ƒƒƒƒƒƒƒƒendƒselect ƒƒƒƒendƒsub ƒƒƒƒprotectedƒsubƒpaperimagebutton_click(byvalƒsenderƒasƒobject,ƒ_ ƒƒƒƒƒƒƒƒbyvalƒeƒasƒsystem.web.ui.imageclickeventargs)ƒ_ ƒƒƒƒƒƒƒƒhandlesƒpaperimagebutton.click ƒƒƒƒƒƒƒƒ'ƒdisplaysƒtheƒappropriateƒmessageƒwhenƒtheƒuserƒselectsƒthisƒchoice ƒƒƒƒƒƒƒƒdimƒrandomgeneratorƒasƒnewƒrandom ƒƒƒƒƒƒƒƒdimƒcomputerchoiceƒasƒinteger ƒƒƒƒƒƒƒƒ'ƒdisplayƒtheƒimageƒcorrespondingƒtoƒtheƒplayer'sƒchoice ƒƒƒƒƒƒƒƒplayerimage.imageurlƒ=ƒpaperimagebutton.imageurl (Figure is continued on next page)

38 38 Chapter 12 Creating Web Applications Using ASP.NET 2.0 ƒƒƒƒƒƒƒƒ'ƒgenerateƒaƒrandomƒnumberƒfromƒ1ƒtoƒ3,ƒinclusive ƒƒƒƒƒƒƒƒ'ƒthenƒuseƒtheƒrandomƒnumberƒtoƒdisplayƒtheƒimage ƒƒƒƒƒƒƒƒ'ƒcorrespondingƒtoƒtheƒcomputer'sƒchoice ƒƒƒƒƒƒƒƒcomputerchoiceƒ=ƒrandomgenerator.next(1,ƒ4) ƒƒƒƒƒƒƒƒselectƒcaseƒcomputerchoice ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ1 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒrockimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Playerƒwinsƒbecauseƒpaperƒcoversƒrock. ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ2 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒpaperimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ TieƒGame ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ3 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒscissorsimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Computerƒwinsƒbecauseƒscissorsƒcutƒpaper. ƒƒƒƒƒƒƒƒendƒselect ƒƒƒƒendƒsub ƒƒƒƒprotectedƒsubƒscissorsimagebutton_click(byvalƒsenderƒasƒobject,ƒ_ ƒƒƒƒƒƒƒƒbyvalƒeƒasƒsystem.web.ui.imageclickeventargs)ƒ_ ƒƒƒƒƒƒƒƒhandlesƒscissorsimagebutton.click ƒƒƒƒƒƒƒƒ'ƒdisplaysƒtheƒappropriateƒmessageƒwhenƒtheƒuserƒselectsƒthisƒchoice ƒƒƒƒƒƒƒƒdimƒrandomgeneratorƒasƒnewƒrandom ƒƒƒƒƒƒƒƒdimƒcomputerchoiceƒasƒinteger ƒƒƒƒƒƒƒƒ'ƒdisplayƒtheƒimageƒcorrespondingƒtoƒtheƒplayer'sƒchoice ƒƒƒƒƒƒƒƒplayerimage.imageurlƒ=ƒscissorsimagebutton.imageurl ƒƒƒƒƒƒƒƒ'ƒgenerateƒaƒrandomƒnumberƒfromƒ1ƒtoƒ3,ƒinclusive ƒƒƒƒƒƒƒƒ'ƒthenƒuseƒtheƒrandomƒnumberƒtoƒdisplayƒtheƒimage ƒƒƒƒƒƒƒƒ'ƒcorrespondingƒtoƒtheƒcomputer'sƒchoice ƒƒƒƒƒƒƒƒcomputerchoiceƒ=ƒrandomgenerator.next(1,ƒ4) ƒƒƒƒƒƒƒƒselectƒcaseƒcomputerchoice ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ1 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒrockimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Computerƒwinsƒbecauseƒrockƒbreaksƒscissors. ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ2 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒpaperimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ Playerƒwinsƒbecauseƒscissorsƒcutƒpaper. ƒƒƒƒƒƒƒƒƒƒƒƒcaseƒ3 ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒcomputerimage.imageurlƒ=ƒscissorsimagebutton.imageurl ƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒƒwinnerlabel.textƒ=ƒ TieƒGame ƒƒƒƒƒƒƒƒendƒselect ƒƒƒƒendƒsub EndƒClass 12 Chapter CXXXX Page 38 07/14/06--JHR FIGURE Code for the Web version of the Rock, Paper, Scissors Game

39 Key Terms Chapter CXXXX Page 39 07/14/06--JHR Quick Review The Web consists of Web pages that are stored on Web servers. A client uses a browser to request a Web page from a Web server. Web pages can be either static or dynamic (interactive). Static Web pages contain the information to display, as well as the HTML tags that control the appearance of the information. Static Web pages are not interactive. Every Web page has a unique address, called a URL, that indicates its location on the Web. A URL consists of four parts: the protocol, the name of the Web server, the path to the Web page, and the name of the Web page. A Web server can be a remote computer or your local machine. A Web application in ASP.NET 2.0 contains a Web form file and a code file. The Web form file is identified by the.aspx extension on its filename. The code file is identified by the.aspx.vb filename extension. The code file contains the Visual Basic instructions you enter in the Code Editor window. You add static text to a Web form by typing the text on the form itself. You add controls to a Web form in the same way that you add controls to a Windows form. You should view a Web page in different browsers to see how the page will appear to the user. Clicking a button on a Web form automatically triggers a postback. Some Web controls have an AutoPostBack property, which can be set to either True or False (usually the default value). You can use an HTML table to align the static text and controls on a Web form. A Web application can contain one or more Web forms. You can use a hyperlink to allow the user to move from one Web page to another. You can create a hyperlink using the HyperLink tool in the toolbox. You also can create a hyperlink by selecting a block of static text on a Web page and then clicking the Convert to Hyperlink button. Commonly used Web controls include the ImageButton, RadioButtonList, and DropDownList controls. Key Terms The Internet is a computer network that connects millions of computers located all around the world. The World Wide Web, also called WWW or the Web, consists of documents called Web pages that are stored on Web servers. A Web server is a computer that contains special software that serves up Web pages in response to requests from clients. A client is a computer that requests information from a Web server. A Web browser, or browser, is a program that allows a client to access and view Web pages. A static Web page is a non-interactive document whose purpose is merely to display information to the viewer.

40 40 Chapter 12 Creating Web Applications Using ASP.NET 2.0 HTML stands for Hypertext Markup Language, which is a language that uses tags to tell a browser how to render a Web page on the computer screen. URL stands for Uniform Resource Locator and is the unique address assigned to each Web page on the Web. The HTTP communication protocol is the protocol used to transmit Web pages on the Web. A protocol is an agreement between a sender and a receiver regarding the way data are sent and interpreted. A Web server is also referred to as a host. The path in a URL specifies the location of the document on the Web server. A dynamic Web page is an interactive document that can accept information from the user and also retrieve information for the user. ASP.NET 2.0 is Microsoft s newest technology for creating Web applications containing dynamic Web pages. You create a Web page in the Web Form Designer window. The Default.aspx.vb file is referred to as the code file, because it contains Visual Basic code. Static text is text that the user is not allowed to edit. The start page is the first Web form that appears when a Web application is started and is similar to the startup form in a Windows application. The process of a client requesting services from a server and then the server responding to the client is called a round trip. The action of a client resubmitting a Web form to a server is referred to as a postback. The intersection of a row and column in a table is called a cell. Self-Check Questions and Answers 1. Every Web page is identified by a unique address called. a. an AP b. an ASP c. a ULR d. a URL 2. A computer that requests information from a Web server is called a client. a. True b. False 3. A is a program that requests and then displays a Web page. a. browser b. client c. server d. requester 4. An online form that you use to purchase a product is an example of a Web page. a. dynamic b. static 12 Chapter CXXXX Page 40 07/14/06--JHR

41 Review Questions When using ASP.NET 2.0 to create a dynamic Web page, the file contains the Visual Basic code that you enter in the Code Editor window. a..asp b..aspx c..aspx.vb d..vb 6. A(n) occurs when a client resubmits a Web form to a Web server. a. answerback b. callback c. postback d. returnback 7. URL is an acronym for Universal Resource Locator. a. True b. False 8. is the communication protocol used to transmit Web pages on the Web. a. ASP b. HTML c. HTTP d. URL 12 Chapter CXXXX Page 41 07/14/06--JHR 9. A client computer is also referred to as a host. a. True b. False 10. You test a Web application using a browser. a. True b. False Answers: 1) d, 2) a, 3) a, 4) a, 5) c, 6) c, 7) b, 8) c, 9) b, 10) a Review Questions 1. If a file s name ends with.aspx.vb, the file is referred to as a file. a. code b. form c. Web d. None of the above. 2. The default behavior for a control on a Web form is to trigger an automatic postback when it is clicked. a. CheckBox b. Label c. TextBox d. None of the above. 3. The intersection of a row and column in a table is called a. a. box b. cell c. compartment d. None of the above.

42 42 Chapter 12 Creating Web Applications Using ASP.NET The process of requesting a service from a Web server and having the server fulfill the request is called a. a. postback b. requestback c. return trip d. round trip 5. You use the property to refer to a Web control in code. a. Attribute b. ID c. Identifier d. Name 6. You can use an HTML to align the text and controls on a Web form. a. box b. container c. panel d. table 7. If a URL does not contain a communication protocol, Web browsers use the protocol. a. File System b. FTP c. HTTP d. Remote 8. The Web server on your local machine is named. a. currenthost b. currentserver c. localserver d. localhost 9. The Web form file in a new Web application is automatically assigned the name. a. Default.asp b. Default1.vb c. WebForm1.aspx d. None of the above. 10. A postback occurs when a server sends a Web form back to the client. a. True b. False 12 Chapter CXXXX Page 42 07/14/06--JHR Review Exercises Short Answer 1. What are the four parts of a URL? 2. What is the difference between a static Web page and a dynamic Web page? 3. Explain why you should limit the number of postbacks that occur when using a Web form. 4. How do you specify the default browser? 5. How do you specify the start page? 6. How do you add static text to a Web form?

43 Computer Exercises How do you add an HTML table to a Web form? 8. How do you tell the client to initiate a postback each time an item in a list box is clicked? 9. What are the two ways you can use to create a hyperlink? 10. Which property of a Web DropDownList control opens the ListItem Collection Editor dialog box, where you can enter the text to display in the list? Computer Exercises 12 Chapter CXXXX Page 43 07/14/06--JHR 1. In this exercise, you create a Web application that contains static text. a. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. Create a new ASP.NET Web Site named Greenview. Save the Web Site in the VbReloaded\Chap12 folder. b. Change the DOCUMENT object s Title property to Greenview Toy Store. c. Create the Web form using the store information shown in Figure 12.2 in the chapter. The Web form contains only static text. d. Save the Web application, then view the Web form in a browser. e. Close the browser window, then close the solution. 2. In this exercise, you create a Web application that displays a shipping charge. a. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. Create a new ASP.NET Web Site named Gentry Supplies. Save the Web Site in the VbReloaded\Chap12 folder. b. Change the DOCUMENT object s Title property to Gentry Supplies. c. Create the Web form shown in Figure in the chapter. The Web form contains static text and controls. d. Open the Code Editor window, then enter the code shown in Figure e. Save the Web application, then view the Web form in a browser. f. Use the information shown in Figure to test the application. g. Close the browser window, then close the solution. 3. In this exercise, you create a Web application that calculates and displays two sales tax amounts. a. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. Create a new ASP.NET Web Site named Sales Tax. Save the Web Site in the VbReloaded\Chap12 folder. b. Change the DOCUMENT object s Title property to Sales Tax. c. Create the Web form shown in Figure in the chapter. The Web form contains a table, static text, and controls. d. Open the Code Editor window, then enter the appropriate code in the Calculate button s Click event procedure. e. Save the Web application, then view the Web form in a browser. f. Use the information shown in Figure to test the application. g. Close the browser window, then close the solution. 4. In this exercise, you create a Web application that converts American dollars to British pounds. a. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. Create a new ASP.NET Web Site named Currency. Save the Web Site in the VbReloaded\Chap12 folder. b. Change the DOCUMENT object s Title property to Currency Converter.

44 44 Chapter 12 Creating Web Applications Using ASP.NET 2.0 c. Create the Web form shown in Figure 12.3 in the chapter. d. Open the Code Editor window, then enter the appropriate code in the Convert button s Click event procedure. Use.5715 as the conversion rate. e. Save the Web application, then view the Web form in a browser. f. Use the information shown in Figure 12.3 to test the application. g. Close the browser window, then close the solution. 5. In this exercise, you create a Web application for Stovall Pharmacy. The application allows the user to select a store number from a list box; it then displays the names of the store s manager and assistant manager. a. Start Visual Studio 2005 or Visual Web Developer 2005 Express Edition. Create a new ASP.NET Web Site named Stovall. Save the Web Site in the VbReloaded\Chap12 folder. b. Create an appropriate Web form, then code the application. The store numbers and the names of the managers and assistant managers are shown here: Store number Manager Assistant manager 1001 Jeffrey Jefferson Paula Hendricks 1002 Barbara Millerton Sung Lee 1003 Inez Baily Homer Gomez 1004 Lou Chan Jake Johansen 1005 Henry Abernathy Ingrid Nadkarni c. Save the Web application, then start and test the application. d. Close the browser window, then close the solution. Case Projects Cable Direct Sharon Barrow, the billing supervisor at Cable Direct (a local cable company) has asked you to create a Web application that a customer can use to calculate and display his or her bill. The cable rates are as follows: Residential customers: Processing fee: $4.50 Basic service fee: $30 Premium channels: $5 per channel Business customers: Processing fee: $16.50 Basic service fee: $80 for first 10 connections; $4 for each additional connection Premium channels: $50 per channel for any number of connections 12 Chapter CXXXX Page 44 07/14/06--JHR WKRK-Radio Each year, WKRK-Radio polls its audience to determine which Super Bowl commercial was the best. The choices are as follows: Budweiser, FedEx, MasterCard, and Pepsi. The station manager has asked you to create a Web application that allows him to enter a caller s choice. The choice should be saved in a sequential

45 Case Projects 45 access file. The application also should display the number of votes for each commercial. Skate-Away Sales Skate-Away Sales sells skateboards by phone. The skateboards are priced at $100 each and are available in two colors yellow and blue. The company employs 20 salespeople to answer the phones. Create a Web application that allows the salespeople to enter the customer s name, address, and the number of blue and yellow skateboards ordered. The application should calculate the total number of skateboards ordered and the total price of the skateboards, including a 5% sales tax. Perrytown Gift Shop 12 Chapter CXXXX Page 45 07/14/06--JHR In Chapter 8 s Programming Example, you created a Windows application for Stanley Habeggar, the owner and manager of Perrytown Gift Shop. The application allows Mr. Habeggar to quickly and accurately calculate the weekly federal withholding tax (FWT) for each of his six employees. Mr. Habeggar has asked you to create a Web application that calculates and displays the employee s gross pay, FWT, Social Security and Medicare (FICA) tax, and net pay. Use 7.65% as the FICA tax rate. The weekly FWT tables are shown in Figure 8.44 in Chapter 8. The application should allow the user to enter the number of hours the employee worked, as well as his or her pay rate, marital status (Single or Married), and number of withholding allowances. Use $55.77 as the value of a withholding allowance.