Image Not getting binded in gridview from database

Question

Following is my code... I am trying to store image in database. I have used varbinary(MAX) datatype for storing data bytes in database. Please tell me where I am going wrong.

    int qtype = Convert.ToInt32(ddl_q_Type.SelectedValue);
                var getQ = (from q in obj.QuestionRegistrations
                            orderby q.QueCode ascending
                            where q.QueQuesType == qtype && q.QueLanguageCode == 1
                            select new { q.QueCode, q.QueQuestion }
                                ).ToArray();


                index = Convert.ToInt32(ViewState["index"].ToString()) + 1;
                ViewState["index"] = index;
                previosIndex = index - 1;
                ViewState["previosIndex"] = previosIndex;
                txt_question.Text = getQ[index].QueQuestion;
                lblqcode.Text = getQ[index].QueCode.ToString();


                int qcode = Convert.ToInt32(lblqcode.Text);
                var options = (from opt in obj.QuestionAndOptionsMappings
                               where opt.QueMapQuestionCode == qcode
                               select new { opt.QueMapOptions, opt.QueMapCorrectAnswer, opt.QueMapId, opt.QueMapImage }
                                   ).ToList();


                DataTable dt = new DataTable();

                dt.Columns.Add("QueMapOptions", typeof(string));
                dt.Columns.Add("QueMapId", typeof(string));
                dt.Columns.Add("QueMapImage", typeof(string));

                foreach (var y in options)
                {
                    DataRow dr = dt.NewRow();
                    dr["QueMapOptions"] = y.QueMapOptions;
                    dr["QueMapId"] = y.QueMapId;
                    dr["QueMapImage"] = (Byte[])y.QueMapImage;

                    dt.Rows.Add(dr);
                }

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

This code for storing the image in databse

for (int i = 0; i < GridView1.Rows.Count; i++)
            {
                FileUpload fp = (FileUpload)GridView1.Rows[i].Cells[2].FindControl("fp");
                Label lblmapid = (Label)GridView1.Rows[i].Cells[1].FindControl("lblmapid");
                bool e1 = fp.HasFile;
                int mapiidd = Convert.ToInt32(lblmapid.Text);
                if (fp.HasFile)
                {
                    string path = Server.MapPath("~/Uploads/") + fp.FileName;
                    fp.SaveAs(path);
                    byte[] imageBytes =
                        File.ReadAllBytes(System.Web.HttpContext.Current.Server.MapPath("~/Uploads/") + fp.FileName);
                    int qcodelbl = Convert.ToInt32(lblqcode.Text);
                    QuestionAndOptionsMapping qmap = new QuestionAndOptionsMapping();

                    var update = obj.QuestionAndOptionsMappings.Where(q => q.QueMapId == mapiidd && q.QueMapQuestionCode == qcodelbl)
                        ;
                    update.SingleOrDefault().QueMapImage = imageBytes;
                    obj.SaveChanges();
                }

            }

ASPX code

<asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="OPTIONS" HeaderStyle-Width="55%">
                                <ItemTemplate>
                                    <asp:TextBox ID="Option" runat="server" Text='<%#Eval("QueMapOptions") %>' Height="40px"
                                        Width="500px"></asp:TextBox>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Sub Section" HeaderStyle-Width="15%" Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="lblmapid" runat="server" Text='<%#Eval("QueMapId") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Sub Section" HeaderStyle-Width="15%">
                                <ItemTemplate>
                                    <asp:CheckBox ID="Chk_correct_Ans" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Sub Section" HeaderStyle-Width="15%">
                                <ItemTemplate>
                                    <asp:FileUpload ID="fp" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Sub Section" HeaderStyle-Width="15%">
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("QueMapImage") %>' Height="80px"
                                        Width="100px" />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>

Answer 1

Ok, you can't just bind a binary column to a GridView column. you need to make use of Response.BinaryWrite method.

Here are few steps to follow to achieve what you want

1. Create a generic handler to read binary data. We'll call it ImageHandler.ashx. Make sure you have the primary key of the table to be passed to this handler. Write the handler code something like below (just an example).

   public void ProcessRequest (HttpContext context) 
       {
   

   string connectionString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;

           SqlConnection conn = new SqlConnection(connectionString);
   
           SqlCommand cmd = new SqlCommand();
   
           cmd.CommandText = "Select [Content] from Images where ID =@ID";
   
           cmd.CommandType = CommandType.Text;
   
           cmd.Connection = conn;
   
           SqlParameter ImageID = new SqlParameter("@ID", SqlDbType.BigInt);
           ImageID.Value = context.Request.QueryString["ID"];
           cmd.Parameters.Add(ImageID);
           conn.Open();
           SqlDataReader dReader = cmd.ExecuteReader();
           dReader.Read();
           context.Response.BinaryWrite((byte[])dReader["Content"]);
           dReader.Close();
           conn.Close();
       }
   

2. And call the handler like this.

   ImageUrl='<%# "ImageHandler.ashx?ID=" + Eval("ID")%>'

instead of

ImageUrl='<%#Eval("QueMapImage") %>'

Here's a complete example from where I extracted above examples.

All the best!