How to display binary images into a gridview in ASP.NET using C#?
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."
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);
}