Displaying Images From Database to Gridview with Parameter

Can someone help me spot my mistake? I'm trying to display an image (binary data) from my database, but the image didn't display. Below are my codes:

Generic Handler:

public void ProcessRequest(HttpContext context)
{
string transactionNo = context.Request.QueryString["Data"];
using (SqlConnection con = DBConnection.GetDbCon())
{
SqlCommand cmd = new SqlCommand("spGetPicturesFromPAByPolicy", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@TransactionNo", transactionNo);
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
try
{
da.Fill(dt);
}
catch
{
dt = null;
}
if (dt != null)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
context.Response.Buffer = true;
context.Response.Charset = "";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.BinaryWrite(bytes);
context.Response.Flush();
context.Response.End();
}
}
}

My markup:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="DateIssued" HeaderText="Date Issued" SortExpression="DateIssued" DataFormatString="{0:dd/MM/yyyy}" />
<asp:BoundField DataField="PAPolicyNo" HeaderText="Policy No." ReadOnly="True" SortExpression="PAPolicyNo" />
<asp:BoundField DataField="CustomerName" HeaderText="Insured name" SortExpression="CustomerName" />
<asp:BoundField DataField="PlanOption" HeaderText="Plan" SortExpression="PlanOption" />
<asp:BoundField DataField="PeriodFrom" HeaderText="Inception" SortExpression="PeriodFrom" DataFormatString="{0:dd/MM/yyyy}" />
<asp:BoundField DataField="PeriodTo" HeaderText="Expiry" SortExpression="PeriodTo" DataFormatString="{0:dd/MM/yyyy}" />
<asp:BoundField DataField="FileName" HeaderText="Picture name" SortExpression="FileName" />
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="200px" Height="200px"
ImageUrl='<%# "/Handlers/PersonalAccidentImageHandler.ashx?transactionNo=" + Eval("Data")%>' />
ItemTemplate>
asp:TemplateField>
Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
asp:GridView>

Code behind:

private void BindGrid()
{
string policyNo = txtPolicyNo.Text;
List pa = new List();
pa = PersonalAccidentDataAccess.VerifyPolicy(policyNo);
GridView1.DataSource = pa;
GridView1.DataBind();
}
private void GetTransactionNo()
{
string policyNo = txtPolicyNo.Text;
trans = PersonalAccidentDataAccess.GetTransactionNo(policyNo);
if(txtPolicyNo.Text != null)
{
lblTransactionNo.Text = trans.TransactionNo.ToString();
}
}
protected void txtPolicyNo_TextChanged(object sender, EventArgs e)
{
GetTransactionNo();
}
protected void Button1_Click(object sender, EventArgs e)
{
BindGrid();
}

The output ;(

Below is my table:

CREATE TABLE [dbo].[tblPACustomerPicture](
[Id] [int] IDENTITY(1,1) NOT NULL,
[TransactionNo] [nvarchar](50) NULL,
[CustomerNo] [nvarchar](50) NULL,
[FileName] [nvarchar](250) NULL,
[ContentType] [nvarchar](50) NULL,
[Data] [varbinary](max) NULL,
CONSTRAINT [PK_tblPACustomerPicture] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO

Hello Hold On,

It's simple.

you Store Images in Folder.

Create One folder Then store images.

Save Images Name in Database like: abc.jpg

if (imgfile.HasFile)
{
string fileName = Path.Combine(Server.MapPath("~/Content/WareHouseImages/"), imgfile.FileName);
imgfile.SaveAs(fileName);
Admin.WareHouseImage = imgfile.FileName;
}
else
{
Admin.WareHouseImage = "";
}

Then View Imges in Bind side is.

<img id="imgfl" runat="server" alt="warehouse" style="height:100px;width:120px;"/>

Image Bind code c# is Here.

imgfl.Attributes.Add("src", "../Content/WareHouseImages/" + AdminInfo[0].WareHouseImage);

3 Replies

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

Laxmidhar Sahoo8y ago
sir
1- here in the table you stored the column filename as varchar . But you retrive as byte datatype.
2- First you should stored with byte in table

3- otherwise simple retrive by string as path of the file that should be stored in a folder.

4-After display the message storing method may better solution
Jes Sie8y ago
Thanks Ravi for the reply. I will try to change it using your recommendation and will revert to you later for any progress.
Ravi Polara Patidar8y ago
Hello Hold On,

It's simple.

you Store Images in Folder.

Create One folder Then store images.

Save Images Name in Database like: abc.jpg
if (imgfile.HasFile)
                    {
                        string fileName = Path.Combine(Server.MapPath("~/Content/WareHouseImages/"), imgfile.FileName);
                        imgfile.SaveAs(fileName);
                        Admin.WareHouseImage = imgfile.FileName;
                    }
                    else
                    {
                        Admin.WareHouseImage = "";
                    }
Then View Imges in Bind side is.
<img id="imgfl" runat="server" alt="warehouse" style="height:100px;width:120px;"/>
Image Bind code c# is Here.
imgfl.Attributes.Add("src", "../Content/WareHouseImages/" + AdminInfo[0].WareHouseImage);