Displaying Image in Gridview

Question

0.00/5 (No votes)

See more:

SQL-Server-2008

, +

Hello

I have a grid view, but the problem is the image is not displaying in grid view.

please help
my button submit code is this:

C#

protected void btnUpload_Click(object sender, EventArgs e)
        {
            
            string strImageName = txtName.Text.ToString();
            string strDesc=txtDesc.Text.ToString();
            string strActive=txtActive.Text.ToString();
            string strCreatedBy=txtCreatedBy.Text.ToString();
            string dCreatedDate = txtCreDate.Text.ToString();
           
            if (FileUpload.PostedFile != null && FileUpload.PostedFile.FileName != "")
            {
                byte[] imageSize = new byte[FileUpload.PostedFile.ContentLength];
                HttpPostedFile uploadImage = FileUpload.PostedFile;
                uploadImage.InputStream.Read(imageSize, 0, (int)FileUpload.PostedFile.ContentLength);
                con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
                cmd.CommandText = "sp_SqlImage";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = con;


                SqlParameter ID = new SqlParameter("@ID", SqlDbType.BigInt);
                ID.Value = 0;
                cmd.Parameters.Add(ID);
                SqlParameter ImageName = new SqlParameter("@Name", SqlDbType.VarChar, 50);
                ImageName.Value = strImageName.ToString();
                cmd.Parameters.Add(ImageName);

                
                SqlParameter ImageDesc = new SqlParameter("@Description", SqlDbType.VarChar, 500);
                ImageDesc.Value = strDesc.ToString();
                cmd.Parameters.Add(ImageDesc);
                SqlParameter UploadImage = new SqlParameter("@Image", SqlDbType.Image, imageSize.Length);
                UploadImage.Value = imageSize;
                cmd.Parameters.Add(UploadImage);
                SqlParameter Active = new SqlParameter("@Active", SqlDbType.VarChar, 1);
                Active.Value = strActive.ToString();
                cmd.Parameters.Add(Active);
                SqlParameter CreatedBy = new SqlParameter("@CreatedBy", SqlDbType.VarChar, 10);
                CreatedBy.Value = strCreatedBy.ToString();
                cmd.Parameters.Add(CreatedBy);
                SqlParameter CreatedDate = new SqlParameter("@CreatedDate", SqlDbType.DateTime);
                CreatedDate.Value = dCreatedDate.ToString();
                cmd.Parameters.Add(CreatedDate);
                SqlParameter Flag = new SqlParameter("@Flag", SqlDbType.VarChar, 10);
                Flag.Value = "INSERT";
                cmd.Parameters.Add(Flag);
                con.Open();
                int result = cmd.ExecuteNonQuery();
                con.Close();
                if (result > 0)
                    lblMessage.Text = "File Upload";
}

My aspx page for this is:

ASP.NET

<<pre lang="xml">%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainTable.aspx.cs" Inherits="commonlogin.MainTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns ="False"
            AutoGenerateDeleteButton="True" onrowdeleted="GridView1_RowDeleted" AutoGenerateEditButton ="True"
            onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing"
            onrowupdating="GridView1_RowUpdating"
            onpageindexchanging="GridView1_PageIndexChanging"
            onrowcancelingedit="GridView1_RowCancelingEdit"

             CellPadding="4"
            GridLines="None" ForeColor="#333333"
             >


            <AlternatingRowStyle BackColor="White" />


        <Columns>


            <asp:TemplateField HeaderText="ID">
                <%--<EditItemTemplate>
                    <asp:TextBox ID="txtID" runat="server" Text='<%# Bind("ID") %>'></asp:TextBox>
                </EditItemTemplate>--%>
                <ItemTemplate>
                    <asp:Label ID="lblID" runat="server"  Text='<%# Bind("ID") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <EditItemTemplate>
                    <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Description">
                <EditItemTemplate>
                    <asp:TextBox ID="txtDesc" runat="server" Text='<%# Bind("Description") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblDesc" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Image">
                <EditItemTemplate>
                    <asp:TextBox ID="txtImage" runat="server"  Text='<%# Bind("Image") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                <%--<asp:Label ID="lblImage" runat="server" ImageUrl='<%# "Handler1.ashx?ID=" + Eval("ID")%>'></asp:Label>--%>

                    <asp:Label ID="lblImage" runat="server"  Text='<%# Bind("Image") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Active">
                <EditItemTemplate>
                    <asp:TextBox ID="txtActive" runat="server" Text='<%# Bind("Active") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblActive" runat="server" Text='<%# Bind("Active") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="CreatedBy">
                <EditItemTemplate>
                    <asp:TextBox ID="txtCreatedBy" runat="server" Text='<%# Bind("CreatedBy") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblCreatedBy" runat="server" Text='<%# Bind("CreatedBy") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="CreatedDate">
                <EditItemTemplate>
                    <asp:TextBox ID="txtCreatedDate" runat="server" Text='<%# Bind("CreatedDate") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblCreatedDate" runat="server" Text='<%# Bind("CreatedDate") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Left" />
            </asp:TemplateField>
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
            </asp:GridView><br />
        <tr>
        <td>
            <asp:HyperLink ID="HyperLink1" NavigateUrl ="~/TableAdd.aspx" runat="server">AddNew</asp:HyperLink><br /><br />

        </td>
        </tr>
        <asp:label id="Messagelbl" forecolor="Red" runat="server"/>

    </div>
    </form>
</body>
</html
>

And my ashx code is this:

C#

using System;
using System.Configuration;
using System.Web;
using System.IO;
using System.Data;
using System.Data.SqlClient;
namespace commonlogin
{
    /// <summary>
    /// Summary description for Handler1
    /// </summary>
    public class Handler1 : IHttpHandler
    {
        
        public void ProcessRequest(HttpContext context)
        {
            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

            SqlCommand cmd = new SqlCommand("SELECT Name, Description, Iamge, Active, CreatedBy, CreatedDate FROM tbl_SqlImage" + "where ID=@ID");
            cmd.Connection = conn;

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

C#

public bool IsReusable
        {
            get
            {
                return false;
            }
        }
}

Please help me with this, is something wrong in this code

I am getting the column for the image in gridview displaying System.Byte[] instead of the image.

Please Help

Posted 21-Jun-12 20:05pm

Nikil0012

Updated 24-Jun-12 20:57pm

Vani Kulkarni

v4

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhinav S · Answer 1 · 2012-06-21T20:08:00

Solution 1

This[^] may help you.

Posted 21-Jun-12 20:08pm

Abhinav S

Comments

Prasad_Kulkarni 22-Jun-12 2:16am

Good one +5!

Abhinav S 22-Jun-12 2:35am

Thanks.

Prosan · Answer 2 · 2012-06-21T20:12:00

look this simple example

XML

<asp:GridView
        id="GridView1"
        AutoGenerateColumns="false"
        Runat="server">
        <Columns>
        <asp:ImageField
            DataImageUrlField="UrFileName"
            DataImageUrlFormatString="~/Photos/{0}"
            DataAlternateTextField="AltText"
            ControlStyle-Width="100px" />
        </Columns>
    </asp:GridView>

The DataImageUrlField property contains the name of a field of your table which contain the path to an image on the server hard drive. The DataImageUrlFormatString format this path. and the DataAlternateTextField enables you to specify the value of the alt attribute used by the

HTML

<img></img>

tag.

Vani Kulkarni · Answer 3 · 2012-06-21T20:13:00

Solution 3

See if these links help you:

Displaying Images from a Database in a GridView[^]
http://csharpdotnetfreak.blogspot.com/2009/07/display-images-gridview-from-database.html[^]

Posted 21-Jun-12 20:13pm

Vani Kulkarni

Prasad_Kulkarni · Answer 4 · 2012-06-21T20:16:00

Solution 4

Abhinav's link is really good, In addition have look on some more threads:
http://msdn.microsoft.com/en-us/library/aa479350.aspx[^]

Displaying Images from a Database in a GridView[^]

Posted 21-Jun-12 20:16pm

Prasad_Kulkarni

Comments

Nikil0012 22-Jun-12 2:33am

I am getting an error that in my table image in gridview displaying System.Byte[] instead of image

Prasad_Kulkarni 22-Jun-12 2:36am

You need to write an HttpHandler that will render an image.

You can't explicitly render the binary contents of the image from the server.

Write an HttpHandler that takes a URL Parameter of the SQL Datarow to get the image from, then save the bytes to the Stream.
Then in your GridView, display images with the regular image tag and put the images source to the HttpHandler plus the Row ID as the URL Parameter. It is complicating.

Nikil0012 22-Jun-12 2:40am

I have done that in my code sir, please can u please give a look to code, and tell me what wrong, i have just posted updated code. please