Creating a Slideshow Picker Page

Now that you ve created the database tables and entered some data, you can proceed to creating the Web pages from which users can pick slideshows and display them. We ll start with the slideshow picker page. The picker page is actually quite simple: it will consist primarily of a ListBox control that displays the entries from the Slideshows table. The page will also have a button that users click to display the slideshow they ve selected.

Create the slideshow picker page

1. In Web Matrix, create a new page and name it  SlideshowPicker.aspx.

2. Add a heading, such as Pick a Slideshow to View.

3. From the Data window, drag the Slideshows table onto the page. This creates a SqlDataSourceControl control and an MxDataGrid control, already configured to access the Slideshows table.

4. Delete the MxDataGrid control. You might remember this trick from Chapter 11. All we really want is the preconfigured SqlDataSourceControl control, so we can remove the grid.

5. From the Web Controls tab in the Toolbox, drag the following controls onto the page and set their properties as indicated.

   Control	Property Settings
   ListBox	ID: listSlideshows DataSource: SqlDataSourceControl1 DataTextField: SlideshowTitle DataValueField: SlideshowName
   RequiredFieldValidator	ControlToValidate: listSlideshows ErrorMessage: You must select a slideshow!
   Button	ID: buttonRunSlideshow Text: Run Slideshow

In Chapter 6, you used a DropDownList control to display colors. In that chapter, you populated the control manually by creating list items in a dialog box. In the slideshow picker page, you re going to populate the ListBox control from the database instead. The ListBox control doesn t communicate directly with the database. Instead, you set the control s DataSource property to bind the control to the SqlDataSourceControl control, which as we ve seen performs all the database communication.

Like any list box control (in HTML, Microsoft Visual Basic, and so on), the ListBox control allows you to specify two settings for each item in the list: text and value. The text setting is displayed in the list box. The value setting is typically used to store information you don t want to display but that you need to use when the user has selected an item. We set the ListBox control s DataTextField property to the name of the column (SlideshowTitle) that contains the text we want to display. When a user selects a specific title, what we really need, though, is the corresponding name of the slideshow. Therefore, we set the DataValueField property to the contents of the SlideshowName column. I ll show you in a moment how to make use of these two different settings.

One more note: I ve had you put a button on the page that users click to run a slideshow. You might remember from Chapter 6 that we can set the DropDownList control s AutoPostBack property to True so that as soon as users select an item in the drop-down list, the page is posted back to the server. On this page, however, I think it s not a good idea to use the ListBox control s AutoPostBack feature. Running a slideshow means jumping to another page, which is a fairly extreme reaction to an action as simple as clicking an item in a list box. I therefore recommend adding the Run Slideshow button so that users are obliged to make a positive, explicit gesture to start the slideshow they ve selected.

With the controls in place, you can now add the code that will display slideshows and then allow users to select and display a slideshow.