How to Display Images in GridView Control In Asp.Net

In this tutorial i will let you know, that How to Display Images in GridView Control In Asp.Net.In this first part is to store the image in application specific folder and store the full path in database and then retrieve the image and display that into a gridview.

Design For Display Images In Gridview:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <style type="text/css">
        .style1
        {
            width: 900px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table align="center" class="style1">
            <tr>
                <td>
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="Button1" runat="server" Text="Upload File" OnClick="Button1_Click" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="ID">
                                <ItemTemplate>
                                    <asp:Label ID="id" runat="server" Text='<%#Eval("Fileid") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Imagename">
                                <ItemTemplate>
                                    <asp:Label ID="id" runat="server" Text='<%#Eval("imagename") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Image">
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%#"~/Image_upload/"+Eval("imagepath") %>' />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Code For Display images In Gridview:-

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string connn = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
        SqlConnection conn = new SqlConnection(connn);
        if(FileUpload1.PostedFile!=null)
        {
        string imagename=Path.GetFileName(FileUpload1.PostedFile.FileName);
        string pathname;
        pathname = Server.MapPath("~\\Image_upload\\") + FileUpload1.FileName;
        FileUpload1.PostedFile.SaveAs(pathname);
        try
        {
            conn.Open();
            string insquery = "Insert into fileupload(imagename,imagepath) values('"+ imagename+"','"+FileUpload1.FileName.ToString()+"')";
            SqlCommand cmd = new SqlCommand(insquery, conn);
            cmd.ExecuteNonQuery();
            conn.Close();
            binddata();
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
        }
    }

    public void binddata()
    {
        string connn = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
        SqlConnection conn = new SqlConnection(connn);

        try
        {
            conn.Open();
            string query = "select fileid,imagename,imagepath from fileupload";
            SqlCommand cmd = new SqlCommand(query, conn);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
        finally
        {
            conn.Close();
            conn.Dispose();
        }
    }
}

Enjoy:)