1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 29 Bookstore Web Application: Client Tier Introducing Web Controls

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 29.1 Analyzing the Bookstore Web Application 29.2 Creating ASPX Pages 29.3 Designing the Books.aspx Page 29.4 Designing the BookInformation.aspx Page

3.  2009 Pearson Education, Inc. All rights reserved. 3 In this tutorial you will learn: ■Create an ASP.NET Web Site project in Visual Web Developer 2008 Express. ■Create and design ASPX pages. ■Use Web Form controls. ■Specify the look-and-feel of controls, using the CssStyle attribute and control properties. Objectives

4.  2009 Pearson Education, Inc. All rights reserved. 4 When the Books page is requested Retrieve the book titles from the database Display book titles in a ListBox When the user selects a book title from the ListBox Display the book’s cover image below the ListBox in an Image When the user clicks the View Information Button If the user did not select a book from the ListBox Display an error message Otherwise Store the selected book’s product ID Redirect the browser to the BookInformation page 29.1 Analyzing the Bookstore Web Application

5.  2009 Pearson Education, Inc. All rights reserved. 5 When the BookInformation page is requested Retrieve the selected book’s information from the database Display the book title in a Label Display the authors in a Label Display the cover art in an Image Display the remaining information in a DetailsView When the user clicks the Return to Book List Button on the BookInformation page Redirect the browser back to the Books page 29.1 Analyzing the Bookstore Web Application

6.  2009 Pearson Education, Inc. All rights reserved. 6 ■This ACE table (Fig. 29.1) lists the actions, controls and events that help you complete your own version of this application. Figure 29.1 | ACE table for the web-based Bookstore web application. (Part 1 of 3.) Action/Control/Event (ACE) Table for the Bookstore Web Application

7.  2009 Pearson Education, Inc. All rights reserved. 7 Action/Control/Event (ACE) Table for the Bookstore Web Application (Cont.) Figure 29.1 | ACE table for the web-based Bookstore web application. (Part 2 of 3.)

8.  2009 Pearson Education, Inc. All rights reserved. 8 Action/Control/Event (ACE) Table for the Bookstore Web Application (Cont.) Figure 29.1 | ACE table for the web-based Bookstore web application. (Part 3 of 3.)

9.  2009 Pearson Education, Inc. All rights reserved. 9 ■In Visual Web Developer, select File > New Web Site.... ■Select ASP.NET Web Site in the Templates: pane (Fig. 29.2). ■Then select File System in the Location: and choose a location on your local disk drive. Select Visual Basic for the Language. Creating an ASP.NET Web Site Project

10.  2009 Pearson Education, Inc. All rights reserved. 10 Creating an ASP.NET Web Site Project (Cont.) Figure 29.2 | Creating an ASP.NET Web Site in Visual Web Developer. ASP.NET Web Site template Type C:\SimplyVB2008\Bookstore in this TextBox Location where project will be created

11.  2009 Pearson Education, Inc. All rights reserved. 11 ■The Solution Explorer window for the web application is shown in Figure 29.3. ■ Default.aspx is the default name for the ASPX page and web.config specifies configuration options. Figure 29.3 | Solution Explorer window for the Bookstore project. Project name and location Default ASPX page name Creating an ASP.NET Web Site Project (Cont.)

12.  2009 Pearson Education, Inc. All rights reserved. 12 ■ASPX pages can be customized by using web controls, which are used in in much the same way as Windows controls. ■Figure 29.4 shows the Standard controls listed in the Toolbox. Creating an ASP.NET Web Site Project (Cont.) Figure 29.4 | Web Forms tab in Toolbox. Standard tab

13.  2009 Pearson Education, Inc. All rights reserved. 13 ■When you create a web application, an ASPX page is displayed in the Web Form Designer (Fig. 29.5). ■The Web Form Designer contains three viewing modes: – Design mode (Fig. 29.5) is a WYSIWYG (what you see is what you get) editor. –Use Design mode to create the GUI by dragging and dropping web controls. Figure 29.5 | Design mode of Web Form Designer. Source mode Creating an ASP.NET Web Site Project (Cont.) Split mode Design mode (selected)

14.  2009 Pearson Education, Inc. All rights reserved. 14 – Source mode shows the ASP.NET markup code. –Click to enter Split mode, which shows both modes. ■ASPX pages are defined using a combination of HTML and ASP.NET markup. ■The ASP.NET web controls that you add to your page are placed in the div element. Creating an ASP.NET Web Site Project (Cont.)

15.  2009 Pearson Education, Inc. All rights reserved. 15 Creating an ASP.NET Web Site Project (Cont.) Figure 29.6 | Split mode of Web Form Designer. This delimiter is highlighted by default in Visual Web Developer (This is an example of ASP markup To display line numbers, select Tools > Options..., then uncheck the Show all settings CheckBox in the dialog that appears. Select the General category and check the Line numbers CheckBox. HTML markup div element in Design view Split mode (selected)

16.  2009 Pearson Education, Inc. All rights reserved. 16 ■Select the Default.aspx file in the Solution Explorer window and rename it to Books.aspx. ■Change Untitled Page ’s Title to Book List. Figure 29.7 | Setting the Title property of Books.aspx. Component Object Box displays DOCUMENT for ASPX pages Title property changed to Book List Creating the Books.aspx Page

17.  2009 Pearson Education, Inc. All rights reserved. 17 Good Programming Practice Change the ASPX page’s name to a unique and meaningful name for easy identification.

18.  2009 Pearson Education, Inc. All rights reserved. 18 ■Select Design mode in the IDE, then select Format > New Style... to display the New Style dialog. ■Select body from the Selector ComboBox, then click Background in the Category ListBox. –Type #CCFFFF into the background-color ComboBox and click OK (Fig. 29.8). Creating the Books.aspx Page (Cont.)

19.  2009 Pearson Education, Inc. All rights reserved. 19 Figure 29.8 | Setting the background color of the page. style element containing a style for the page’s body element Creating the Books.aspx Page (Cont.) div element in which ASP.NET web controls are placed background color of page changed to #CCFFFF

20.  2009 Pearson Education, Inc. All rights reserved. 20 Portability Tip When specifying colors for web applications, it is best to use a color from the web-safe colors shown in the More Colors dialog to ensure that colors display correctly in a web browser.

21.  2009 Pearson Education, Inc. All rights reserved. 21 ■Select the dotted rectangle that represents the div element, then select Format > New Style.... ■In the dialog, check the Apply new style to document selection CheckBox. ■Replace the default style name (.newStyle1 ) with.mainDiv. ■Click Block for the Category, then select center from the text-align ComboBox. Creating the Books.aspx Page (Cont.) Figure 29.9 | div element after applying a style. div with cursor showing that the div’s content will be centered

22.  2009 Pearson Education, Inc. All rights reserved. 22 Common Programming Error Not checking the CheckBox Apply new style to document selection causes the style to be created but not applied to any controls.

23.  2009 Pearson Education, Inc. All rights reserved. 23 ■With the dotted rectangle selected, double click the Label web control in the Toolbox (Fig. 29.10). ■In the Properties window, set the ID property to availableLabel. ■Change the Label ’s Text property from Label to Available Books. Creating the Books.aspx Page (Cont.) Figure 29.10 | Label control displayed in the ASPX page. Label web control

24.  2009 Pearson Education, Inc. All rights reserved. 24 ■Apply a new style to the Label named style.pageTitle. ■Set the Label ’s font-family to Arial, Helvetica, sans-serif and set its font-size to XX-Large (Fig. 29.11). Figure 29.11 | availableLabel control after applying its style. availableLabel control after applying its style Creating the Books.aspx Page (Cont.)

25.  2009 Pearson Education, Inc. All rights reserved. 25 ■Place the cursor to the right of the availableLabel and press Enter, then create another Label with the ID instructionsLabel (Fig. 29.12). ■Apply a style named.instructions to this Label with font-size Medium. –Select Box in the Category list, then uncheck the Same for all CheckBox. –Set the top and bottom margins to 10. Creating the Books.aspx Page (Cont.) Figure 29.12 | instructionsLabel control. instructionsLabel control after applying its style

26.  2009 Pearson Education, Inc. All rights reserved. 26 ■Add a ListBox control with the ID bookTitlesListBox. ■Apply a new style named.bookList (Fig. 29.13). –Select Box in the Category list, then uncheck the Same for all CheckBox for the margin and set the top and bottom margins to 10. –Next, Select Position in the Category list, and set the width to 350. Creating the Books.aspx Page (Cont.) Figure 29.13 | bookTitlesListBox control. bookTitlesListBox control after applying its style

27.  2009 Pearson Education, Inc. All rights reserved. 27 ■Add an Image control with the ID coverImage. ■Set its BorderStyle to Outset and its BorderWidth to 5 pixels. ■Set the Image ’s Visible property to False (Fig. 29.14). Figure 29.14 | coverImage control. coverImage control with no image displayed Creating the Books.aspx Page (Cont.)

28.  2009 Pearson Education, Inc. All rights reserved. 28 ■Add a Button control with the ID informationButton. ■Apply a new style named.viewInfoButton (Fig. 29.15). –Select Box in the Category list, uncheck the Same for all CheckBox for the margin. –Set the top, right, bottom and left margins to 10, 0, 10 and 0, respectively. Creating the Books.aspx Page (Cont.)

29.  2009 Pearson Education, Inc. All rights reserved. 29 Figure 29.15 | informationButton control. informationButton control after applying its style Creating the Books.aspx Page (Cont.)

30.  2009 Pearson Education, Inc. All rights reserved. 30 ■Add the RequiredFieldValidator control from the Validation group in the Toolbox. ■Change the RequiredFieldValidator ’s ID to bookRequiredFieldValidator. ■Apply a new style named.validatorText. ■Set the font-size to large and set the font- weight to bold. Creating the Books.aspx Page (Cont.)

31.  2009 Pearson Education, Inc. All rights reserved. 31 ■Set the control’s ControlToValidate property to bookTitles­ListBox. –This triggers the error message when nothing is selected. ■Set the ErrorMessage property to Please select a book (Fig. 29.16). Figure 29.16 | Books.aspx page after all controls have been added. bookRequiredFieldValidator control after configuring its ErrorMessage property Creating the Books.aspx Page (Cont.)

32.  2009 Pearson Education, Inc. All rights reserved. 32 Common Programming Error Not setting the ControlToValidate property of a validation control results in an application error when you run your ASP.NET application.

33.  2009 Pearson Education, Inc. All rights reserved. 33 ■Select Website > Add New Item.... ■Select Web Form in the Templates: pane, and rename the ASPX page to BookInformation.aspx (Fig. 29.17). ■Make sure Visual Basic is selected in the Language: drop-down list, then click Add. Creating the BookInformation.aspx Page

34.  2009 Pearson Education, Inc. All rights reserved. 34 Figure 29.17 | Add New Item - Bookstore dialog. Change the Name to BookInformation.aspx Creating the BookInformation.aspx Page (Cont.) Web Form template

35.  2009 Pearson Education, Inc. All rights reserved. 35 ■Change the background color of this page to light blue. ■Set the page’s Title property to Book List. ■Create a new Label with the ID bookTitleLabel. ■Apply a new style named.bookTitle (Fig. 29.18). –Set the font-family to Arial, Helvetica, sans- serif. –Set the font-size to x-large, the font-weight to bold and the color to #0000FF. Creating the BookInformation.aspx Page (Cont.) Figure 29.18 | bookTitleLabel control. bookTitleLabel control after applying its style

36.  2009 Pearson Education, Inc. All rights reserved. 36 ■Add another Label with the ID authorsLabel and clear its Text property. ■Apply a new style named.authors (Fig. 29.19). –Set the font-size to large and the font-weight to bold. Figure 29.19 | authorsLabel control. authorsLabel control after applying its style Creating the BookInformation.aspx Page (Cont.)

37.  2009 Pearson Education, Inc. All rights reserved. 37 ■Add an Image with the ID bookImage. ■Set the BorderStyle to Outset and the BorderWidth to 5 pixels. ■Apply a new style named.bookCover (Fig. 29.20). –In the Box category, set the top, right, bottom and left margins to 10, 10, 10 and 0. –In the Layout category, set the float to left. Creating the BookInformation.aspx Page (Cont.) Figure 29.20 | bookImage control. bookImage control after applying its style

38.  2009 Pearson Education, Inc. All rights reserved. 38 ■Add the DetailsView control from the Toolbox ’s Data group. –Change the ID to bookDetailsView and clear the Width and Height properties. ■Apply a style named.detailsView (Fig. 29.21). –In the Box category, set the top, right, bottom and left margins to 10, 10, 10 and 0. –In the Border category, set the border-style to outset and the border-width to 5. –In the Position category, set the width to 350. Creating the BookInformation.aspx Page (Cont.)

39.  2009 Pearson Education, Inc. All rights reserved. 39 Figure 29.21 | bookDetailsView control. bookDetailsView control after applying its style Creating the BookInformation.aspx Page (Cont.)

40.  2009 Pearson Education, Inc. All rights reserved. 40 ■Select the DetailsView, then open the DetailsView Tasks menu (in the upper-right corner of the control). ■Click the Auto Format... link to display the AutoFormat dialog, then select Classic (Fig. 29.22). Creating the BookInformation.aspx Page (Cont.) Figure 29.22 | bookDetailsView control with auto formatting applied. bookDetailsView control after auto formatting

41.  2009 Pearson Education, Inc. All rights reserved. 41 ■Add a Button with the ID bookListButton (Fig. 29.23). ■Select the Button and open the New Style dialog. –Create a style named.returnButton. –In the Box category, set the top margin to 10. –In the Layout category, set clear to both. Creating the BookInformation.aspx Page (Cont.) bookListButton control after applying its style Figure 29.23 | bookListButton control.

42.  2009 Pearson Education, Inc. All rights reserved. 42 ■Run your application (Fig. 29.24). ■The ListBox does not contain any book titles because you have not yet set up the database connections. Running the Bookstore Web Application Figure 29.24 | Empty ListBox of the Books.aspx page. Empty ListBox control