t u t o r i a l 2009 pearson education, inc. all rights reserved. 1 29 bookstore web application:...

T U T O R I A L

2009 Pearson Education, Inc. All rights reserved.

1

29Bookstore

Web Application: Client Tier

Introducing Web Controls


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

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

When the Books page is requestedRetrieve the book titles from the databaseDisplay 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 ButtonIf the user did not select a book from the ListBox

Display an error messageOtherwise

Store the selected book’s product IDRedirect the browser to the BookInformation page



5

When the BookInformation page is requestedRetrieve the selected book’s information from the

database Display the book title in a LabelDisplay the authors in a LabelDisplay the cover art in an ImageDisplay 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



6

Action Control/Object Event

Label the Books page availableLabel, instructionsLabel

Page Load (for Books.aspx)

Retrieve the book titles from the database

linqDataSource

Display book titles in a ListBox bookTitlesListBox

bookTitlesListBox SelectedIndexChanged

Display the book’s cover image below the ListBox in an Image

bookTitlesListBox, db (an object of class BookInformationDBDataContext), coverImage

■ 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 theBookstore Web Application


7


informationButton Click

I f the user did not select a book from the ListBox

bookTitlesListBox

Display an error message bookRequiredFieldValidator

Otherwise

Store the selected book’s product ID in a session variable

bookTitlesListBox, Session

Redirect the browser to the BookInformation page

Response

Action/Control/Event (ACE) Table for theBookstore Web Application (Cont.)



8


Page Load (for Book-Information.aspx)

Retrieve the selected book’s information from the database

db (an object of class BookInformationDBDataContext), Session

Display the book title in a Label bookTitleLabel

Display the authors in a Label authorsLabel

Display the cover art in an Image bookImage

Display the remaining information in a DetailsView

linqDataSource, bookDetailsView

bookListButton Click

Redirect the client browser back to the Books page

Response

Action/Control/Event (ACE) Table for theBookstore Web Application (Cont.)



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

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 projectwill be created


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



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.


Figure 29.4 | Web Forms tab in Toolbox.

Standard tab


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


Split mode

Design mode (selected)


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.



15


Figure 29.6 | Split mode of Web Form Designer.

This delimiter is highlighted bydefault in Visual Web Developer

(This is an example of ASP markup

To display line numbers, select Tools > Options..., then uncheckthe 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

■ 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

Good Programming Practice

Change the ASPX page’s name to a unique and meaningful name for easy identification.


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

Figure 29.8 | Setting the background color of the page.

style elementcontaining a style for the

page’s body element


div element in which ASP.NET web controls are placed

background color of page changed to #CCFFFF


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

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


Figure 29.9 | div element after applying a style.

div with cursor showing that the div’s content will be

centered


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

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


Figure 29.10 | Label control displayed in the ASPX page.

Label web control


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



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.


Figure 29.12 | instructionsLabel control.

instructionsLabel control after applying its style


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.


Figure 29.13 | bookTitlesListBox control.

bookTitlesListBox control after applying its style


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



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.



29

Figure 29.15 | informationButton control.

informationButton control after applying its style



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.



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



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

■ 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

Figure 29.17 | Add New Item - Bookstore dialog.

Change the Name to BookInformation.aspx

Creating the BookInformation.aspx Page (Cont.)

Web Form template


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.


Figure 29.18 | bookTitleLabel control.

bookTitleLabel control after applying its style


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



37

■ Add an Image with the ID bookImage.

■ Set the BorderStyle to Outset and theBorderWidth 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.


Figure 29.20 | bookImage control.

bookImage control after applying its style


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.



39

Figure 29.21 | bookDetailsView control.

bookDetailsView controlafter applying its style



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


Figure 29.22 | bookDetailsView control with auto formatting applied.

bookDetailsView controlafter auto formatting


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.


bookListButton control after applying its style

Figure 29.23 | bookListButton control.


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

t u t o r i a l 2009 pearson education, inc. all rights reserved. 1 29 bookstore web application:...

Documents