1. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Introducing Web Controls Outline 29.1 Analyzing the Bookstore Application 29.2 Creating ASPX Pages 29.3 Designing the Books.aspx Page 29.4 Designing the BookInformation Page 29.5 Wrap-Up Tutorial 29 – Bookstore Application: Client Tier

2. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objectives In this tutorial, you will learn to: –Create an ASP.NET Web Application project. –Create and design ASPX pages. –Use Web Form controls. –Reposition controls, using the style attribute.

3. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 3 29.1 Analyzing the Bookstore Application

4. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 4 29.2 Creating ASPX Pages In the Options dialog, select Tools > Options To enable line numbers to be displayed, Navigate to the Text Editor > HTML/XML > General item –Check Line Numbers CheckBox

5. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 5 29.2 Creating ASPX Pages Figure 29.2 Options dialog. Text Editor (clicked) HTML/XML (clicked) General (selected) Line numbers CheckBox (checked)

6. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 6 29.2 Creating ASPX Pages To create a new ASP.NET Web Application, select File > New > Project –Project Type: Visual C# Project –Templates: ASP.NET Web Application –Location: http://localhost/Bookstore Note location is a Web address that specifies a location in your wwwroot folder

7. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 7 29.2 Creating ASPX Pages Figure 29.3 Creating an ASP.NET Web Application in Visual Studio.NET. ASP.NET Web Application template Visual C# Projects selected in the Project Types : pane Disabled Name : TextBox Location where project will be created Type http://localhost/ Bookstore in this TextBox

8. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 8 29.2 Creating ASPX Pages Figure 29.4 Visual Studio.NET creating the Bookstore application.

9. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 9 29.2 Creating ASPX Pages Figure 29.5 Solution Explorer window for the Bookstore solution. Project nameDefault ASPX page name

10. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 10 Figure 29.6 Web Forms tab in Toolbox. Web Forms tab 29.2 Creating ASPX Pages View > Toolbox – Click Web Forms

11. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 11 29.2 Creating ASPX Pages Web Form Designer –Design mode Grid – Allows drag and drop of components from the Toolbox Used to visually create the ASPX page’s GUI

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 Figure 29.7 Design mode of Web Form Designer. 29.2 Creating ASPX Pages Design Button (selected) HTML Button

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 29.2 Creating ASPX Pages HTML mode –Click the HTML Button –Use a combination of HTML and ASP markup

14. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 14 29.2 Creating ASPX Pages Figure 29.8 HTML mode of Web Form Designer. Design Button HTML Button (selected) HTML markup This portion is highlighted by default in Visual Studio.NET (This is an example of ASP markup)

15. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 15 29.3 Designing the Books.aspx Page Figure 29.9 Setting the File Name property of the ASPX page. Change the File Name property value to Books.aspx

16. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 16 Figure 29.10 The title property of Books.aspx. 29.3 Designing the Books.aspx Page title property changed to Book List Component Object Box displays DOCUMENT for ASPX pages

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 29.3 Designing the Books.aspx Page Changing the background color –Select bgColor in the Properties window Click the ellipsis (…) Button Select light blue (see Fig. 29.11)

18. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 18 Figure 29.11 Light blue selected in the Color Picker dialog. 29.3 Designing the Books.aspx Page Web Palette tabLight-blue color box (selected)

19. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 19 29.3 Designing the Books.aspx Page Creating a Label –Click the Label control Drag and drop the Label onto the Books.aspx page

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 Figure 29.12 Adding a header to a ListBox. 29.3 Designing the Books.aspx Page Label Web control

21. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 21 29.3 Designing the Books.aspx Page Renaming the Label –Select the Label View its properties in the Properties window –ID change Label1 to lblAvailable –Text : change to Available Books

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 Figure 29.13 Setting the font size of the Label control. 29.3 Designing the Books.aspx Page Font property node (expanded) Click to display the font size options Select XX-Large

23. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 23 Figure 29.14 Style property for the Label. 29.3 Designing the Books.aspx Page HTML Button (selected)style attribute LEFT portion of the style attribute value TOP portion of the style attribute value

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 Figure 29.15 Complete Label displayed in Design mode. 29.3 Designing the Books.aspx Page Label Web control

25. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 25 29.3 Designing the Books.aspx Page Create a Horizontal Rule –A Horizontal Rule provides a horizontal line on a Web page –In the Properties window click the ellipsis (…) that appears in the Style property and the Style Builder dialog will appear in order to format the Horizontal Rule

26. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 26 Figure 29.16 Style Builder dialog for the Horizontal Rule control. 29.3 Designing the Books.aspx Page Position tab

27. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 27 29.3 Designing the Books.aspx Page Creating a ListBox and Button

28. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 28 Figure 29.17 Design mode of Books.aspx. ListBox control 29.3 Designing the Books.aspx Page

29. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 29 29.4 Designing the BookInformation Page Adding another Web page to the project –File > Add New Item > Bookstore Select Web Form Rename to BookInformation.aspx

30. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 30 Figure 29.18 Add New Item – Bookstore dialog. 29.4 Designing the BookInformation Page WebForm templateChange this to BookInformation.aspx

31. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 31 Figure 29.19 Setting a Label ’s ForeColor property. 29.4 Designing the BookInformation Page Web tab ForeColor property Properties window – Select ForeColor Select Blue

32. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 32 Figure 29.20 Design of the BooksInformation.aspx page without the Table. 29.4 Designing the BookInformation Page Image Web Control

33. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 33 29.4 Designing the BookInformation Page Add a Table control To create rows in the Table, –Select Rows from the Properties window Click the ellipsis –Click the Add Button five times

34. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 34 29.4 Designing the BookInformation Page Five Tablerows added by the user Members : paneClick to add rows to the table Cells property Figure 29.21 TableRow Collection Editor dialog for the Table control.

35. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 35 29.4 Designing the BookInformation Page Adding cells to the Table –Members pane: Select TableRow 0 In TableRowProperties click the ellipsis Button to the right of Cells

36. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 36 29.4 Designing the BookInformation Page Members: pane Add TableCells by clicking Add Width property Text property Font property Height property Two TableCells added by the user Figure 29.22 TableCell Collection Editor dialog for the Table control.

37. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 37 29.4 Designing the BookInformation Page Empty TableCell Table controls Figure 29.23 Design of the BookInformation.aspx page.

38. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 38 29.4 Designing the BookInformation Page Figure 29.24 Empty ListBox of the Books.aspx page. Empty Listbox control