Creating Web Applications Using ASP .NET 2.0

Creating Web ApplicationsUsing ASP .NET 2.0

• 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

After studying Chapter 12, you should be able to:

12

12 C

hapt

er

CXX

XX 3

9147

Page

107

/14/

06--

JHR

2 Chapter 12 Creating Web Applications Using ASP .NET 2.0

WEB TERMINOLOGYThe Internet is the world’s largest computer network, connecting millions ofcomputers located all around the world. One of the most popular features of theInternet is the World Wide Web, often referred to simply as WWW or theWeb. The Web consists of documents called Web pages that are stored on Webservers. A Web server is a computer that contains special software that “servesup” Web pages in response to requests from clients. A client is a computer thatrequests information from a Web server. The information is requested and sub-sequently viewed through the use of a program called a Web browser or, moresimply, a browser. Currently, the two most popular browsers are MicrosoftInternet Explorer and Netscape Communicator. Figure 12.1 illustrates the rela-tionship between a client, a browser, and a Web server.

Many Web pages are static. A static Web page is a document whose pur-pose is merely to display information to the viewer. You can create a static Webpage by opening a document in a text editor (such as Notepad) and then savingthe document using a filename extension of .htm or .html. Within the docu-ment you enter the information you want displayed on the Web page. You thencan use HTML (Hypertext Markup Language) tags to tell the browser howto display the information. For example, to instruct the browser to display theword “Hello” in italics, you can use the and tags, like this: Hello.Similarly, to display the word “Hello” in boldface, you can use the and tags as shown here: Hello. Figure 12.2 shows a static Web page createdfor the Greenview Toy Store. Displayed on the Web page are the store’s name,address, telephone number, and business hours.

F I G U R E 1 2 . 1 Illustration of the relationship between a client, a browser,and a Web server

request for a Web page

HTML document sent

Web server withHTML documents

Client with browser

12 C

hapt

er

CXX

XX 3

9147

Page

207

/14/

06--

JHR

Web Terminology 3

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. Toview a Web page, you enter the page’s URL in the appropriate box of a Webbrowser; the appropriate box depends on the browser you are using. As Figure 12.2indicates, 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,http://, refers to the HTTP communication protocol, which is the protocolused to transmit Web pages on the Web. A protocol is an agreement between asender and a receiver regarding how data are sent and interpreted. If you do notenter the communication protocol in a URL, Web browsers assume the HTTP pro-tocol. The second part of the URL is the name of the Web server where the docu-ment resides. The Web server can be a remote computer or your local machine, andis often referred to as the host. In the URL shown in Figure 12.2, the Web server’sname is localhost and refers to the user’s local machine. The third part of the URLis the path, which specifies the location of the document on the Web server. TheURL shown in Figure 12.2 indicates that the document is located in thepublic_html folder on the localhost server. It is important that the path you enterin 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 con-tained in a default location on the server. The network administrator defines thedefault location when the Web server is configured. The last part of the URL speci-fies the name of the document—in this case, greenview.html. If you do not specifythe 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, thebrowser looks for the Web server specified in the URL. If the browser is able tolocate the server, it submits your request. When the server receives a request fora static Web page, it locates the file, opens it, and then transfers its contents tothe browser. The browser interprets the HTML instructions it receives and ren-ders the Web page on the client’s screen.

One drawback of static Web pages is that they are not interactive. The onlyinteraction that can occur between static Web pages and the user is through linksthat allow the user to “jump” from one Web page to another. Although static Webpages provide a means for a store such as the Greenview Toy Store to list its locationand hours, a company wanting to do business on the Web must be able to do morethan just list information. Rather, it must be able to interact with customersthrough its Web site. The Web site should allow customers to submit inquiries,

F I G U R E 1 2 . 2 Example of a static Web page

12 C

hapt

er

CXX

XX 3

9147

Page

307

/14/

06--

JHR


select items for purchase, provide shipping information, and submit paymentinformation. It also should allow the company to track customer inquiries andprocess customer orders. Tasks such as these can be accomplished using dynamicWeb pages. Unlike a static Web page, a dynamic Web page is interactive: it canaccept information from the user and also retrieve information for the user.Examples of dynamic Web pages that you might have already used include formsfor purchasing merchandise online and submitting online resumes. Figure 12.3shows an example of a dynamic Web page that converts American dollars to Britishpounds. To use the Web page, you enter the number of American dollars in theAmerican dollars box and then click the Convert button. The button’s Click eventprocedure displays the corresponding number of British pounds on the Web page.

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 firstserver-side Web programming technology introduced by Microsoft.

CREATING A WEB APPLICATIONYou create (or design) a Web page in the Web Form Designer window. Youopen the window in Visual Web Developer 2005—Microsoft’s newest product forcreating Web applications. Visual Web Developer 2005 is available as a stand-aloneproduct (called Visual Web Developer 2005 Express Edition) or as part of VisualStudio 2005. (You can download a copy of Visual Web Developer 2005 ExpressEdition from Microsoft’s Web site. At the time of this writing, the address ishttp://msdn.microsoft.com/vstudio/express/vwd/download.) Figure 12.4 shows the pro-cedure you follow to create a Web application using Visual Web Developer 2005.

F I G U R E 1 2 . 3 Example of a dynamic Web page

12 C

hapt

er

CXX

XX 3

9147

Page

407

/14/

06--

JHR

Recall that Windows forms arecreated in the Windows FormDesigner window.

Creating a Web Application 5

The first four steps in Figure 12.4 contain the instructions for opening andcompleting the New Web Site dialog box. Notice that, in Step 2, you areinstructed to select File System in the dialog box’s Location box. The File Systemselection allows you to store your Web application in any folder on your com-puter or a network drive; in this chapter, you will store your Web applications inproject folders contained in the VbReloaded\Chap12 folder. Also available inthe Location box are the HTTP and FTP selections. If you select HTTP in theLocation box, your Web application will be stored in the location set up byInternet Information Services (IIS), a program that manages the Web server forcomputers using Microsoft Windows. The FTP selection is available for publish-ing your application on a remote computer. Figure 12.5 shows an example of acompleted New Web Site dialog box.

HOW TO… Create a Web Application1. Start Visual Studio 2005 or Visual Web Developer 2005 Express

Edition. If you are using Visual Studio 2005, click File on the menubar, point to New, and then click Web Site. If you are using Visual WebDeveloper 2005 Express Edition, click File on the menu bar, then clickNew Web Site. The New Web Site dialog box opens with ASP.NET WebSite 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 Sitedialog box.

5. Click the OK button to close the New Web Site dialog box. A new Webapplication appears on the screen. See Figure 12.6.

6. Click the Design tab on the Web Form Designer window, then use theProperties window to assign a more meaningful value to theDOCUMENT object’s Title property. See Figure 12.7.

F I G U R E 1 2 . 4 How to create a Web application

12 C

hapt

er

CXX

XX 3

9147

Page

507

/14/

06--

JHR


When you close the New Web Site dialog box, a new Web application appearsin the Web Form Designer window, as shown in Figure 12.6. The applicationcontains a Web form file, or Web page, named Default.aspx. The name appearson the tab at the top of the designer window and also in the Solution Explorerwindow. The Design and Source tabs that appear at the bottom of the designerwindow allow you to view the Design and Source panes, respectively. You usethe Design pane (which you will view in the next section) to add text and con-trols to the Web page. The Source pane, which is shown in Figure 12.6, containsthe HTML tags that tell a browser how to render the Web page. It is not necessaryto know HTML to create a Web page in Visual Web Developer 2005, because thetags are automatically generated as you are designing the Web page in theDesign pane.

F I G U R E 1 2 . 5 Completed New Web Site dialog box

Use this template to create aWeb application

12 C

hapt

er

CXX

XX 3

9147

Page

607

/14/

06--

JHR

Creating a Web Application 7

In addition to the Default.aspx file, the application also contains a filenamed Default.aspx.vb. As you learned in Chapter 1, the .vb extension on a file-name indicates that the file is a “Visual Basic” source file, which is a file that con-tains Visual Basic code. In this case, the Default.aspx.vb file will contain the codeyou enter to tell the objects on the Web page how to respond to the user’sactions, such as clicking and double-clicking. The Default.aspx.vb name appearsin the Solution Explorer window. It also appears in the first instruction in theSource pane; as the instruction indicates, the Default.aspx.vb file is referred to asthe code file.

The last step in the procedure shown in Figure 12.4 is to assign a more mean-ingful value to the Title property of the DOCUMENT object, which is the Webform itself. When the Web form is displayed in a browser, the value in its Titleproperty (in this case, Gentry Supplies) appears in the browser’s title bar, asshown in Figure 12.7.

F I G U R E 1 2 . 7 Title bar showing the DOCUMENT’s Title property value

Value entered in the DOCUMENT’sTitle property

F I G U R E 1 2 . 6 New Web application

Name of the Web form file(Web page)

Name of the Web form file(Web page)

Name of the Visual Basic code file

Name of the Visual Basic code file

Tabs

12 C

hapt

er

CXX

XX 3

9147

Page

707

/14/

06--

JHR

12 C

hapt

er

CXX

XX 3

9147

Page

807

/14/

06--

JHR

ADDING STATIC TEXT TO A WEB FORMOn a Windows form, you use label controls to display static text, which is textthat a user is not allowed to edit. Such text includes headings that appear at thetop of a form and captions that identify other controls. On a Web form, how-ever, you can simply type the static text on the form itself. Figure 12.8 shows theprocedure for including static text on a Web form.

F I G U R E 1 2 . 9 Formatting toolbar

Formatting toolbar

Block Format box

Font Name box

Font Size box

HOW TO… Add Static Text to a Web Form1. 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 andspace 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 12.10 shows some sample static textentered on a Web form in the Design pane.

F I G U R E 1 2 . 8 How to add static text to a Web form


Adding Controls to a Web Form 9

ADDING CONTROLS TO A WEB FORMSimilar to the way you add controls to a Windows form, you use the tools con-tained in the toolbox to add controls to a Web form. The toolbox in Visual WebDeveloper 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 createlabel, text box, and button controls for your Web applications; to do this, yousimply drag the tool to the Web form. You then use the Properties window to setthe control’s properties. The How To boxes in Figures 12.11 through 12.15 listthe 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 thatthe AutoPostBack property appears in the How To boxes for the Checkbox,ListBox, and TextBox controls. You will learn more about the AutoPostBackproperty later in this chapter.

HOW TO… Use a Web Button ControlProperty Use to

Enabled indicate whether the button can respond to an action (suchas clicking)

Font specify the font to use for textID give the button a meaningful nameText specify the text that appears inside the button

F I G U R E 1 2 . 1 1 How to use a Web button

F I G U R E 1 2 . 1 0 Sample static text entered in the Design pane

Design pane is active

12 C

hapt

er

CXX

XX 3

9147

Page

907

/14/

06--

JHR


HOW TO… Use a Web ListBox ControlProperty Use to

AutoPostBack specify whether the form is posted back to the serverwhen a selection is made in the list box

DataSourceID specify the data source for the DataTextField propertyDataTextField indicate the field to display from the data source speci-

fied in the DataSourceID propertyFont specify the font to use for textID give the list box a meaningful nameItems specify the items to display in the list boxRows indicate the number of rows to display in the list boxSelectionMode specify whether the user can make one selection or

multiple selections

F I G U R E 1 2 . 1 4 How to use a Web list box

HOW TO… Use a Web Label ControlProperty Use to

BorderStyle specify the label’s border (if any) Font specify the font to use for textID give the label a meaningful nameText specify the text that appears inside the labelVisible indicate whether the label is visible or invisible

F I G U R E 1 2 . 1 3 How to use a Web label

HOW TO… Use a Web CheckBox ControlProperty Use to

AutoPostBack specify whether the form is posted back to the serverwhen the check box is clicked

Checked indicate whether the check box is checked orunchecked

Font specify the font to use for textID give the check box a meaningful nameText specify the text that appears inside the check box

F I G U R E 1 2 . 1 2 How to use a Web check box

12 C

hapt

er

CXX

XX 3

9147

Page

10

07/1

4/06

--JH

R

Coding a Web Application 11

The Web page in Figure 12.16 contains the following five Web controls:Button, CheckBox, Label, ListBox, and TextBox. Although the Web controls looksimilar to their Windows counterparts, they are not identical to the Windowscontrols. (The Gentry Supplies, Company:, State:, and Shipping charge: text istyped on the Web form itself and is static text.)

CODING A WEB APPLICATIONAfter creating a Web application’s interface, you then code the application. Asyou do when coding a Windows-based application, you enter the code for a Webapplication in the Code Editor window. Figure 12.17 shows various ways ofopening the Code Editor window, and Figure 12.18 shows the code entered inthe Code Editor window for the Gentry Supplies application.

F I G U R E 1 2 . 1 6 Web controls contained on a Web page

TextBox

Button

Label

CheckBox

ListBox

HOW TO… Use a Web TextBox ControlProperty Use to

AutoPostBack specify whether the form is posted back to the serverwhen the text entered in the text box is changed; thepostback occurs when the focus moves away from thetext box

Font specify the font to use for textID give the text box a meaningful nameMaxLength indicate the maximum number of characters the text

box will acceptText specify the text that appears inside the controlTextMode indicate whether the user can enter one line of text or

multiple lines of text, and whether the text is treated asa password

F I G U R E 1 2 . 1 5 How to use a Web text box

12 C

hapt

er

CXX

XX 3

9147

Page

11

07/1

4/06

--JH

R


SAVING A WEB APPLICATIONFigure 12.19 shows two ways to save a Web application. When you save a Webapplication, the computer saves any changes made to the files included in theapplication. Saving the application also removes the asterisk that appears on thedesigner and Code Editor tabs.

F I G U R E 1 2 . 1 8 Code for the Gentry Supplies Web application

Web button

Web label

Web check box

Web list box

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.

F I G U R E 1 2 . 1 7 How to open the Code Editor window

12 C

hapt

er

CXX

XX 3

9147

Page

12

07/1

4/06

--JH

R

Viewing a Web Form in a Browser Window 13

CLOSING AND OPENING AN EXISTING WEB APPLICATIONYou can close the current Web application by clicking File on the menu bar andthen clicking Close Solution. You can open an existing Web application usingthe Open Web Site dialog box. Figure 12.20 shows the steps you follow to openthe dialog box and the Web application.

VIEWING A WEB FORM IN A BROWSER WINDOWWhile you are designing a Web form, you should periodically view the form in abrowser window to determine how it will appear to the user. You also can use thebrowser to verify that the form and its code work correctly. It is a good idea to viewand test a Web form using as many different browsers as possible. Figure 12.21shows three methods that you can use to view a Web form in a browser window. Ifyou use either of the first two methods, the Web form will open in the defaultbrowser on your computer. The third method allows you to select the desiredbrowser before the Web form is opened.

HOW TO… Open an Existing Web Application1. Open the Open Web Site dialog box using one of the following

methods: If you are using Visual Studio 2005, click File on the menubar, point to Open, and then click Web Site. If you are using VisualWeb 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 Suppliesfolder contained in the VbReloaded\Chap12 folder.)

4. Click the Open button to close the dialog box and open the Webapplication.

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 Explorerwindow, then click View Designer. (Recall that the name of a Webform file ends with .aspx.)

F I G U R E 1 2 . 2 0 How to open an existing Web application

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.

F I G U R E 1 2 . 1 9 How to save a Web application

12 C

hapt

er

CXX

XX 3

9147

Page

13

07/1

4/06

--JH

R


As Figure 12.22 indicates, the Browse With dialog box also allows you to setthe 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. Youthen click the Set as Default button. The word Default appears in parenthesesnext to the browser name in the list. You close the dialog box by clicking eitherthe Cancel button or the Browse button. The Cancel button saves the changeyou made to the Browsers list before closing the dialog box. The Browse buttonalso saves the change, but it then opens the Web form in the browser windowbefore closing the dialog box. Figure 12.23 shows a Web form displayed in theinternal Web browser built into Visual Web Developer 2005.

F I G U R E 1 2 . 2 2 Browse With dialog box

Identifies the default browser

Use this button to set the defaultbrowser

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 yourdefault browser.

• Right-click the name of the Web form file in the Solution Explorerwindow, then click Browse With. See Figure 12.22. Select the name ofthe browser in the Browsers list, then click the Browse button.

F I G U R E 1 2 . 2 1 How to view a Web form in a browser window

12 C

hapt

er

CXX

XX 3

9147

Page

14

07/1

4/06

--JH

R

You also can use the BrowseWith dialog box to addthe name of another browserprogram to the list. However,you first must install the browserprogram on your computer.

Starting and Ending a Web Application 15

STARTING AND ENDING A WEB APPLICATIONAs you do with a Windows application, you need to start a Web application todetermine whether it is working correctly. When you start a Web application,your default Web browser contacts the appropriate Web server and submits arequest for the application’s start page. The start page in a Web application issimilar to the startup form in a Windows application. Upon receiving therequest, the Web server locates the appropriate Web form file and processes thenecessary code contained in the file’s code file. As you learned earlier, the codefile contains the Visual Basic code that tells the Web controls how to respond tothe user’s actions. Recall that the code file’s name ends with .aspx.vb. The serverthen regenerates the Web form and sends it back to the Web browser, which ren-ders the Web page on the computer screen. The entire process that occurs whena client requests services from a server and then the server responds to the clientis called a round trip, because the process begins and ends in the same place,which is with the client. Figure 12.24 shows one of many different methods ofstarting a Web application. You close a Web application by clicking the Closebutton on the browser window.

HOW TO… Start a Web Application1. Specify the start page, if necessary. You can do this by right-clicking

the name of the appropriate Web form file in the Solution Explorerwindow, and then clicking Set As Start Page.

2. Change the default browser, if necessary. You can do this by right-clicking the Web project name in the Solution Explorer window, andthen clicking Browse With. Click the browser’s name in the Browserslist, and then click the Cancel button.

3. Click Debug on the menu bar, and then click Start WithoutDebugging. See Figure 12.25.

F I G U R E 1 2 . 2 4 How to start a Web application

F I G U R E 1 2 . 2 3 Web form displayed in the internal browser built intoVisual Web Developer 2005

Use this Close button to close theinternal Web browser

12 C

hapt

er

CXX

XX 3

9147

Page

15

07/1

4/06

--JH

R


You can use the Web form shown in Figure 12.25 to display a shippingcharge. The form provides a text box for entering a company’s name and a listbox for selecting one of four state names. The form also provides a check boxthat indicates whether overnight delivery is requested. To calculate the shippingcharge, you complete the form and then click the Display Shipping Charge but-ton. When you click the button, the Web form is sent back to the server with arequest for additional services. In this case, the additional services involve pro-cessing the code contained in the Display Shipping Charge button’s Click eventprocedure, using the data entered on the form. As shown earlier in Figure 12.18,the button’s Click event procedure determines the appropriate shipping chargeand then displays the charge on the form. The action of a client resubmitting aWeb form to a server is referred to as a postback. When the server receives therequest for additional services, it processes the request and sends the Web formback to the client. The client then renders the Web page on the screen, as shownin Figure 12.26.

F I G U R E 1 2 . 2 5 Web form displayed in Internet Explorer

Use the Close button to close theMicrosoft Internet Explorer browserwindow

12 C

hapt

er

CXX

XX 3

9147

Page

16

07/1

4/06

--JH

R

Starting and Ending a Web Application 17

Although the Web button control triggers an automatic postback when it isclicked, not all Web controls react in the same manner. For example, theCheckBox, ListBox, and TextBox controls do not automatically generate a post-back. However, these controls have an AutoPostBack property that you can use tochange the default behavior. The AutoPostBack property can be set to either theBoolean value True or the Boolean value False. For instance, when a check box’sAutoPostBack property is set to True, a postback occurs each time you click thecheck box. However, no postback occurs when the check box’s AutoPostBack prop-erty is set to False. Keep in mind that a postback initiates a round trip, which con-sumes server resources and time: the server must process the request, regenerate theWeb form, and then send the form back to the client. Depending on the volume ofrequests received by a server, the user might experience a delay waiting for the newform to appear on the screen. From the user’s point of view, the delay can rangefrom slight to unacceptable. Because each postback puts an additional burden on aserver, you should limit the number of postbacks initiated by the controls on a Webform. Because of this, the AutoPostBack property for CheckBox, ListBox, andTextBox controls in most Web forms is left at its default value (False), and a buttoncontrol is used to submit the Web form to the server for processing. This puts less ofa burden on the server because it allows the user to complete the entire form beforeit is posted back to the server. However, there are instances where you may want toset a control’s AutoPostBack property to True. For example, consider a Web formthat contains a CheckBox control, a ListBox control, and a Button control. In theWeb form, you want the list box to appear when the user selects the check box, andyou want it to disappear when the user deselects the check box. You can accom-plish this task by entering the appropriate code in the check box’sCheckedChanged event procedure. The code will need to determine the currentvalue of the check box’s Checked property, and then take the appropriate action. Inthis case, when the check box is checked (selected), the code should set the list

F I G U R E 1 2 . 2 6 Result of clicking the Display Shipping Charge button

12 C

hapt

er

CXX

XX 3

9147

Page

17

07/1

4/06

--JH

R


box’s Visible property to True; otherwise it should set the list box’s Visible propertyto False. Besides coding the check box’s CheckedChanged event procedure, youalso need to set the check box’s AutoPostBack property to True in the Propertieswindow; the True value tells the client to initiate a postback each time the checkbox is clicked. When a postback occurs, the code contained in the check box’sCheckedChanged event procedure is processed. If you do not set the check box’sAutoPostBack property to True, the code contained in the CheckedChanged eventprocedure will not be processed until the user clicks the Button control, resulting ina postback.

ALIGNING TEXT AND CONTROLS ON A WEB FORMThe easiest way to align the static text and controls on a Web form is to use anHTML table. The table allows you to align the elements on the form in a row andcolumn format. Figure 12.27 shows the procedure you follow to include anHTML table on a Web form.

F I G U R E 1 2 . 2 8 Example of a completed Insert Table dialog box

Specifies the alignment of the tableon the Web form

Allows you to enter header text atthe top of the table

Controls the width of the tableborders

Indicates the number of rows andcolumns

HOW TO… Include an HTML Table on a Web Form1. 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 12.28 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 12.29.

F I G U R E 1 2 . 2 7 How to include an HTML table on a Web form

12 C

hapt

er

CXX

XX 3

9147

Page

18

07/1

4/06

--JH

R

An automatic postback alsooccurs when you click aLinkButton control or anImageButton control on aWeb page.

Aligning Text and Controls on a Web Form 19

As Figure 12.29 indicates, the table is centered in the form and contains fiverows and three columns. The intersection of a row and column in a table iscalled a cell. When you first add a table to a Web form, each cell in the table isempty. However, a cell can contain static text and/or one or more controls. Toenter static text in a cell, you click the cell and then type the text. You can usethe Formatting toolbar to change the font style, name, size, and so on used todisplay the text. To place a control in a cell, you drag the appropriate tool fromthe toolbox to the cell. You can change the height of a cell by positioning yourmouse pointer on the cell’s bottom border until the mouse pointer becomes adouble horizontal line with arrows pointing up and down. You then press theleft mouse button as you drag the border either up or down. You follow a similarprocess to adjust the width of a cell, except you position your mouse pointer onthe cell’s right border until the mouse pointer becomes a double vertical linewith arrows pointing left and right. You then press the left mouse button as youdrag the border either to the left or right. You also can merge two or more adja-cent cells by selecting the cells and then using the Merge Cells option on theLayout menu. Figure 12.30 shows an example of a completed table in the Designpane, and Figure 12.31 shows how the table appears in an Internet Explorer win-dow. The table contains a text box for entering the sale amount, a button for cal-culating two sales tax amounts, and two labels for displaying the calculatedamounts. It also contains static text.

F I G U R E 1 2 . 3 0 Example of a completed table in the Design pane

F I G U R E 1 2 . 2 9 Table created by the settings shown in Figure 12.28

The table is centered and containsfive rows and three columns

Click here and then type theheader text

12 C

hapt

er

CXX

XX 3

9147

Page

19

07/1

4/06

--JH

R


APPLICATIONS CONTAINING MULTIPLE WEB FORMSAll of the Web applications you viewed in the previous sections in this chaptercontained one Web form. However, a Web application can contain multiple Webforms. Figure 12.32 shows a procedure for adding a new Web form to the currentWeb application.

HOW TO… Add a New Web Form to the Current Application1. 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 dia-log box by right-clicking the project name in the Solution Explorerwindow 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 12.33 shows an example of a completed Add New Itemdialog box.

5. Click the Add button.

F I G U R E 1 2 . 3 2 How to add a new Web form to the current application

F I G U R E 1 2 . 3 1 Table displayed in Internet Explorer

12 C

hapt

er

CXX

XX 3

9147

Page

20

07/1

4/06

--JH

R

Applications Containing Multiple Web Forms 21

When a Web application contains more than one form, you typically providea way for the user to move from one Web page to another Web page; onemethod of doing this is to use a hyperlink. You can create a hyperlink using theHyperLink tool in the toolbox. Figure 12.34 lists the names and uses of severalproperties of a HyperLink control, and Figure 12.35 shows a HyperLink controlon the FirstPage Web form in the Design pane. In this case, the HyperLink con-trol’s Font property is set to Large and its Text property is set to “Click here todisplay the SecondPage”. When the user starts the Web application and thenclicks the HyperLink control on the FirstPage Web form, the SecondPage Webform will appear in the browser window. This is because the HyperLink control’sNavigateUrl property contains the location of the SecondPage.aspx file.

HOW TO… Use a Web HyperLink ControlProperty Use to

ID give the HyperLink control a meaningful nameFont specify the font to use for textNavigateUrl specify the location of the Web page to display when the

HyperLink control is clickedTarget 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)

Text specify the text to display on the Web form

F I G U R E 1 2 . 3 4 How to use a Web HyperLink control

F I G U R E 1 2 . 3 3 Example of a completed Add New Item dialog box

Select Web Form

Select this check box

12 C

hapt

er

CXX

XX 3

9147

Page

21

07/1

4/06

--JH

R


Using a HyperLink control is not the only way to include a hyperlink on aWeb form. You also can use the Convert to Hyperlink button, which is locatedon the Formatting toolbar, to turn any of the form’s static text into a hyperlink.Figure 12.36 shows the procedure you follow when using the Convert toHyperlink button to create a hyperlink, and Figure 12.37 shows an example of acompleted Hyperlink dialog box. Figure 12.38 shows a static text hyperlink onthe SecondPage Web form in the Design pane. In this case, when the user clicksthe Return to FirstPage hyperlink in the browser window, the FirstPage Web formwill appear.

F I G U R E 1 2 . 3 7 Example of a completed Hyperlink dialog box

Convert to Hyperlink button

Select the static text

HOW TO… Use the Convert to Hyperlink Button to Create a Hyperlink1. 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 appropri-

ate URL. Figure 12.37 shows an example of a completed Hyperlinkdialog box.

4. Click the OK button. Click another area on the Web form to deselectthe selected text.

F I G U R E 1 2 . 3 6 How to use the Convert to Hyperlink button to create ahyperlink

F I G U R E 1 2 . 3 5 HyperLink control shown on the FirstPage Web form inthe Design pane

HyperLink control

12 C

hapt

er

CXX

XX 3

9147

Page

22

07/1

4/06

--JH

R

You can determine the URLattached to a static text hyperlink by clicking the hyperlink in the Design paneand then viewing the valuestored in the hyperlink’s HRefproperty in the Properties window.

More Web Controls 23

MORE WEB CONTROLSVisual Web Developer 2005 provides many controls for use on a Web form. Besidesthe controls already covered in this chapter, several of the more commonly usedWeb controls are the ImageButton, RadioButtonList, and DropDownList controls;an example of each of these controls is shown in Figure 12.39. In addition, thenames and uses of several properties of the controls are listed in Figures 12.40,12.41, and 12.43. (Figure 12.42 contains an example of a completed ListItemCollection Editor dialog box, which can be used to enter the items to display inthe RadioButtonList and DropDownList controls.) A good way to learn how touse the ImageButton, RadioButtonList, and DropDownList controls is to add thecontrols to a Web form and then use the information in the How To boxes to setthe various properties. You can observe the way different property settings affectthe appearance and behavior of the controls by opening the Web form in abrowser.

F I G U R E 1 2 . 3 8 A static text hyperlink shown on the SecondPage Webform in the Design pane

Static text hyperlink

12 C

hapt

er

CXX

XX 3

9147

Page

23

07/1

4/06

--JH

R


HOW TO… Use a Web ImageButton ControlProperty Use to

ID give the ImageButton control a meaningful nameImageUrl specify the location of the image that will appear in the

controlPostBackUrl specify the URL to post to when the ImageButton control

is clicked

F I G U R E 1 2 . 4 0 How to use a Web ImageButton control

F I G U R E 1 2 . 3 9 Web controls shown on a Web form

The mouse pointer changes to ahand icon when it is positioned onan ImageButton control

The RadioButtonList control containsfive radio buttons

Click the down arrow to view thelist of items contained in theDropDownList control

12 C

hapt

er

CXX

XX 3

9147

Page

24

07/1

4/06

--JH

R

More Web Controls 25

F I G U R E 1 2 . 4 2 Example of a completed ListItem Collection Editordialog box

HOW TO… Use a Web RadioButtonList ControlProperty Use to

AutoPostBack specify whether the form is posted back to theserver when a radio button is clicked

BorderStyle indicate the type of frame (if any) that appearsaround the control

DataSourceID specify the data source for the DataTextField propertyDataTextField indicate the field to display from the data source

specified in the DataSourceID propertyID give the RadioButtonList control a meaningful nameItems display the ListItem Collection Editor dialog box,

where you can enter the text to display on the radiobuttons; Figure 12.42 shows an example of a com-pleted ListItem Collection Editor dialog box

RepeatDirection control the direction in which the items are laid out:vertical (the default) or horizontal

F I G U R E 1 2 . 4 1 How to use a Web RadioButtonList control

12 C

hapt

er

CXX

XX 3

9147

Page

25

07/1

4/06

--JH

R

The DataSourceID andDataTextField properties, whichappear in Figures 12.41 and12.43, allow you to connect aRadioButtonList control and aDropDownList control to a fieldin a database table.


You have completed the concepts section of Chapter 12. The next section isthe Programming Tutorial section, which gives you step-by-step instructions onhow to apply the chapter’s concepts to an application. Following theProgramming Tutorial in this chapter are the Quick Review, Key Terms, Self-Check Questions and Answers, Review Questions, Review Exercises – ShortAnswer, Computer Exercises, and Case Projects sections.

HOW TO… Use a Web DropDownList ControlProperty Use to

AutoPostBack specify whether the form is posted back to the serverwhen an item in the list is clicked

DataSourceID specify the data source for the DataTextField propertyDataTextField indicate the field to display from the data source speci-

fied in the DataSourceID propertyID give the DropDownList control a meaningful nameItems display the ListItem Collection Editor dialog box, where

you can enter the text to display in the list

F I G U R E 1 2 . 4 3 How to use a Web DropDownList control

PROGRAMMING TUTORIAL

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 inthe 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 12.45.

12 C

hapt

er

CXX

XX 3

9147

Page

26

07/1

4/06

--JH

R

Programming Tutorial 27

Task Object Event

1. Display the appropriate image in the rockImageButton, ClickplayerImage control paperImageButton,

2. Generate a random number from 1 to 3, scissorsImageButtoninclusive

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 Noneor a tie game

Display the image corresponding to the playerImage Noneplayer’s choice

Display the image corresponding to the computerImage Nonecomputer’s choice

F I G U R E 1 2 . 4 5 TOE chart

F I G U R E 1 2 . 4 4 User interface

12 C

hapt

er

CXX

XX 3

9147

Page

27

07/1

4/06

--JH

R


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

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 NewWeb 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 textwith C:\VbReloaded\Chap12\RockPaperScissors. The completed dialog box is shown in Figure 12.46.

5. Click the OK button to close the dialog box. A new Web application named RockPaperScissors appears on thescreen. Temporarily display the Solution Explorer window, then click the plus box that appears next to theform file’s name, which is Default.aspx. As Figure 12.47 indicates, the application also contains a file namedDefault.aspx.vb; recall that this is the code file.

F I G U R E 1 2 . 4 6 Completed New Web Site dialog box

The path to your RockPaperScissorsapplication might be different

12 C

hapt

er

CXX

XX 3

9147

Page

28

07/1

4/06

--JH

R


6. Click the Design tab on the Web Form Designer window. Temporarily display the Properties window. If nec-essary, click the down arrow button in the Properties window’s Object box, then click DOCUMENT in thelist. 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 Tableto open the Insert Table dialog box. If necessary, click the Custom radio button. Set the number of table rowsto 7. Click the down arrow button in the Align box, then click center to center the table horizontally onthe Web form. Click the OK button to close the dialog box. A seven-row, three-column table appears centeredhorizontally 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 thetable. 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, pointto Justify, and then click Left. Type Computer:. See Figure 12.48.

F I G U R E 1 2 . 4 8 Static text entered in the table

F I G U R E 1 2 . 4 7 RockPaperScissors Web application

Name of the form file

Name of the code file

12 C

hapt

er

CXX

XX 3

9147

Page

29

07/1

4/06

--JH

R


11. Next, you will add two Image controls to the table. Click the Image tool in the toolbox. Drag the mousepointer to the cell located in the second row, first column of the table, then release the mouse button. Clickthe 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 12.49.

You use an Image control’s ImageUrl property to specify the location (path and name) of the image you want dis-played in the control. In this case, the appropriate image is contained in the Blank.jpg file; you will find the filein the VbReloaded\Chap12 folder. However, to make it easier to copy the Web application from one computer toanother, 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 Itemto open the Add Existing Item dialog box. Open the RockPaperScissors folder, if necessary, then clickBlank.jpg in the list of filenames. Click the Add button to close the dialog box. Temporarily display theSolution Explorer window. See Figure 12.50. Notice that the Blank.jpg filename appears in the list of itemscontained in the Web site.

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, thenclick the ellipsis button in the Settings box to open the Select Image dialog box. Click Blank.jpg in theContents 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 closethe Select Image dialog box. A green rectangular image appears in the table cell. See Figure 12.51.

F I G U R E 1 2 . 5 0 Solution Explorer window showing the Blank.jpg filename

Image filename

F I G U R E 1 2 . 4 9 Image controls added to the table

12 C

hapt

er

CXX

XX 3

9147

Page

30

07/1

4/06

--JH

R


16. Next, you will merge three cells into one, and then place a Label control in the cell. Click the cell located inthe fourth row, first column of the table. Then press and hold down the left mouse button as you dragthe mouse pointer to the right. When the three cells located in the fourth row are selected, release the mousebutton. (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 han-dle that appears on the label’s right border to make the label the same size as the cell. Set the label’s (ID) prop-erty to winnerLabel. Set its Font/Size property to Large, and its ForeColor property to Red. (Select Redfrom the Web tab.) Delete the contents of the label’s Text property. (Notice that the value of the label’s IDproperty 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 Scissorsimage in the cell.

19. You will use ImageButton controls rather than Image controls to display the images that the user clicks whileplaying 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 thetoolbox. (Be sure to click the ImageButton tool rather than the Image tool.) Drag the mouse pointer to the celllocated 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 thelast row, second column of the table, then release the mouse button. Set the ImageButton1’s (ID) property topaperImageButton.

21. Lastly, click the ImageButton tool in the toolbox again. Drag the mouse pointer to the cell located in the lastrow, third column of the table, then release the mouse button. Set the ImageButton1’s (ID) property toscissorsImageButton.

22. The rock, paper, and scissors images are contained in image files named rock.jpg, paper.jpg, and scissors.jpg. UseWindows 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 Website. Finally, use the three image files to set the ImageUrl property of the three ImageButton controls. Figure 12.52shows the completed interface.

F I G U R E 1 2 . 5 1 Current appearance of the Image controls

12 C

hapt

er

CXX

XX 3

9147

Page

31

07/1

4/06

--JH

R


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 iden-tified 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 StartWithout Debugging to start the Web application. The application’s start page (in this case, the Default.aspxWeb form) appears in your default browser window. Figure 12.53 shows the start page in Internet Explorer.

27. Close the browser window by clicking its Close button.

F I G U R E 1 2 . 5 3 Start page displayed in Internet Explorer

Close button

F I G U R E 1 2 . 5 2 Completed interface

Static text

Image control

Label control

Static text

ImageButton control

HTML Table

12 C

hapt

er

CXX

XX 3

9147

Page

32

07/1

4/06

--JH

R

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’sname 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 12.54. Replace the <your name> and <current date>

text with your name and the current date.

According to the TOE chart, shown earlier in Figure 12.45, you will need to code the Click event procedures forthe rockImageButton, paperImageButton, and scissorsImageButton controls. The first procedure you will code isthe rockImageButton’s Click event procedure. Figure 12.55 shows the procedure’s pseudocode.

Pseudocode

1. display the player’s choice, which is represented by the image on the rockImageButton, inthe 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 repre-sents the computer’s choice, and to display the appropriate message in the winnerLabel

random number1 display the rockImageButton’s image in the computerImage control

display the string “Tie Game” in the winnerLabel2 display the paperImageButton’s image in the computerImage control

display the string “Computer wins because paper covers rock.” in the winnerLabel3 display the scissorsImageButton’s image in the computerImage control

display the string “Player wins because rock breaks scissors.” in the winnerLabel

F I G U R E 1 2 . 5 5 Pseudocode for the rockImageButton’s Click event procedure

F I G U R E 1 2 . 5 4 Comments and Option statements entered in the CodeEditor window

Enter these comments and Optionstatements

12 C

hapt

er

CXX

XX 3

9147

Page

33

07/1

4/06

--JH

R


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’schoice, in the playerImage. Type ‘ display the image corresponding to the player’s choice and pressEnter, 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 tothe computerChoice variable. Type ‘ generate a random number from 1 to 3, inclusive and pressEnter. Type ‘ then use the random number to display the image and press Enter, then type ‘ corre-sponding 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.

8. Save the Web application, then start the application. Click the rockImageButton; doing this triggers anautomatic postback and causes the server to process the code contained in the rockImageButton’s Click eventprocedure. When the processing is completed, the server sends the updated Web form back to the client. Clickthe rockImageButton several times to verify that its Click event procedure is working properly. Figure 12.57shows a sample run of the application. Because the Click event procedure generates a random number for thecomputer’s choice, the image and message displayed in the computerImage and winnerLabel controls on yourscreen might be different from the ones shown in the figure.

F I G U R E 1 2 . 5 6 Completed Click event procedure for the rockImageButton

Enter the Select Case statement

12 C

hapt

er

CXX

XX 3

9147

Page

34

07/1

4/06

--JH

R


9. 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 shownin Figure 12.58.

Pseudocode

1. display the player’s choice, which is represented by the image on the paperImageButton,in the playerImage control




display the string “Player wins because paper covers rock.” in the winnerLabel2 display the paperImageButton’s image in the computerImage control

display the string “Tie Game” in the winnerLabel3 display the scissorsImageButton’s image in the computerImage control

display the string “Computer wins because scissors cut paper.” in the winnerLabel

F I G U R E 1 2 . 5 8 Pseudocode for the paperImageButton’s Click eventprocedure

F I G U R E 1 2 . 5 7 Sample run of the Rock, Paper, Scissors Web application

Your application might display adifferent message and image

12 C

hapt

er

CXX

XX 3

9147

Page

35

07/1

4/06

--JH

R

The ImageButton control is oneof the few Web controls that ini-tiate an automatic postbackwhen clicked.


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 isshown in Figure 12.59.

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 theYes button.Figure 12.60 shows the code for the Web version of the Rock, Paper, Scissors Game.

Pseudocode

1. display the player’s choice, which is represented by the image on thescissorsImageButton, in the playerImage control




display the string “Computer wins because rock breaks scissors.” in the winnerLabel2 display the paperImageButton’s image in the computerImage control

display the string “Player wins because scissors cut paper.” in the winnerLabel3 display the scissorsImageButton’s image in the computerImage control

display the string “Tie Game” in the winnerLabel

F I G U R E 1 2 . 5 9 Pseudocode for the scissorsImageButton’s Click event procedure

12 C

hapt

er

CXX

XX 3

9147

Page

36

07/1

4/06

--JH

R

'ƒApplicationƒname: RockPaperScissors'ƒApplicationƒpurpose: TheƒapplicationƒsimulatesƒtheƒRock,ƒPaper,ƒScissors

game.'ƒCreated/revised: <yourƒname>ƒonƒ<currentƒdate>

OptionƒExplicitƒOnOptionƒ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

ƒƒƒƒƒƒƒƒ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


ƒƒƒƒƒƒƒƒ'ƒdisplayƒtheƒimageƒcorrespondingƒtoƒtheƒplayer'sƒchoiceƒƒƒƒƒƒƒƒplayerImage.ImageUrlƒ=ƒpaperImageButton.ImageUrl

(Figure is continued on next page)

12 C

hapt

er

CXX

XX 3

9147

Page

37

07/1

4/06

--JH

R


ƒƒƒƒƒƒƒƒ'ƒ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


ƒƒƒƒƒƒƒƒ'ƒ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ƒSubEndƒClass

F I G U R E 1 2 . 6 0 Code for the Web version of the Rock, Paper, Scissors Game

12 C

hapt

er

CXX

XX 3

9147

Page

38

07/1

4/06

--JH

R

Key Terms 39

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

• Every Web page has a unique address, called a URL, that indicates its loca-tion on the Web.

• A URL consists of four parts: the protocol, the name of the Web server, thepath 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. Thecode file is identified by the .aspx.vb filename extension. The code file con-tains 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. Youadd controls to a Web form in the same way that you add controls to aWindows form.

• You should view a Web page in different browsers to see how the page willappear 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 Webpage 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 computerslocated all around the world.

The World Wide Web, also called WWW or the Web, consists of documentscalled 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 andview Web pages.

A static Web page is a non-interactive document whose purpose is merely todisplay information to the viewer.

12 C

hapt

er

CXX

XX 3

9147

Page

39

07/1

4/06

--JH

R


HTML stands for Hypertext Markup Language, which is a language thatuses 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 addressassigned to each Web page on the Web.

The HTTP communication protocol is the protocol used to transmit Webpages on the Web.

A protocol is an agreement between a sender and a receiver regarding the waydata 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 informa-tion from the user and also retrieve information for the user.

ASP.NET 2.0 is Microsoft’s newest technology for creating Web applicationscontaining 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 containsVisual 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 isstarted and is similar to the startup form in a Windows application.

The process of a client requesting services from a server and then the serverresponding to the client is called a round trip.

The action of a client resubmitting a Web form to a server is referred to as apostback.

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 APb. an ASPc. a ULRd. a URL

2. A computer that requests information from a Web server is called a client.a. Trueb. False

3. A is a program that requests and then displays a Web page. a. browserb. clientc. serverd. requester

4. An online form that you use to purchase a product is an example of a Web page.a. dynamicb. static

12 C

hapt

er

CXX

XX 3

9147

Page

40

07/1

4/06

--JH

R

Review Questions 41

5. When using ASP.NET 2.0 to create a dynamic Web page, the file con-tains the Visual Basic code that you enter in the Code Editor window.a. .aspb. .aspxc. .aspx.vbd. .vb

6. A(n) occurs when a client resubmits a Web form to a Web server. a. answerbackb. callbackc. postbackd. returnback

7. URL is an acronym for Universal Resource Locator.a. Trueb. False

8. is the communication protocol used to transmit Web pages on the Web. a. ASPb. HTMLc. HTTPd. URL

9. A client computer is also referred to as a host. a. Trueb. False

10. You test a Web application using a browser.a. Trueb. 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. codeb. formc. Webd. None of the above.

2. The default behavior for a control on a Web form is to trigger anautomatic postback when it is clicked. a. CheckBoxb. Labelc. TextBoxd. None of the above.

3. The intersection of a row and column in a table is called a .a. boxb. cellc. compartmentd. None of the above.

12 C

hapt

er

CXX

XX 3

9147

Page

41

07/1

4/06

--JH

R


4. The process of requesting a service from a Web server and having the serverfulfill the request is called a . a. postbackb. requestbackc. return tripd. round trip

5. You use the property to refer to a Web control in code.a. Attributeb. IDc. Identifierd. Name

6. You can use an HTML to align the text and controls on a Web form.a. boxb. containerc. paneld. table

7. If a URL does not contain a communication protocol, Web browsers use theprotocol.

a. File Systemb. FTPc. HTTPd. Remote

8. The Web server on your local machine is named .a. currenthostb. currentserverc. localserverd. localhost

9. The Web form file in a new Web application is automatically assigned thename .a. Default.aspb. Default1.vbc. WebForm1.aspxd. None of the above.

10. A postback occurs when a server sends a Web form back to the client.a. Trueb. False

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 usinga 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?

12 C

hapt

er

CXX

XX 3

9147

Page

42

07/1

4/06

--JH

R

Computer Exercises 43

7. 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 listbox 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 CollectionEditor dialog box, where you can enter the text to display in the list?

Computer Exercises

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 inthe 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 WebSite in the VbReloaded\Chap12 folder.

b. Change the DOCUMENT object’s Title property to Gentry Supplies.c. Create the Web form shown in Figure 12.16 in the chapter. The Web

form contains static text and controls. d. Open the Code Editor window, then enter the code shown in Figure 12.18.e. Save the Web application, then view the Web form in a browser.f. Use the information shown in Figure 12.26 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 displaystwo 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 inthe VbReloaded\Chap12 folder.

b. Change the DOCUMENT object’s Title property to Sales Tax.c. Create the Web form shown in Figure 12.30 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 12.31 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 dollarsto 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 inthe VbReloaded\Chap12 folder.

b. Change the DOCUMENT object’s Title property to Currency Converter.

12 C

hapt

er

CXX

XX 3

9147

Page

43

07/1

4/06

--JH

R


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. Theapplication allows the user to select a store number from a list box; it thendisplays 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 theVbReloaded\Chap12 folder.

b. Create an appropriate Web form, then code the application. The storenumbers and the names of the managers and assistant managers areshown here:

Store number Manager Assistant manager1001 Jeffrey Jefferson Paula Hendricks1002 Barbara Millerton Sung Lee1003 Inez Baily Homer Gomez1004 Lou Chan Jake Johansen1005 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 DirectSharon 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 calculateand display his or her bill. The cable rates are as follows:

Residential customers:Processing fee: $4.50Basic service fee: $30Premium channels: $5 per channel

Business customers:Processing fee: $16.50Basic service fee: $80 for first 10 connections;

$4 for each additionalconnection

Premium channels: $50 per channel for anynumber of connections

WKRK-RadioEach year, WKRK-Radio polls its audience to determine which Super Bowl com-mercial was the best. The choices are as follows: Budweiser, FedEx, MasterCard,and Pepsi. The station manager has asked you to create a Web application thatallows him to enter a caller’s choice. The choice should be saved in a sequential

12 C

hapt

er

CXX

XX 3

9147

Page

44

07/1

4/06

--JH

R

Case Projects 45

access file. The application also should display the number of votes for eachcommercial.

Skate-Away SalesSkate-Away Sales sells skateboards by phone. The skateboards are priced at $100each and are available in two colors—yellow and blue. The company employs20 salespeople to answer the phones. Create a Web application that allows thesalespeople to enter the customer’s name, address, and the number of blue andyellow skateboards ordered. The application should calculate the total numberof skateboards ordered and the total price of the skateboards, including a 5%sales tax.

Perrytown Gift ShopIn Chapter 8’s Programming Example, you created a Windows application forStanley Habeggar, the owner and manager of Perrytown Gift Shop. The applica-tion allows Mr. Habeggar to quickly and accurately calculate the weekly federalwithholding tax (FWT) for each of his six employees. Mr. Habeggar has askedyou to create a Web application that calculates and displays the employee’sgross pay, FWT, Social Security and Medicare (FICA) tax, and net pay. Use7.65% as the FICA tax rate. The weekly FWT tables are shown in Figure 8.44 inChapter 8. The application should allow the user to enter the number of hoursthe employee worked, as well as his or her pay rate, marital status (Single orMarried), and number of withholding allowances. Use $55.77 as the value of awithholding allowance.

12 C

hapt

er

CXX

XX 3

9147

Page

45

07/1

4/06

--JH

R

Creating Web Applications Using ASP .NET 2.0

Documents

Transcript of Creating Web Applications Using ASP .NET 2.0