Adding the Image.aspx PageNow 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.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
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:
Code Block
Ask a Question
Download Source
Image.aspx.cs
The code to display a binary image from our database.
//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.aspxTo 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 PageNext, 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:
Code Block
Ask a Question
Download Source
Default.aspx
The code to display all images from our database.
<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.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
Testing Default.aspxTo 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. 
Photo Album ASP4 cs