Skip to main content
asp.net gridview images table

How to show images in ASP.NET GridView from Image Path

In this post we will see how to display images in asp.net gridview from image path stored in ms sql database table column. Also see How to make Registration Form in ASP.NET and MS SQL Database.

Images in ASP.NET Gridview can be displayed0 using ImageField. Gridview’s ImageField uses “DataImageUrlField” data to display images on the UI.

How to show images in ASP.NET GridView from Image Path:

Below is the design page:

Employees.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employees.aspx.cs" Inherits="RegistrationForms.Employees" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.borderless td, .borderless th {
border: none;
border-color: Red;
}

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td {
padding: 3px;
}

input, select {
border-radius: 3px;
padding: 1px;
border: 1px solid darkgray;
}

.btnCoral {
background-color: crimson;
color: #fff;
}

body {
width: 100%;
height: 100%;
}
.parent-container
{
margin:5px;
}

</style>
<title>Employees</title>
</head>
<body>
<form id="form1" runat="server">

<div class="parent-container">
<h2> &nbsp;&nbsp;ASP.NET Gridview with Images from Database.</h2>
<div class="container">
<asp:Button CssClass="btn-danger" Text=" Fill " runat="server" ID="btnFill" OnClick="btnFill_Click" />
<br /><br />
<asp:GridView runat="server" ID="dataEmployees" AutoGenerateColumns="false" UseAccessibleHeader="true"
CssClass="table-condensed">
<Columns>
<asp:ImageField DataImageUrlField="ProfilePic" HeaderText="Profile Picture"
ControlStyle-Width="150" ItemStyle-Width="150"
ControlStyle-Height="150" ItemStyle-Height="150" />
<asp:BoundField DataField="EId" HeaderText="Employee ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
<br />
<asp:Label runat="server" ID="lblInfo" />
</div>
</div>
</form>
</body>
</html>

asp.net gridview images table
And its code file:
Employees.aspx.cs:

using System;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.IO;
using System.Web.UI;

namespace RegistrationForms
{
public partial class Employees : System.Web.UI.Page
{
SqlConnection con;
SqlCommand cmd;
SqlDataAdapter adapter;
SqlDataReader reader;
DataSet ds;
DataTable dt;

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnFill_Click(object sender, EventArgs e)
{
try
{
con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString);
cmd = new SqlCommand("Select * from View_Emp", con);
con.Open();
adapter = new SqlDataAdapter(cmd);
dt = new DataTable();
adapter.Fill(dt);
dataEmployees.DataSource = dt;
dataEmployees.DataBind();
adapter.Dispose();
cmd.Dispose();
con.Close();
}
catch (Exception ex)
{
lblInfo.Text = ex.Message.ToString();
}
}
}
}

Database Table Pic:

asp.net gridview images database

Download Source code for Display Images in ASP.NET GridView