Posts Tagged Image Binding
How to show Binary Image column in GridView
Posted by Shipra Gupta in ASP.NET, C#, CodeProject on October 1, 2014
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, Image_Type 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=’<%# “Handler.ashx?id=” + Eval(“Img_Id”) %>‘ />
</ItemTemplate>
</asp:TemplateField>
3. Now we can bind the GridView control to display all the records in the table as follows
GridView1.DataSource = FetchAllImagesInfo();
GridView1.DataBind();
Before you bind the GridView, you should write the FetchAllImagesInfo method to return all the records with their image data from the table and then you
have to load the images into the GridView control.
The code for FetchAllImagesInfo is
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;
}
Recent Comments