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:ShoppingAppImages 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.

Figure 5-8. Images used for this project

Figure 5-9. The Images folder with the various images

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.

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

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.

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.

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

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:

Figure 5-14. Populating the Content page

First, as always, you need to create the registration page. Add a new Web Form to the project and name it Register.aspx. Select MasterPage.master as the Master Page once again to assure Register.aspx has the same look and feel as other pages on your site.

Drag and drop the CreateUserWizard control from the Login tab in the Toolbox onto the Content control in Register.aspx. The CreateUserWizard control is a visual control that prompts the user to supply the necessary information to create a new user account.

Now set the look and feel of the registration form. On the CreateUserWizard Tasks menu, click on the Auto Format… link to apply the Professional scheme to the control.

You’ll want the Main.aspx page to be loaded when the user has finished registering a new account. Set the ContinueDestinationPageUrl property (through the Properties window) of the CreateUserWizard control to Main.aspx.

Now position the control on the page. Highlight the CreateUserWizard control and select Format → Justify → Center on the Visual Studio menu bar to centralize the position of the control on the page. The Register.aspx page should now look like Figure 5-21.

First, create the login page. Add a new Web Form to the project and name it Login.aspx. Select MasterPage.master as the Master Page once again to assure Login.aspx has the same look and feel as other pages on your site.

Now create a login form for users to complete. Drag and drop the Login control from the Login tab in the Toolbox onto the Login.aspx page. The Login control allows a user to log into your web site using the Membership class that you have seen earlier.

Figure 5-21. The Register.aspx page

New Login Controls in ASP.NET 2.0

ASP.NET 2.0 ships with several new Login controls (such as Login, LoginView, LoginStatus, LoginName, CreateUserWizard, and ChangePassword) to help you accomplish tasks such as user authentication, display of login status and login name, and more. The figure shows the various new Login controls in the Toolbox.

Set the look and feel of the control. Using the Login Tasks menu, click on the Auto Format… link to apply the Elegant scheme to the control.

Under the Login control, type the text “New Member? Register here.” At the end of the text, add a LinkButton control from the Toolbox (see Figure 5-22).

Figure 5-22. Populating the Login.aspx page

Finally, set the PostBackUrl property of the LinkButton control to ~/Register.aspx so that the Register.aspx page will be loaded to help an unregistered user create a new account. Also, set the ContinueDestinationPageUrl property of the Login control to Main.aspx so that upon successful login, the user would be redirected to Main.aspx.

First, create the folder in your project that will contain the restricted pages. To add a new folder to your project right-click on the project name, ShoppingApp in the Solution Explorer and then select Add Folder → Regular Folder. Name the folder Members.

Next, set the authorization required to access the folder. In Web.config, add the markup shown in bold in Example 5-7 to restrict anonymous users from accessing the files contained within the Members folder.

…
   </system.web>
   <location path="Members">
      <system.web>
       <authorization>
           <deny users="?" />
       </authorization>
     </system.web>
   </location>
</configuration>

The <location> element together with the <authorization> element allows you to restrict access to a particular folder on your web site. In this case, you have used the <deny> element to prevent all anonymous (represented by “?”) users from accessing the Members folder.

First, add a Global.asax file to the project (Figure 5-23). (Right-click on project name in Solution Explorer and then select Add New Item…. Select Global Application Class.) You will need the Global.asax file to service an event (see the next step) when the user changes from an anonymous state to an authenticated one. Visual Studio opens the file for you after adding it to your project.

Figure 5-23. Adding a Global.asax file to the project

Type the Profile_MigrateAnonymous event handler shown in Example 5-8 into Global.asax. The Profile_MigrateAnonymous event is raised whenever a user changes her status from anonymous to authenticated (when she logs into the application via the Login.aspx page).

You can get the anonymous ID from the AnonymousId property (in the ProfileMigrateEventArgs class) and then use the GetProfile method to retrieve the anonymous profile. The retrieved profile can then be assigned to the authenticated user profile. You will also delete the old profile associated with the anonymous user.

Sub Profile_MigrateAnonymous(ByVal sender As Object, _
   ByVal e As ProfileMigrateEventArgs)
     Dim anonymousProfile As ProfileCommon = _

	   Profile.GetProfile(e.AnonymousID)
	If anonymousProfile.shoppingcart IsNot Nothing Then 
		Profile.shoppingcart = anonymousProfile.shoppingcart 
End If

	'---delete the items associated with the anonymous user
	ProfileManager.DeleteProfile(e.AnonymousID)

	'---clear the anonymous identifier from the request
	' so that this event will not fire for an authenticated
	' user 
	AnonymousIdentificationModule.ClearAnonymousIdentifier
End Sub

Now you’ll create the Checkout page that will be used to display the items currently stored in the user’s shopping cart. Add a new Web Form to the Members folder and select the MasterPage.master Master Page. Name the new Web Form Checkout.aspx.

Populate the form with a GridView control and apply the Sand & Sky scheme to it. (Select Auto Format… in the GridView Tasks menu; see Figure 5-24.)

Figure 5-24. Applying Auto Format to a GridView control

Also, add a LinkButton control under the GridView control and set its Text property to “Continue Shopping” and its PostBackUrl property to ~/Main.aspx. The results are shown in Figure 5-25.

In the code behind of Checkout.aspx, code the Form_Load event as shown in Example 5-9. The Checkout.aspx page will first create a dataset containing all the items in the shopping cart and then use it to bind to the GridView control. It also changes the image in the imgHeader control in the Master Page using the FindControl method in the Master property.

Figure 5-25. Members/Checkout. aspx page

Imports System.Data

Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
      Dim myCart As OReilly.Cart
      myCart = Profile.shoppingcart
      Dim item As OReilly.itemType

     '---change the image
     Dim masterImage As Image
     masterImage = CType(Master.FindControl("imgHeader"), _<
                   Image)
     If masterImage IsNot Nothing Then
         masterImage.ImageUrl = "~/Images/header_shopping.gif"
     End If

    '---create a dataset---
    Dim ds As New DataSet
    ds.Tables.Add("Items")
    ds.Tables("Items").Columns.Add("ISBN")
    ds.Tables("Items").Columns.Add("Qty")
    Dim row As DataRow

    '---return all the items as a dataset---
    For Each item In myCart.items
        row = ds.Tables("Items").NewRow
        row("ISBN") = item.isbn

        row("Qty") = item.qty
        ds.Tables("Items").Rows.Add(row)
   Next

   '---Bind the GridView control to the dataset
   GridView1.DataSource = ds
   GridView1.DataBind()

End Sub

You locate the controls you want to modify on the Master Page by using the FindControl method of the Master property, then supplying the name and type of the control you want to modify. Once the control is located, you can change its properties as if it were a local object.

Master is a special property exposed by the Web Form as a handle with which to access the Master Page. However, the Master property is valid only on pages that reference a Master Page.

You can programmatically check if a page is using a Master Page by doing this:

    If Master Is Nothing Then
         '---Page does not use master page---
          … 
    End If

You’ll want Checkout.aspx to be displayed when a user clicks on the Checkout button in Main.aspx. So, as a last step, go to Main.aspx and set the PostPackUrl property of the Checkout button in Main.aspx to ~/ Members/Checkout.aspx so that the user can be brought to the Checkout.aspx page to check out. If an unauthenticated user clicks on the Checkout button, he will be redirected to Login.aspx.