Home > ASP.Net > Insert and Display Image with Gridview

Insert and Display Image with Gridview


Hi

try this example to insert image in database and display it in Gridview Control

First :  DataBase Table (ImageGallery):
 
Img_Id –> Identity column for Image Id int
Image_Content –> Store the Image in Binary Format image
Image_Type –> Store the Image format (i.e. jpeg, gif, png, etc.) varchar
Image_Size –> Store the Image File Size bigint

Second : Website
1. Open your web application in Visual Studio 2005, drag and drop File Upload control and a Button control into the web page.
2. In the code-behind, add the namespace System.IO.

using System.IO;

3. In the Button’s Button1_Click event, write the following code
 

if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "")
{

byte[] myimage = new byte[FileUpload1.PostedFile.ContentLength];
HttpPostedFile Image = FileUpload1.PostedFile;
Image.InputStream.Read(myimage, 0, (int)FileUpload1.PostedFile.ContentLength);

SqlConnection myConnection = new SqlConnection(“Your Connection String”);
SqlCommand storeimage = new SqlCommand("INSERT INTO ImageGallery "
+"(Image_Content, Image_Type, Image_Size) "
+" values (@image, @imagetype, @imagesize)", myConnection);
storeimage.Parameters.Add("@image", SqlDbType.Image, myimage.Length).Value = myimage;
storeimage.Parameters.Add("@imagetype", SqlDbType.VarChar, 100).Value
= FileUpload1.PostedFile.ContentType;
storeimage.Parameters.Add("@imagesize", SqlDbType.BigInt, 99999).Value
= FileUpload1.PostedFile.ContentLength;

myConnection.Open();
storeimage.ExecuteNonQuery();
myConnection.Close();
}

 

1. Create a Handler.ashx file to perform image retrieval.
This Handler.ashx page will contain only one method called ProcessRequest.
This method will return binary data to the incoming request.
In this method, we do normal data retrieval process and return only the Image_Content field as bytes of array.

The sample code follows

public void ProcessRequest (HttpContext context)
{
  SqlConnection myConnection = new SqlConnection(“YourConnectionString”);
  myConnection.Open();
  string sql = "Select Image_Content from ImageGallery where Img_Id=@ImageId";
  SqlCommand cmd = new SqlCommand(sql, myConnection);
  cmd.Parameters.Add("@ImageId", SqlDbType.Int).Value = context.Request.QueryString["id"];
  cmd.Prepare();
  SqlDataReader dr = cmd.ExecuteReader();
  dr.Read();
  context.Response.ContentType = dr["Image_Type"].ToString();
  context.Response.BinaryWrite((byte[])dr["Image_Content"]);
  dr.Close();
  myConnection.Close();
 
} 

 

2. Place a GridView control in your aspx page, with one TemplateField column, add an Image control into the TemplateField’s ItemTemplate section. Specify the ImageUrl property as
  

<asp:TemplateField>
 <ItemTemplate>
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Img_Id", "ViewImage.ashx?id={0}") %>' />
 </ItemTemplate>
</asp:TemplateField>

 
3. Now we can bind the GridView control to display all the records in the table
as follows in Page_Load

 

GridView1.DataSource = FetchAllImagesInfo();
GridView1.DataBind();
 

public DataTable FetchAllImagesInfo())
{
  string sql = "Select * from ImageGallery";
  SqlDataAdapter da = new SqlDataAdapter(sql, "Your Connection String");
  DataTable dt = new DataTable();
  da.Fill(dt);
  return dt;
}

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net Tags: ,
  1. Shamshad Ayobi
    April 14, 2009 at 8:49 am

    Very good source for web developers! but i think if is it possible to make everything a step by step tutorials with print-screan shots it will be more usefull for the beginners.

    Thanks!

  2. yasserzaid
    April 14, 2009 at 3:50 pm

    Thank you Shamshad Ayobi for your comment
    Hope my post helps you

    Good Luck

  3. June 24, 2016 at 5:48 am

    thank so mucha lot for your web site it helps a great deal

    • yasserzaid
      October 23, 2016 at 7:10 am

      You are welcome 🙂

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: