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.
|
Responses
0 Respones to "ASP.NET Photo Album Part 3 - Displaying Images"
Post a Comment