Create a Picture Album using ListView in ASP.NET 3.5

In this article, we will see how to create a Picture Album using the ListView control. We will explore the GroupTemplate of ListView and explore how we can group multiple images together in the ListView, thereby creating an album effect. In one of the previous articles Save and Retrieve Images from the Database using ASP.NET 2.0 and ASP.NET 3.5 we had discussed how to use image handlers to save and retrieve images in the database. In this article, we will build on that concept and use the same technique to display images in a ListView. We will learn how to upload an image and then display the uploaded image on the same page in an ‘album mode’ using the ListView. At the end of this article, you will also learn how to use the different templates of a ListView. If you are unfamiliar with the ListView control, I suggest you to read my article Exploring the ListView control in ASP.NET 3.5 to get an understanding of the same. To keep the article simple and easy to understand, I have not covered any validations associated with image control or other control. The article also does not suggest you best practices. In this article, we will only discuss how to read images from the database and display it in the ListView control, and that would be the focus for this article. I assume you have some knowledge of creating ASP.NET 3.5 websites. We will be using Visual Studio 2008. Let us start off by first creating a sample database and adding a table to it. We will call the database ‘PictureAlbum’ and the table will be called ‘Album’. This table will contain an image column along with some other columns. Run the following script in your SQL 2005 Query window (or server explorer) to construct the database and the table. CREATE DATABASE [PictureAlbum] GO USE [PictureAlbum] GO CREATE TABLE Album ( pic_id int IDENTITY NOT NULL, picture_tag varchar(50), pic image ) Step 1: Create a new ASP.NET website. In the code-behind, add the following namespace C# using System.Data.SqlClient; VB.NET Imports System.Data.SqlClient Step 2: Drag and drop two label and one textbox control. Also drag drop a FileUpload control and a button control to upload the selected image on button click. As mentioned earlier, there are no validations performed. The source would look similar to the following:

Image          
    

        

---

Also in the web.config, add a tag as displayed below: Step 3: In the button click event, add the following code: C# protected void btnSubmit_Click(object sender, EventArgs e) { SqlConnection connection = null; try { FileUpload img = (FileUpload)imgUpload; Byte[] imgByte = null; if (img.HasFile && img.PostedFile != null) { //To create a PostedFile HttpPostedFile File = imgUpload.PostedFile; //Create byte Array with file len imgByte = new Byte[File.ContentLength]; //force the control to load data in array File.InputStream.Read(imgByte, 0, File.ContentLength); } // Insert the picture tag and image into db string conn =ConfigurationManager.ConnectionStrings["albumConnString"].ConnectionString; connection = new SqlConnection(conn); connection.Open(); string sql = "INSERT INTO Album(picture_tag,pic) VALUES(@tag,@pic) SELECT @@IDENTITY"; SqlCommand cmd = new SqlCommand(sql, connection); cmd.Parameters.AddWithValue("@tag", txtTags.Text); cmd.Parameters.AddWithValue("@pic", imgByte); int id = Convert.ToInt32(cmd.ExecuteScalar()); lblResult.Text = String.Format("Picture ID is {0}", id); } catch { lblResult.Text = "There was an error"; } finally { connection.Close(); } } VB.NET Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) Dim connection As SqlConnection = Nothing Try Dim img As FileUpload = CType(imgUpload, FileUpload) Dim imgByte As Byte() = Nothing If img.HasFile AndAlso Not img.PostedFile Is Nothing Then 'To create a PostedFile Dim File As HttpPostedFile = imgUpload.PostedFile 'Create byte Array with file len imgByte = New Byte(File.ContentLength - 1){} 'force the control to load data in array File.InputStream.Read(imgByte, 0, File.ContentLength) End If ' Insert the picture tag and image into db Dim conn As String = ConfigurationManager.ConnectionStrings("albumConnString").ConnectionString connection = New SqlConnection(conn) connection.Open() Dim sql As String = "INSERT INTO Album(picture_tag,pic) VALUES(@tag,@pic) SELECT @@IDENTITY" Dim cmd As SqlCommand = New SqlCommand(sql, connection) cmd.Parameters.AddWithValue("@tag", txtTags.Text) cmd.Parameters.AddWithValue("@pic", imgByte) Dim id As Integer = Convert.ToInt32(cmd.ExecuteScalar()) lblResult.Text = String.Format("Picture ID is {0}", id) Catch lblResult.Text = "There was an error" Finally connection.Close() End Try End Sub In the code above, we are creating a byte array equal to the length of the file. The byte array will store the image. We then load the image data into the array. The record containing the Picture Tags and Image is then inserted into the database using the ADO.NET code. The ID inserted is returned back using the @@Identity. We will shortly use this ID and pass it as a query string parameter to the ShowImage handler. The image will then be fetched against the Picture ID (pic_id). If you run the application as of now, you should be able to upload the images to the database. Step 4: In order to display the image on the page, we will create an Http handler. To do so, right click project > Add New Item > Generic Handler > ShowImage.ashx. In the code shown below, we are using the Request.QueryString[“id”] to retrieve the PictureID(pic_id) from the handler url. The ID is then passed to the ‘ShowAlbumImage()’ method where the image is fetched from the database and returned in a MemoryStream object. We then read the stream into a byte array. Using the OutputStream.Write(), we write the sequence of bytes to the current stream and you get to see your image. C# <%@ WebHandler Language="C#" Class="ShowImage" %> using System; using System.Configuration; using System.Web; using System.IO; using System.Data; using System.Data.SqlClient; public class ShowImage : IHttpHandler { public void ProcessRequest(HttpContext context) { Int32 picid; if (context.Request.QueryString["id"] != null) picid = Convert.ToInt32(context.Request.QueryString["id"]); else throw new ArgumentException("No parameter specified"); context.Response.ContentType = "image/jpeg"; Stream strm = ShowAlbumImage(picid); byte[] buffer = new byte[4096]; int byteSeq = strm.Read(buffer, 0, 4096); while (byteSeq > 0) { context.Response.OutputStream.Write(buffer, 0, byteSeq); byteSeq = strm.Read(buffer, 0, 4096); } //context.Response.BinaryWrite(buffer); } public Stream ShowAlbumImage(int picid) { string conn = ConfigurationManager.ConnectionStrings["albumConnString"].ConnectionString; SqlConnection connection = new SqlConnection(conn); string sql = "SELECT pic FROM Album WHERE Pic_ID = @ID"; SqlCommand cmd = new SqlCommand(sql, connection); cmd.CommandType = CommandType.Text; cmd.Parameters.AddWithValue("@ID", picid); connection.Open(); object img = cmd.ExecuteScalar(); try