This is the third part of the ASP.NET Photo Album tutorial series. This tutorial will walk you through the steps of creating a page that will display all of the images in our database with ASP.NET 4.0 and C#.

Adding the Image.aspx Page

Now that we have some images in our database, we are ready to display them. To do this, we will be adding two different pages. First, the Image.aspx page that will display a single image and then the Default.aspx page which will be our home page and display all of the images from our database. To begin:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Image.aspx’.
  5. Click add.

Next, we need to add some code to display an image on this page based on the image’s unique id in the database. The reason we have to create this page is because we are using a simple work around to allow us to display our binary image data in an actual image control. Because of the method we used to store our image as binary, when we pull the image from the database we only get back a byte array, the image size, and image type. This means that we will have to rebuild our image from this data. By default, there is no way to do this using just an image control as it does not accept binary data, however we can display the image on a page. Furthermore, because we can display the image on a page we can easily set the image URL of our image control to a page that is the image we want to display.

That being said, we need to add the code to grab an image from our database based on an id and then display it on the page. To do this, add the following code to the Page_Load event method:

Testing Image.aspx

To test this out, you will simply need to load up the Image.aspx page and add in a query string at the end such as ‘Image.aspx?id=1’. Just make sure that the id you enter corresponds to an image in the database so that the data can be found.

Adding the Default.aspx Page

Next, we need to add in the page that will display all of our images and data from the database. To do this:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.

Next, add the following repeater and data source to the Default.aspx page to display the images:

This repeater simply creates a table to display the image, message, and date for each image in our database. To view the full source of the Default.aspx page, click here.

Testing Default.aspx

To test this page out, simply load it up and ensure that all of the images in your database are being displayed with the appropriate data.
Download Source Files