How to display binary images into a gridview in ASP.NET using C#?

Question

I want to display binary images into a gridview named 'gvExistedCharacter'. I did research about it and many of them suggested to use a handler. However, I have no idea how can I do about it.

FYI: The datatype of the image in the database is image and named 'blueBallImage'. I also want to display its level which is int in the same gridview.

I have tried

    SqlConnection con = new SqlConnection(@"Data Source=localhost;Initial Catalog=MyCloudGames;Integrated Security=True");

    SqlCommand cmd = new SqlCommand("Select blueBallImage FROM CorrespondingBall", con);
    cmd.CommandType = System.Data.CommandType.Text;
    cmd.Connection = con;

    SqlParameter ImageID = new SqlParameter("@characterID", System.Data.SqlDbType.Int);
    ImageID.Value = context.Request.QueryString["characterID"];
    cmd.Parameters.Add(ImageID);
    con.Open();
    SqlDataReader dReader = cmd.ExecuteReader();
    dReader.Read();
    context.Response.BinaryWrite((byte[])dReader["Image"]);
    dReader.Close();
    con.Close();

I received an error "The parameterized query '(@characterID int)Select blueBallImage FROM CorrespondingBall' expects the parameter '@characterID', which was not supplied."

Martijn Pieters · Accepted Answer · 2021-05-07 00:37:49Z

5

You can use handler to display image in gridview , your html markup look like inside

Gridview ItemTemplate set image control src as src=~/ShowImage.ashx?id=" + id

where ShowImage.ashx is your handler which return MemoryStream((byte[])img);

In your case your querystring is characterID

so your image src would be src=~/ShowImage.ashx?id=" + characterID

Updated Answer:

Html Markup:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="CharacterID">
            <ItemTemplate>
                <asp:Label ID="lblid" runat="server" Text='<%# Bind("characterID") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="GameLevel">
            <ItemTemplate>
                <asp:Label ID="lblglevel" runat="server" Text='<%# Bind("gameLevel") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl='<%#"ShowImage.ashx?getID="+Eval("characterID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code behind:

protected void Page_Load(object sender, EventArgs e)
{        
    DataTable dt = getData();
    GridView1.DataSource = dt;
    GridView1.DataBind();
  }

public  DataTable getData() 
{
  SqlDataAdapter dap = new SqlDataAdapter("select characterID,blueBallImage,gameLevel from CorrespondingBall", cn);
  DataSet ds = new DataSet();
  dap.Fill(ds);
  return ds.Tables[0];
}

Generic handler: Add new generic handler here showIamges.ashx is my generic handler

public void ProcessRequest(HttpContext context)
 {
    Int32 my_Id;
    if (context.Request.QueryString["getID"] != null)
    {
       my_Id = Convert.ToInt32(context.Request.QueryString["getID"]);
       context.Response.ContentType = "image/jpeg";
       Stream strm = ShowEmpImage(my_Id);
       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);
        }
      }
}

public Stream ShowEmpImage(int my_Id)
{
   string conn = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
   SqlConnection connection = new SqlConnection(conn);
   string sql = "select blueBallImage from CorrespondingBall WHERE characterID = @ID";
   SqlCommand cmd = new SqlCommand(sql, connection);
   cmd.CommandType = CommandType.Text;
   cmd.Parameters.AddWithValue("@ID", my_Id);
   connection.Open();
   object img = cmd.ExecuteScalar();
   return new MemoryStream((byte[])img);
 }

edited May 7, 2021 at 0:37

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Oct 2, 2013 at 8:14

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Liu Jia Hui Over a year ago

Hi Satinder, I would like to ask you a question. What is @ characterID actually? I saw some of the tutorials where they put something like @ ID and etc. Pardon me for that as I have not used handler before.

Satinder singh Over a year ago

id reperesnt of which row you want to show image ? there might be some relation , i.e like employeID,,empname,employe_image column so in gridview you binddata id,name,image

Liu Jia Hui Over a year ago

I still cannot get it. What if I want to display every images for blueBallImage?

Satinder singh Over a year ago

@LiuJiaHui: blueBallimage is your colmn name right, then it has many rows many, for each row you need to set respective image, if you still have trouble let me know

Liu Jia Hui Over a year ago

blueBallImage is my column name and it have many rows which contain a image. How can I display it all out?

|

Soner Gönül · Accepted Answer · 2013-10-02 08:03:38Z

0

You want to add @characterID parameter to your sql command but your command doesn't have a parameter called @characterID.

Remove your parameter process in your code or add @characterID in your sql command which try to match.

answered Oct 2, 2013 at 8:03

Soner Gönül

99.1k103 gold badges224 silver badges375 bronze badges

1 Comment

Liu Jia Hui Over a year ago

Hi Soner, I want to display all blueBallImage images out. May I know how can I do it?

Collectives™ on Stack Overflow

How to display binary images into a gridview in ASP.NET using C#?

2 Answers 2

11 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related