Tutorials Home

Linking Multiple Pictures to GridView Results Selection

This tutorial explains how to display multiple pictures of an item based on the selection of that particular item from a GridView displaying many items.

It would be useful where, for example, you had a large number of items for sale, and wished to enable a user to view pictures of any selected item. We will assume for this tutorial that we wish to display 2 pictures for each item (say a front view and a back view). It will be obvious how to extend the procedure to any number of pictures.

For this tutorial you will need to make an Access database named ItemsForSale.mdb, and create in it a table named "Items". In Design View, put the following two fields in the Items table:

Fieldname: Item       Data Type: Text
Fieldname: Price      Data Type: Number      Format: Currency

Save (let Access assign an autonumber ID column). Switch to table view and enter "Item1", "Item2", "Item3", and "Item4" for the first four records. Enter a price for each.

Save the database, open Expression, and Import the database into the fpdb folder.

We are also going to need pictures associated with each Item, so take eight handy jpg pictures, name them Item1Front.jpg, Item1Back.jpg, Item2Front.jpg, Item2Back.jpg, etc until you have 2 pictures for each item. If you dont already have an Images folder in Expression, make one, and then import the 8 pictures. It is important that you name the pictures in some kind of ordered manner like this, using the names of the items as part of the name of the pictures.

Now we can start the tutorial.

In Expression, make a testing folder in the root of your web, and put the following two pages in it:

First, make a single picture page that we will be linking to, say Pictures.aspx where you plan to put two item pictures. Perhaps in a table with two cells -- the layout is up to you.

Then make a page called "ItemsForSale.aspx" and open it. Place your cursor in the one-line form, switch to Tag Properties, and change the ID from "form1" to "ForSale".

Drag a GridView control from the ASP.NET toolbox onto the form. In the Common GridView Tasks box click Choose Data Source and choose New Data Source, Click on the Access Database icon, and change the name from "AccessDataSource1" to a more recognizable "ItemsForSale"

Click OK and then hit the Browse button, browse to the the fpdb folder, highlight the database "ItemsForSale.mdb" and click Open

Click Next to bring up the Configure Data Source screen which offers you the table "Items" and the fields in that table. Select * to bring up all the fields in the GridView, click Next, click Test Query, Click Finish. If you had a large number of records in the database, you would check the enable paging box in the Common GridView Tasks pane.

Save the page and preview in browsers. You should see all the records in the database, but no way yet to link to the actual pictures. 

Now to add a column that links to the Item pictures.. Click the little expander arrow on the GridView to see the Common GridView Tasks and pick "Add New Column". Change the Field Type from Bound Field to Hyperlink. For the Header text type a name you want to appear over that column in the GridView, for example "PicturesLink". 

For the Hyperlink text, select "specify text" and type "View Pictures"

For the hyperlink URL select Get URL from data field and pick "Item"

For the URL format string type: pictures.aspx?Item={0} What this does, is cause whichever item is selected from this GridView to show up on the pictures.aspx wherever we place {0} (this is how parameters are passed from one page to another) 

Click OK. And select Enable Paging if there are going to be many items in the ItemsForSale.mdb database

Save, Preview in Browser. There should now be a PicturesLink column in your GridView display along with the original columns.

Placing the FrontView pictures on the pictures.aspx page:

Go to the Pictures.aspx page and drag a GridView control into the position you would like the front view picture of an item to display.

In the Common GridView Tasks pane, choose data source, New Data Source, Click on Access database, change name from AccessDataSource1 to FrontPictureSource, click OK, browse to the fpdb folder, highlight ItemsForSale.mdb, Click Open, Click Next.

The Items table should be showing, select just the item field since we have no need to show all the fields here

Now the key thing: Select Where, Select the column "Item", for Source choose "query string", and the the Parameter Properties section type the query string field: Item

Click Add, OK, Next, TestQuery, Ok, Finish

Now in the Common GridView Task pane we need to select Add New Column. Change the offered selection from BoundField to ImageField, for header text type "FrontView", Pick Item for the datafield, and for the DataImageURLFormatString type: ../images/{0}front.jpg (note: if you had not put the two files we are working on in a folder so that they are a level "below" the root directory, you would not need the "../" in that format string)

Placing the Back View Picture:

Repeat the procedure used for the Front View picture above. The only difference are naming another new data source BackPictureSource, and that for the ImageField header column you type BackView instead of FrontView and for the URL format string you use ../images/{0}back.jpg

That's it, you are finished. Save, preview in browser.

If you did not want the item name showing along with the pictures. then on the pictures.aspx page, click the little expander arrow on each GridView, select "Edit Columns", and then in the lower left window select the Item field and click the red X to delete it. This leaves only the FrontView and BackView columns containing the pictures.

And of course you can always go back and edit things by clicking on the expander arrow for the GridViews showing the images and selecting "Edit Columns"

Tutorials Home

Site Navigation: