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.
Download Source code for Display Images in ASP.NET GridView
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> 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>
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:
Download Source code for Display Images in ASP.NET GridView