how to display image from sql table in gridview?

Deepak Ratan

11y2.3k.NET

hi i tried to display image from sql table to gridview but its not displaying this s my code to bind gridview with sql table records..

sql.aspx.cs

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

lblsession.Text = "Welcome" + Convert.ToString(Session["UName"]);

sessionimage();

}

private void sessionimage()

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ConnectionString);

try

{

string UName = (string)Session["UName"];

SqlDataAdapter Adp = new SqlDataAdapter("select Photo from TBL_PBLogin where UName='"+ UName +"'", con);

DataTable Dt = new DataTable();

con.Open();

Adp.Fill(Dt);

gridviewphoto.DataSource = Dt;

gridviewphoto.DataBind();

con.Close();

}

catch (Exception ex)

{

throw new Exception(ex.ToString());

}

sql.aspx

45 Replies

Know the answer? Post it — somebody with the same question will find it here.

Carlos kambui11y ago
tStudent = new StudentType(); byte[] bytes = new byte[0]; if ((ds.Tables[0].Rows[0]["image"]) ==DBNull.Value) { tStudent.image = bytes; } else { bytes = (byte[])(ds.Tables[0].Rows[0]["image"]); tStudent.image = bytes; }
Vincent Maverick Durano11y ago
s-sreelakshmi

That wont work for his case as he is storing the image as binary in the database. Please try to read the entire post again.

Thanks,
Vinz
S Sreelakshmi11y ago
---Grid View---

--- bind data--

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindimages();
}
}
private void bindimages()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ConnectionString);
try
{
SqlDataAdapter Adp = new SqlDataAdapter("select Photo from TBL_PBLogin", con);
DataTable Dt = new DataTable();
con.Open();
Adp.Fill(Dt);
gridviewphoto.DataSource = Dt;
gridviewphoto.DataBind();
con.Close();
}
catch (Exception ex)
{
throw new Exception(ex.ToString());
}
foreach (GridViewRow gr in gridviewphoto.Rows)
{

HiddenField h = (HiddenField)gr.FindControl("hdimg");
Image img = (Image)gr.FindControl("imgphoto");
if (h.Value != "")
{
img.ImageUrl = "~/UserImages/" + h.Value; // Actaul image
}
else
{
img.ImageUrl = "~/images/profle.png"; // Default image
}
}

}
Nanhe Siddique11y ago
read this link

http://www.aspsnippets.com/Articles/Display-images-from-SQL-Server-Database-in-ASP.Net-GridView-control.aspx

it may help you
Deepak Ratan11y ago
Vincent Maverick Durano

I had tryed inside the ProcessRequest in Handler.ashx but i am getting the same ISSUE
context.Response.ContentType = "image/png";

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Collections.Specialized;
using System.Configuration;
public class Handler : IHttpHandler
{
   public void ProcessRequest(HttpContext context)
   {
      if (context.Request.QueryString["EmpID"] == null) return;
      string connStr = ConfigurationManager.AppSettings["connect"].ToString();
      string pictureId = context.Request.QueryString["EmpID"];
      using (SqlConnection conn = new SqlConnection(connStr))
      {
            using (SqlCommand cmd = new SqlCommand("SELECT Photo FROm TBL_PBLogin WHERE EmpID = @EmpId", conn))
            {
              cmd.Parameters.Add(new SqlParameter("@EmpID", pictureId));
                  conn.Open();
                  using (SqlDataReader reader =                   cmd.ExecuteReader(CommandBehavior.CloseConnection))
                  {
                        reader.Read();
                        context.Response.ContentType = "image/png";
                        context.Response.BinaryWrite((Byte[])reader[reader.GetOrdinal("Photo")]);
                        reader.Close();
                  }
            }
       }
   }

public bool IsReusable
{
      get
      {
            return false;
      }
   }
}
Vincent Maverick Durano11y ago
Ok so your GridView shows up in the page but the only the image is not displaying?

Can you try setting the ContentType of the context within your ProcessRequest() method like:
context.Response.ContentType = "image/png";
Deepak Ratan11y ago
Vincent Maverick Durano

Just i had keept the break point in
gridviewphoto.DataSource = Dt; -> I am Getting

EmpID Photo
1 System.Byte[]

gridviewphoto.DataBind();
Vincent Maverick Durano11y ago
Your code looks good to me. The least you can do now is to debug your code, set a break point and step through it. Check if your GridView has any data to it. Keep in mind that when your datasource is empty then your GridView will not be shown in the page.
Deepak Ratan11y ago
HI Vincent Maverick Durano,
Is there any Issue in my code? to display the image?
Deepak Ratan11y ago
Actually there is a problem in uploading
only .rar files are uploading

These are my listview:

Solution 'login'(1 project)
* Login
-> Image
->Handler.ashx
->login.aspx
->login.aspx.cs
->PostBookChat.aspx
->PostBookChat.aspx.cs
Vincent Maverick Durano11y ago
I don't have rar extractor. Can you link a screenshot instead.
Deepak Ratan11y ago
HI
Vincent Maverick Durano11y ago
Can you please post (screenshot) your project solution structure here? I want to see where exactly the file is located.
Deepak Ratan11y ago
Hi,
I had tryed, but its not working,
is there any other way?
Vincent Maverick Durano11y ago
And when you debug the ProcessRequest() method never get hit?
Can you try referencing the path like this:
Deepak Ratan11y ago
Actually its in same location where the PostBookChat.aspx located
Just i had right click and gave add new generic handler and i had written my code

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Collections.Specialized;
using System.Configuration;
public class Handler : IHttpHandler
{
   public void ProcessRequest(HttpContext context)
   {
      if (context.Request.QueryString["EmpID"] == null) return;
      string connStr = ConfigurationManager.AppSettings["connect"].ToString();
      string pictureId = context.Request.QueryString["EmpID"];
      using (SqlConnection conn = new SqlConnection(connStr))
      {
         using (SqlCommand cmd = new SqlCommand("SELECT Photo FROm TBL_PBLogin WHERE EmpID = @EmpId", conn))
      {
         cmd.Parameters.Add(new SqlParameter("@EmpID", pictureId));
         conn.Open();
         using (SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection))
         {
            reader.Read();
            context.Response.BinaryWrite((Byte[])reader[reader.GetOrdinal("Photo")]);
            reader.Close();
         }
      }
   }
}

public bool IsReusable
{
   get
   {
      return false;
   }
}
}
Vincent Maverick Durano11y ago
Where did you put your Handler? based on your code your Handler file should be in the same location where your page is located.
Deepak Ratan11y ago
There is a small Issue is that , the photo is not displaying, using break point i had compiled
its not moving to Handler.ashx
Vincent Maverick Durano11y ago
You are almost there. Just include the EmpID in your query:
SqlDataAdapter Adp = new SqlDataAdapter("select EmpID,Photo from TBL_PBLogin where EmpID='" + EmpID + "'", con);
Vincent Maverick Durano11y ago
The error is pretty much self-explanatory. That means the Id field isn't in your select query. You need to replace that with the unique identifier that holds your Images. In other words replace the ID with the primary key of your table where your image is stored.
So for example if you have this table:
TBL_PBLogin
YourPrimaKeyID,
Photo

then make sure that you include the PrimaryKey in your SQL select statement:

Select YourPrimaryKeyID, Photo From TBL_PBLogin

Does that make sense?
Deepak Ratan11y ago
DataBase: TBL_PBLogin

EmpID PK (1,1),
UName varchar(50),
Password varchar(50),
photo              image

PostBookChat.aspx











                                 <ItemTemplate>







PostBookChat.aspx.cs

protected void Page_Load(object sender, EventArgs e)
   {
      if (!IsPostBack)
      {
         lblsession.Text = "Welcome" + Convert.ToString(Session["UName"]);
         sessionimage();
      }
   }
private void sessionimage()
{
   SqlConnection con = new    SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ConnectionString);

   try
   {
      int EmpID = (int)Session["EmpID"];
      SqlDataAdapter Adp = new SqlDataAdapter("select Photo from TBL_PBLogin where EmpID='" + EmpID + "'", con);
      DataTable Dt = new DataTable();
      con.Open();
      Adp.Fill(Dt);
      gridviewphoto.DataSource = Dt;
      gridviewphoto.DataBind();
      con.Close();
}

catch (Exception ex)
{
   throw new Exception(ex.ToString());
}
}

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.IO;
using System.Collections.Specialized;
using System.Configuration;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
   if (context.Request.QueryString["EmpID"] == null) return;
   string connStr = ConfigurationManager.AppSettings["connect"].ToString();
   string pictureId = context.Request.QueryString["EmpID"];
   using (SqlConnection conn = new SqlConnection(connStr))
   {
      using (SqlCommand cmd = new SqlCommand("SELECT Photo FROm TBL_PBLogin WHERE       EmpID = @EmpId", conn))
      {
            cmd.Parameters.Add(new SqlParameter("@EmpID", pictureId));
            conn.Open();
            using (SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection))
            {
                  reader.Read();
                  context.Response.BinaryWrite((Byte[])reader[reader.GetOrdinal("Photo")]);
                  reader.Close();
            }
         }
      }
   }
public bool IsReusable
{
get
{
return false;
}
}
}
Deepak Ratan11y ago
HI,
tryed many time but getting same error

DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Id'.
Vincent Maverick Durano11y ago
You need to pass the ID to your handler. It should look like this:
<asp:Image ID="Image" runat="server" ImageUrl='<%# "Handler.ashx?id=" + Eval("Id") %>' />
Please read back the tutorial again so you will know how it works.
Upendra Pratap Shahi11y ago
no error getting..
rajshree soni11y ago
Hii,
CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="6" Style="position: static" >

Try this "> "> " width="100" height="100"> "> "> code for.cs

da = new SqlDataAdapter("select Slip_NO,NAME_VISITOR, v_image,IN_TIME,VISITOR_VILLAGE from visitor_check_in where Slip_NO =(select max(Slip_NO) from visitor_check_in )", con);
ds = new DataSet(); da.Fill(ds, "visitor_check_in");
GridView1.DataSource = ds.Tables["visitor_check_in"].DefaultView;
GridView1.DataBind();
Deepak Ratan11y ago
Hi Vincent Maverick Durano

I am getting an Issue that i con't access the Handler.ashx
Vincent Maverick Durano11y ago
Yes.
Deepak Ratan11y ago
hi,
Thankyou, i will try by that way but we have to use Generic Handler also?
Dipankar Biswas11y ago
protected void btn_up_new_img_Click(object sender, EventArgs e)
{
if (up_load_new_img.PostedFile.ContentLength > 0)
{
s1 = Path.GetFileName(up_load_new_img.FileName);
path = Server.MapPath("file_upload") + "/" + s1;
up_load_new_img.SaveAs(path);
}

SqlConnection ronicon = new SqlConnection(strConnString);
ronicon.Open();
SqlCommand ronicom = new SqlCommand("sp_up_img", ronicon);
ronicom.CommandType = CommandType.StoredProcedure;
ronicom.Connection = ronicon;
ronicom.Parameters.AddWithValue("@usr_name", lb1.Text);
ronicom.Parameters.AddWithValue("@usr_upload_image", s1);
ronicom.ExecuteNonQuery();
ronicom.Dispose();
save_and_show();
ronicon.Close();
}
Vincent Maverick Durano11y ago
You need use MemoryStream object to display the image since you are storing the image as blob. The first link in my first post should help you. Just refer that.
Deepak Ratan11y ago
Hi,
By this way i am saving the image in database

protected void signout_Click(object sender, EventArgs e)
{
   if (!Fileuploadprofilepick.HasFile)
   {
         lblerror.Text = "Please select the photo";
   }
   else
   {
         int length = Fileuploadprofilepick.PostedFile.ContentLength;
         byte[] pic = new byte[length];
         Fileuploadprofilepick.PostedFile.InputStream.Read(pic, 0, length);
         SqlConnection con = new          SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ConnectionString);
         string query = "INSERT INTO TBL_PBLogin (UName,Password,Photo) VALUES          (@UName,@Password,@Photo)";
         try
         {
               con.Open();
               SqlCommand cmd = new SqlCommand(query, con);
               cmd.Parameters.Add("@UName", txtUname.Text);
               cmd.Parameters.Add("@Password", txtUpassword.Text);
               cmd.Parameters.Add("@Photo", pic);
               cmd.CommandType = CommandType.Text;
               cmd.ExecuteNonQuery();
               lblerror.Visible = true;
               lblerror.Text = "Uploaded Sucessfully";
               con.Close();
               ClearControl();
         }
catch (Exception ex)
   {
         throw new Exception(ex.ToString());
   }
}
Deepak Ratan11y ago
Hi Dipankar Biswas,
we have to create this folder? in VS
Vincent Maverick Durano11y ago
You can check your database and see the value of Photo column. or You could debug your code and check the DataTable row values.

How do you store the image to your database?
Deepak Ratan11y ago
Hi Vincent Maverick Durano,
using signup option i am giving Username,Password,fileupload
by this way i am saving the image in database
Actually i dont no how to find the image in database, Sorry can u give some idea
Dipankar Biswas11y ago
Folder path..
Vincent Maverick Durano11y ago
@deepak,

the image already stored in database but there is an ISSUE to retrive the image from database to gridview

I believe the issue is the mapping of the url path for your images. What is the path of your images that is stored in your database? The path should match with the actual location of your images when setting the ImageUrl or SRC for the image control.
Vincent Maverick Durano11y ago
What is file_upload ? Is that ID of fileupload button?

No. That's the folder name containing your images. So you have to change that based on the folder where you host/put your images.
Deepak Ratan11y ago
Hi Vincent Maverick Durano,

When the user login , the user login photo should display thats y i am trying
the image already stored in database but there is an ISSUE to retrive the image from database to gridview
Deepak Ratan11y ago
HI Dipankar Biswas

src ='file_upload/<%#Eval("usr_upload_image") %>' height="600px" width="550px"/>

What is file_upload ? Is that ID of fileupload button?
Vincent Maverick Durano11y ago
The path of your image should match to where the image is hosted. Otherwise it will not display. Please take a look at the article that I've posted for your reference.
Deepak Ratan11y ago
Hi Dipankar Biswas
Actually i am compare both code, almost same I don't y the photo is not displaying
What datatype you are using for image
Vincent Maverick Durano11y ago
Are you saving the image path only to database or the image blob?

here are some step by step example that I wrote before that might help:

If the image is stored in database as blob
http://geekswithblogs.net/dotNETvinz/archive/2009/04/24/faq-displaying-image-from-database-to-gridview-control.aspx

If the image url is saved to the database only:
http://geekswithblogs.net/dotNETvinz/archive/2009/08/02/uploading-and-storing-image-path-todatabase-and-image-to-folder.aspx
Dipankar Biswas11y ago
Hi..

sorry Deepak am not getting any error here.
Deepak Ratan11y ago
Hi, ERROR: The photo is not displaying




                                                              width="50px" />
Dipankar Biswas11y ago
Hi

Try it..

private void bindgrid()

{

string useremail = (string)Session["useremail"];

SqlConnection con = new SqlConnection(strConnString);

con.Open();

str = "select user_profile_pic from tbl_user where user_email='" + useremail + "'";

sqlda = new SqlDataAdapter(str, con);

dt = new DataTable();

sqlda.Fill(dt);

sqlda.Dispose();

GridView1.DataSource = dt;

GridView1.DataBind();

con.Close();

}

BackColor="#CC3300" ForeColor="Black" ShowHeader="False" >