ASP.NET Photo Album Part 3 - Displaying Images

ASP.NET Database Tutorial

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:

Right click the project in your solution explorer.

Select add new item...

Select a web form.

Name it 'Image.aspx'.

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:

//check to make sure we have a query string
if (!string.IsNullOrEmpty(Request.QueryString["id"].ToString()))
{
    //connect to the db
SqlConnection conn = new

  SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

    //sql command to select the image
    SqlCommand cmd = new SqlCommand("SELECT * FROM Images WHERE ImgId=@ImgId", conn);

    cmd.CommandType = CommandType.Text;
    //add img id from query string
    cmd.Parameters.AddWithValue("@ImgId", Request.QueryString["id"]);
    using (conn)
    {

        //open the connection
        conn.Open();
        //send the query to select our img and store the results
        SqlDataReader rdr = cmd.ExecuteReader();
        //read the data
        if (rdr.Read())
        {
            //store the binary img data in a byte array
            byte[] imgData = (byte[])rdr["ImgBin"];
            //display the image
            Response.ContentType = rdr["ImgType"].ToString();
            Response.OutputStream.Write(imgData, 0, imgData.Length);
        }
    }
}

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

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:

Right click the project in your solution explorer.

Select add new item...

Select a web form.

Name it 'Default.aspx'.

Click add.

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

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" 
        onitemdatabound="Repeater1_ItemDataBound">
    <HeaderTemplate>
        <table border="1" cellpadding="5px">
    </HeaderTemplate>
 
    <ItemTemplate>
            <!-- Image -->
            <tr>
                <td colspan="2">
                    <asp:Image ID="Image1" runat="server"

                    ImageUrl='<%# Eval("ImgId", "~/Image.aspx?id={0}") %>' />
                </td>
            </tr>
            <!-- Message/Date -->
            <tr>
                <td>
                    <%# Eval("ImgMessage") %>
                </td>
                <td>
                    <%#Eval("ImgDate", "{0:d}")%>
                </td>
            </tr>
    </ItemTemplate>
 
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
    SelectCommand="SELECT * FROM [Images]"></asp:SqlDataSource>

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.