The first step toward building the example in this chapter is to create the Storefront page shown in Figure 5-1. You'll first create a Master Page to set the look and feel of the site and then derive the Storefront page from it. Once the page is created, you'll add the controls needed to define its buttons and to display the books. To get started, you'll use Visual Studio 2005 to create a new Visual Basic web application.
On the Visual Studio menu bar, click File New Web Site…, as shown in Figure 5-2. The New Web Site dialog box will display.
Figure 5-3. Creating a new ASP.NET Web Site project
File-Based Web Development
Visual Studio 2005 provides you with four ways to develop a web site. For this project, you'll use the File System option. This new ASP.NET 2.0 option frees you from having to use IIS (Microsoft Internet Information Server) for development. Instead, Visual Studio 2005 provides its own built-in web server, which it launches when you run/debug the web application.
Now you can even develop ASP.NET 2.0 web applications on your Windows XP Home Edition PC, which does not include IIS.
5.1.1. Building a Site Template Using a Master Page
Visual Studio 2005 and ASP.NET 2.0 now support the creation of special pages known as Master Pages that you can use to give a common look and feel to every page on your site. The implementation resembles the visual page inheritance found in Windows Forms, for those who have used that popular framework, though strictly speaking, it is not the same. You can create a single Master Page to specify the common elements shared by all the pages of your site. You then create web pages that draw on content from the Master Page.
For the e-commerce site, you will first create a Master Page to define the header that will appear on every page. The header consists of two images, one showing the O'Reilly company logo and the other displaying the O'Reilly company name.
To create the Master Page, right-click on the project name in Solution Explorer and then select Add New Item… (see Figure 5-4).
Figure 5-4. Adding a new item to the project
In the Add New Item dialog, select the Master Page template and use the default name, MasterPage.master, as shown in Figure 5-5. Click Add to create the page.
Since you'll be using controls to add elements to the Master Page, go to the MasterPage.master page and switch to the Design view by clicking on the Design button at the bottom left of the page, as shown in Figure 5-6.
Your project will make use of a number of images, so you need to create a folder to store them. Add a folder to the project and name it Images by right-clicking on the project name in Solution Explorer and selecting Add Folder Regular Folder, as shown in Figure 5-7
Figure 5-5. Adding a Master Page to the project
Figure 5-6. Switching between Design view and Source view
Figure 5-7. Switching between the different views
Copy the images shown in Figure 5-8 into the C:\ShoppingApp\Images folder. You'll use these images to build your application. When you've finished, the Images folder should look like the one shown in Figure 5-9.
The images can be downloaded from this book's support site athttp://www.oreilly.com/catalog/vbjumpstartpg/.
Figure 5-8. Images used for this project
Figure 5-9. The Images folder with the various images
You'll need to refresh the Images folder to see the images (right-click on the Images folder in Solution Explorer and select Refresh Folder).
Now you're finally ready to lay out the elements of the Master Page. Drag and drop two Image controls and an HTML Horizontal Rule control from the Toolbox onto the page, as shown in Figure 5-10 Set the names of the controls to those shown in the figure. Make sure the controls are positioned above the ContentPlaceHolder control (simply position your cursor to the left of the ContentPlaceHolder control and press the Enter key a few times to move the control downward).
Switching Between Design View, Source View, and Code-Behind View
In Visual Studio 2005, a Web Form is displayed in Source view by default. Source displays the HTML and other markup a web browser uses to construct a web page you've designed. In Source view, you can directly modify HTML elements and their attributes as well as the controls contained within it. To switch to Design view, click on the Design button at the bottom of the screen. In Design view, you can visually inspect the page and drag and drop controls from the Toolbox onto the form. To view the code behind of the form, you can simply double-click on the form and the code behind will appear. In Code view, you use Visual Basic to write the business logic for your application and service the events raised by the various controls on the page. The figure shows each of the three views.
The ContentPlaceHolder control (populated by default in a Master Page) is a place holder for Content pages (pages that inherit from the Master Page) to populate with controls.
Set the ImageUrl property of the imgLogo control to ~/Images/oreilly_ logo.gif and that of the imgHeader control to ~/Images/oreilly_header.gif. The two GIF files contain the O'Reilly company logo and company header, respectively.
Save the project (click File Save All).
Figure 5-10. Populating the Master Page with the various controls
5.1.2. Building the Storefront Using a Content Page
Now that the Master Page is completed, you're ready to create the Storefront page. You'll do this by deriving (or inheriting) a Content page from the Master Page and then populating it with controls. The Storefront page will display a list of titles that users can add to a shopping cart.
To create a blank Content page, right-click on the project name (ShoppingApp) in the Solution Explorer and select "Add New Item…." In the Template window of the Add New Item dialog box, select Web Form and set its name to Main.aspx. To let Visual Studio 2005 know that you want to use a Master Page, check the "Select master page" checkbox at the bottom of the dialog, as shown in Figure 5-11 Click Add to move to the next step.
Now it's time to choose the Master Page. When Visual Studio 2005 displays the Select a Master Page dialog box, select MasterPage.master in the Contents of folder pane, as shown in Figure 5-12. Click OK to proceed to the next step.
Like Visual Basic classes, which can only inherit from one base class, an ASP.NET 2.0 Content page can have only one Master Page.
Figure 5-11. Creating a Content page by selecting a Master page
Figure 5-12. Selecting a Master Page
Visual Studio 2005 will display the new page, Main.aspx, with the contents of the Master Page grayed out, as shown in Figure 5-13. The grayed out sections of the page are meant to indicate that content derived from the Master Page cannot be edited in the Main.aspx form. Notice that the new page contains a Content control.
The Content control is the location where you populate the content of the page.
You'll customize the new page,Main.aspx, by adding controls to the Content control in the next step.
Figure 5-13. Creating a new Content page
While you can't directly edit Master Page content in Main.aspx, you can make changes by either right-clicking on the grayed-out content and selecting Edit Master, or by simply going to the Solution Explorer and double-clicking the Master Page. Either action will load the Master Page for editing.
Now we'll add the content, specifically the Storefront items available for users to select. Selection in your store will be limited to three items (my O'Reilly books). We'll use a 3 x 2 table to lay out their images and their purchase information.
To add content to a Content control, you'll typically drag-and-drop controls from the Toolbox onto it. You can also type text directly into a Content control if you wish. In the Content control, insert a 3 x 2 table (go to Table Layout) and then populate the table cells with the controls shown in Figure 5-14. Also, type in the text as shown in the figure. You can drag and drop the detailed information of each book from the following URLs:
Set the properties for the controls as follows:
Set the ImageUrl property to ~/Images/aspnetadn.gif.
Set the ImageUrl property to ~/Images/compactframeworkpg.gif.
Set the ImageUrl property to ~/Images/vbjumpstartpg.gif.
imgBtn1, imgBtn2, imgBtn3
Set the ImageUrl property to ~/Images/button_addtocart.gif.
Figure 5-14. Populating the Content page