How to show images from database in gridview in asp.net

Suggested Videos
Part 168 - Customizing recaptcha control
Part 169 - Save image to database using asp.net
Part 170 - Load image from database in asp.net



In this video we will discuss how to retrieve images from database and display them in gridview using c# and asp.net. This is continuation to Parts 169 and 170. Please watch Parts 169 and 170 from ASP.NET tutorial for beginners tutorial.



When the web page initially loads, all the images should be retrieved from the database table and displayed in the GridView control. When you click upload button, the new image should be uploaded to the database, and the GridView should refresh and display the image you just uploaded.



Webform HTML

<asp:FileUpload ID="FileUpload1" runat="server" />

<br /><br />

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

<br /><br />

<asp:Label ID="lblMessage" runat="server"></asp:Label>

<br /><br />

<asp:HyperLink ID="hyperlink" runat="server">View Uploaded Image</asp:HyperLink>

<br /><br />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

    <Columns>

        <asp:BoundField DataField="Id" HeaderText="Id" />

        <asp:BoundField DataField="Name" HeaderText="Name" />

        <asp:BoundField DataField="Size" HeaderText="Size (bytes)" />

        <asp:TemplateField HeaderText="Image">

            <ItemTemplate>

                <asp:Image ID="Image1" runat="server" Height="100px" Width="100px"

                    ImageUrl='<%# "data:Image/png;base64,"

                    + Convert.ToBase64String((byte[])Eval("ImageData")) %>' />

            </ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

Webform Code-Behind

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.IO;

using System.Web;

namespace Demo

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                lblMessage.Visible = false;

                hyperlink.Visible = false;

                LoadImages();

            }

        }

        private void LoadImages()

        {

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

            using (SqlConnection con = new SqlConnection(cs))

            {

                SqlCommand cmd = new SqlCommand("Select * from tblImages", con);

                con.Open();

                SqlDataReader rdr = cmd.ExecuteReader();

                GridView1.DataSource = rdr;

                GridView1.DataBind();

            }

        }

        protected void btnUpload_Click(object sender, EventArgs e)

        {

            HttpPostedFile postedFile = FileUpload1.PostedFile;

            string filename = Path.GetFileName(postedFile.FileName);

            string fileExtension = Path.GetExtension(filename);

            int fileSize = postedFile.ContentLength;

            if (fileExtension.ToLower() == ".jpg" || fileExtension.ToLower() == ".gif"

                || fileExtension.ToLower() == ".png" || fileExtension.ToLower() == ".bmp")

            {

                Stream stream = postedFile.InputStream;

                BinaryReader binaryReader = new BinaryReader(stream);

                Byte[] bytes = binaryReader.ReadBytes((int)stream.Length);

                string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

                using (SqlConnection con = new SqlConnection(cs))

                {

                    SqlCommand cmd = new SqlCommand("spUploadImage", con);

                    cmd.CommandType = CommandType.StoredProcedure;

                    SqlParameter paramName = new SqlParameter()

                    {

                        ParameterName = @"Name",

                        Value = filename

                    };

                    cmd.Parameters.Add(paramName);

                    SqlParameter paramSize = new SqlParameter()

                    {

                        ParameterName = "@Size",

                        Value = fileSize

                    };

                    cmd.Parameters.Add(paramSize);

                    SqlParameter paramImageData = new SqlParameter()

                    {

                        ParameterName = "@ImageData",

                        Value = bytes

                    };

                    cmd.Parameters.Add(paramImageData);

                    SqlParameter paramNewId = new SqlParameter()

                    {

                        ParameterName = "@NewId",

                        Value = -1,

                        Direction = ParameterDirection.Output

                    };

                    cmd.Parameters.Add(paramNewId);

                    con.Open();

                    cmd.ExecuteNonQuery();

                    con.Close();

                    lblMessage.Visible = true;

                    lblMessage.ForeColor = System.Drawing.Color.Green;

                    lblMessage.Text = "Upload Successful";

                    hyperlink.Visible = true;

                    hyperlink.NavigateUrl = "~/WebForm2.aspx?Id=" +

                        cmd.Parameters["@NewId"].Value.ToString();

                    LoadImages();

                }

            }

            else

            {

                lblMessage.Visible = true;

                lblMessage.ForeColor = System.Drawing.Color.Red;

                lblMessage.Text = "Only images (.jpg, .png, .gif and .bmp) can be uploaded";

                hyperlink.Visible = false;

            }

        }

    }

}

Maximum request length exceeded error : You get this error when the default upload size of 4MB is exceeded. To increase the maxRequestLength include the following setting in your web.config file.

<system.web>

  <httpRuntime executionTimeout="3600" maxRequestLength="1048576"/>

  <compilation debug="true"/>

</system.web>

If you are using II7 and above, in addition to the above, you also need to increase maxAllowedContentLength

<system.webServer>

  <security>

    <requestFiltering>

      <requestLimits maxAllowedContentLength="1073741824" />

    </requestFiltering>

  </security>

</system.webServer>

maxAllowedContentLength is in bytes while maxRequestLength is in kilobytes. In both the cases we have set the size to 1 GB. It is very important that both of these values match.