Displaying the Photo Album to All Visitors

With the photo album administration piece complete, we're entering the home stretch! There are only two more pages to implement:

• PhotoAlbum.aspx Displays the pictures for a particular user's album

• PhotoDetail.aspx Displays a particular image, allows visitors to view comments, and allows users to add comments

Let's start with PhotoAlbum.aspx. Recall that the photo album application home page lists all users with a link to their photo album. That link takes visitors here, to PhotoAlbum.aspx, passing in the UserId value through the querystring like so:

PhotoAlbum.aspx?ID=UserId 

The pictures shown in the album should be filterable by category. That is, this page needs to include a DropDownList control that lists all of a user's custom categories (including an -- All -- option). Only those pictures that belong to the selected category are displayed.

In addition to displaying each image in the selected category for the specified user, we need to enable visitors to go from this page to the PhotoDetail.aspx page. The PhotoDetail.aspx page displays just the image specified along with any comments associated with the picture. Furthermore, authenticated users can leave comments.

While this list of tasks may sound a bit overwhelming, it shouldn't be too bad because we've already examined how to accomplish many of these tasks in this and previous hours. In Hour 17, "Working with Data-Bound DropDownLists, RadioButtons, and CheckBoxes," we saw how to use a DropDownList to filter the results displayed in a GridView. We just recently saw how to use ImageFields to display images in a GridView (as well as in Hour 18). There will be one new lesson learned: how to enhance the filtering DropDownList to allow a visitor to view all of the images in a user's photo album.

Filtering the User's Photo Album

Because this page needs to show the user's photo album, filtered by category, let's start by adding the DropDownList of categories through which the visitor can filter the results. Start by adding a SqlDataSource called categoriesDataSource to the page. Configure the SqlDataSource wizard using the following steps:

1.	Select the Categories table from the drop-down list and return the CategoryID and Name columns.
2.	Click the ORDER BY button and have the results sorted by the Name column in ascending order.
3.	Click the WHERE button and add a filter expression on the UserId column based on the QueryString value ID (see Figure 24.14). We use ID because this is the name of the querystring value passed from the home page. Figure 24.14. Add a filter expression on the UserId column based on the ID querystring value.
4.	Finish the SqlDataSource wizard. Upon returning to the Design view, switch to the Source view and edit the SqlDataSource's UserId parameter, removing Type="Object".

Watch Out!

Don't forget to remove Type="Object" from the SqlDataSource parameter (step 4). If you forget to omit the Type property, no records will be returned from the SqlDataSource, resulting in an empty DropDownList control.

With the SqlDataSource configured, we're ready to add the DropDownList control. Set this control's ID property to categories and assign it to the categoriesDataSource SqlDataSource. Because we want the list of pictures to update automatically when the user selects a new category from the list, set the DropDownList's AutoPostBack property to true.

We also need the DropDownList to include the -- All -- option. When this option is selected, all pictures will be displayed, regardless of whether the picture belongs to a category. To accomplish this, set the DropDownList's AppendDataBoundItems property to TRue and add the -- All -- option through the ListItem Collection Editor dialog box. After you add the -- All -- option, don't forget to return to the declarative markup and ensure that the <asp:ListItem> just added has Value="" explicitly set.

Take a moment to view your progress by visiting the page through a browser. Figure 24.15 shows PhotoAlbum.aspx.

Figure 24.15. The drop-down list includes an -- All -- option along with the user's categories.

Retrieving the Filtered Pictures

With the SqlDataSource and DropDownList for the categories complete, all that remains is creating the SqlDataSource for the pictures and the associated GridView. Start the process rolling by adding a SqlDataSource to the PhotoAlbum.aspx page named picturesDataSource. Because we want our filterable GridView to be able to show all pictures if the -- All -- option is selected, we have to do a bit more work in setting up the SqlDataSource than we normally would have to.

For starters, we must provide a custom SQL statement. Open the SqlDataSource control's wizard and, from the Configure the Select Statement screen, choose the Specify a Custom SQL Statement or Stored Procedure radio button. Next, in the SELECT tab, enter the following query:

SELECT PictureID, Title, UploadedOn FROM Pictures WHERE UserId = @UserId AND      (CategoryID = @CategoryID OR @CategoryID IS NULL) ORDER BY UploadedOn DESC 

Click the Next button and specify the parameter values. For the @UserId parameter, choose the QueryString option from the parameter source drop-down list and enter ID as the QueryString Field. For the @CategoryID parameter, set the parameter source to Control and choose the categories control from the drop-down list (see Figure 24.16).

Figure 24.16. Specify the @UserId and @CategoryID parameter values.

This SELECT query returns the PictureID, Title, and UploadedOn columns from the Pictures table, where the UserId equals the UserId value passed through the querystring. The (CategoryID = @CategoryID OR @CategoryID IS NULL) filter expression returns all pictures for this user if the "-- All --" option is selected. Recall that an OR clause returns true if either of the statements is true, so if the @CategoryID parameter is assigned NULL (as it is when the -- All -- option is selected), the compound statement (CategoryID = @CategoryID OR @CategoryID IS NULL) returns TRue for every row evaluated. If @CategoryID is not NULL and is, instead, some valid CategoryID value, then the evaluation returns true only when the CategoryID equals the value of the @CategoryID parameter (which contains the value of the category selected from the drop-down list).

There's one more important step we need to take to have the picturesDataSource work properly. By default, a SqlDataSource cancels a SELECT query if any of the parameters are NULL. That means that, by default, when the -- All -- option is selected and the @CategoryID parameter is assigned NULL, the SqlDataSource will cancel the SELECT statement and no results will be returned. Quite the opposite of what we want! To remedy this situation, simply set the picturesDataSource SqlDataSource's CancelSelectOnNullParameter property to False.

Did you Know?

Because a photo album can conceivably have categories to which no pictures have been assigned, it would be wise to enter a helpful message in the GridView's EmptyDataText property.

Displaying the Filtered Pictures

The last step for the PhotoAlbum.aspx page is to display the filtered results in a GridView. Add a GridView to the page, bind it to the productsDataSource SqlDataSource control, and check the Enable Sorting and Enable Paging check boxes. This will create three BoundFields in the GridView, one for each column returned by the SqlDataSource. Go to the Fields dialog box and remove the ProductID BoundField because we don't need to display that. While you're in the Fields dialog box, also set the UpdatedOn BoundField's HeaderText property to Date Added.

Currently, the GridView has two BoundFields: Title and UploadedOn. We need two additional fields: an ImageField to display the picture and a HyperLinkField that, when clicked, will whisk the user to ProductDetails.aspx, passing the PictureID value through the querystring. Add the HyperLinkField by performing the following steps:

1.	From the GridView's smart tag, click the Edit Columns link, bringing up the Fields dialog box.
2.	Add a HyperLinkField and move it so that it is the first field in the GridView.
3.	Set the Text property to View Comments and the DataNavigateUrlFields and DataNavigateUrlFormatString properties to PictureID and ~/PhotoDetail.aspx?ID={0}, respectively.

The HyperLinkField property settings will result in a hyperlink titled View Comments with a link to PhotoDetail.aspx?ID=PictureID. PhotoDetail.aspx, which we'll implement in the next section, displays the photo whose PictureID equals the ID value passed in through the querystring. Additionally, it displays the picture's comments and allows authenticated users to add comments.

Complete the GridView by adding an ImageField, setting its DataImageUrlField and DataImageUrlFormatString properties to PictureID and ~/UploadedImages/{0}.jpg, just like we did in the gvPictures GridView in the photo album administration page. I also suggest that you set the ImageField's ControlStyle property's Width or Height subproperties to appropriate values.

Figures 24.17 and 24.18 show Jisun's photo album when viewed by a visitor. In Figure 24.17 the user has opted to view all pictures; in Figure 24.18 the user has filtered the results to show only those pictures in the Test 4 category.

Figure 24.17. All of Jisun's pictures are shown.

Figure 24.18. The photo album has been filtered and now shows only those pictures in category Test 4.