Creating the Photo Album Website s Home Page

Creating the Photo Album Website's Home Page

With the user account-related web pages out of the way, the next page we'll implement is the photo album website's home page. The purpose of this page is to list all of the photo albums hosted through our site, allowing visitors to quickly jump to a particular album. While I mentioned earlier that the PhotoAlbum.aspx page will be used to display the pictures in a particular user's photo album, we have yet to go into detail on how this will be accomplished. This may seem like a difficult task at first; after all, how will the page know what user's album to display?

In Hour 9, "Web Form Basics," we talked about various ways of passing information from one page to another. The mechanism used most frequently by ASP.NET applications is the postback, which occurs whenever a Button Web control is clicked. However, as discussed in Hour 9, there are other techniques for passing information. One common mechanism is to use the querystring. The querystring is an optional string that can be tacked on to the end of a web page's URL. Specifically, if a website URL has a question mark in it (?), everything after the question mark is considered the querystring.

You have probably seen web pages whose URL looks like

http://www.someserver.com/somePage.aspx?Name=Scott&Age=21 

Here, the contents after the question mark are considered the querystring.

Therefore, to view a particular user's photo album, we'll use the URL PhotoAlbum.aspx?ID=UserId, where UserId is the unique identifier for the user in the aspnet_Users table. PhotoAlbum.aspx will then examine this querystring value and display the pictures that belong to that user. (We'll see how this is accomplished in the next hour.)

Therefore, we want to have our home page list all of the approved users in the aspnet_Users table, along with a link to PhotoAlbum.aspx?ID=UserId. To accomplish this, we will need to implement the following steps:

1.	Include any instructional or header text to the page's content region.
2.	Add a SqlDataSource control to the page that returns all approved users from the aspnet_Users table.
3.	Add a GridView control to the page and associate it with the SqlDataSource from step 2.
4.	Configure the GridView control to include a HyperLinkField that renders as a properly formatted link to PhotoAlbum.aspx, passing the particular user's UserId column value in the querystring.

For step 1, I added the header text Online Photo Album Home along with some instructions to the visitors, letting them know how to view an existing user's album as well as how to get started posting their own pictures.

Adding and Configuring the SqlDataSource Control

The next step in creating the photo album application's home page is adding a SqlDataSource control that retrieves those user accounts that are currently approved and have not been locked out. As we discussed in Hour 20, user accounts can be marked as not approved or locked out from the ASP.NET Website Administration Tool. Users who are not approved or who have been locked out should not appear in the list of albums on the home page.

To retrieve the list of applicable user accounts, start by adding a SqlDataSource control to the page, clicking the Configure Data Source link from its smart tag. From the Configure the Select Statement screen, you'll see a variety of views in the drop-down list, such as vw_aspnet_MembershipUsers and vw_aspnet_Users.

A view is, essentially, an alias for a more complicated SELECT query. For example, imagine that you had a rather involved SQL query that had a number of filter expressions and retrieved data from multiple tables. Rather than having to rewrite that SQL query every time you needed to use it, you could package it up into a view. Then the query could be executed by simply calling the view.

The ASPNETDB database contains a number of views to help make working with its underlying data easier. This is good news for us because the ASPNETDB contains multiple tables, and the queries for extracting data from multiple tables can be a bit unwieldy. By grouping these more intricate queries in a view, however, we can select the view from the SqlDataSource's wizard and work with that, bypassing the trickier SQL syntax.

The view we are interested in working with for the site's home page is the vw_aspnet_MembershipUsers view, which returns data from both the aspnet_Membership and aspnet_Users table. The aspnet_Users table contains just a list of UserIds and UserNames in the system; the additional user-related information, such as whether a user is approved or locked out, is stored in the aspnet_Membership table.

To configure the SqlDataSource control, perform the following steps:

1.	From the Configure the Select Statement screen, choose the vw_aspnet_MembershipUsers view from the drop-down list.
2.	From the column list, return just the UserId and UserName columns.
3.	Click the WHERE button and add two filter expressions: one on the IsApproved column and the other on the IsLockedOut column. For both, use the Operator = and the Source of None, specifying a hard-coded value of true for IsApproved and False for IsLockedOut. This will ensure that only approved, nonlocked-out users will be listed (see Figure 23.6). Figure 23.6. Add two filter expressions in the Add WHERE Clause dialog box.
4.	Click the ORDER BY button and have the results ordered by the UserName column in ascending order.

After you perform steps 1 through 4, the resulting SQL SELECT query should read as follows:

SELECT [UserId], [UserName] FROM [vw_aspnet_MembershipUsers] WHERE (([IsApproved] = @IsApproved) AND ([IsLockedOut] = @IsLockedOut)) ORDER BY [UserName] 

Furthermore, your screen should look like Figure 23.7.

Figure 23.7. The SqlDataSource control is configured to return all approved, nonlocked-out users.

Displaying Links to the Photo Albums with a GridView

With the SqlDataSource control configured, the final steps are to add the GridView control, bind it to the SqlDataSource control, and configure the GridView to include a HyperLinkField. Start by dragging and dropping a GridView control from the Toolbox onto the home page in Visual Web Developer. Next, associate the GridView with the SqlDataSource control by selecting the SqlDataSource control ID from the drop-down list in the GridView's smart tag.

At this point, feel free to customize any of the GridView's properties. While not mandated by the design specifications, it might be nice to add sorting and paging support to the GridView. Furthermore, you might want to use the Auto Format Wizard to enhance the GridView's appearance or set the EmptyDataText property so as not to confuse users who are visiting a new photo album website that lacks any current accounts. (Recall that the value of the EmptyDataText property is displayed if no results are returned by the GridView's associated data source control.)

When you have the GridView looking the way you want, go to the GridView's smart tag and click the Edit Columns link, displaying the Fields dialog box. We need to add a HyperLinkField to display a link to the photo album for each user. First, though, take a moment to remove the UserId BoundField that is currently part of the GridView's fields listed in the bottom-left corner.

Next, add a new HyperLinkField and move it to the top of the column list. Finally, set the HyperLinkField's Text property to View Album, the DataNavigateUrlFields property to UserId, and the DataNavigateUrlFormatString property to PhotoAlbum.aspx?ID={0}. This combination of property values will add a hyperlink to each row in the GridView with the text of the link reading View Album. When visitors click on one of these links, they'll be taken to PhotoAlbum.aspx?ID=UserId, where UserId is the unique identifier of the user account whose row was clicked.

Figure 23.8 shows the photo album application's home page when viewed through a browser. This photo album site has three users' accounts: Jisun, Sam, and Scott. Clicking on the View Album link will send visitors to PhotoAlbum.aspx, passing in the particular user's UserId. For example, clicking on Jisun's View Album link will whisk the users to PhotoAlbum.aspx?ID=0fdeb883-0a34-443a-8e2d-50615308215f, whereas clicking on Scott's View Album link will lead to PhotoAlbum.aspx?ID=6b1835e1-5957-4c4e-9778-af9f1f4c5c86.

Figure 23.8. The home page lists each active, nonlocked-out user, with a link to her album.

By the Way

As we discussed in the preceding hour, each user account is uniquely identified via the UserId column, which is of type uniqueidentifier. A uniqueidentifer is a very, very large number that is globally and temporally unique.

This large number is commonly represented in hexadecimal format, which uses 16 available characters to represent each digit (0 through 9 and a through f). The hexadecimal format is just another, more compact way to represent a large number.