In this Article I will explain how to
display images in gridview from database
I Created a table with Name
Display_Images as
shown below.
USE
[chinnu]
GO
/******
Object: Table [dbo].[Display_Images] Script Date: 11/07/2013
05:40:28 ******/
SET
ANSI_NULLS
ON
GO
SET
QUOTED_IDENTIFIER
ON
GO
CREATE
TABLE
[dbo].[Display_Images](
[Id]
[int] IDENTITY(1,1)
NOT
NULL,
[ImageName]
[nvarchar](max)
NOT
NULL,
[ImagePath]
[nvarchar](max)
NOT
NULL
)
ON
[PRIMARY]
GO
Now
I am creating an empty web application with name UpLoadimages,After
that I am adding a web form with name
DisplayImages.aspx.
I
am designing a UI with FileUplod Control ,Button and Grid view.
In
DisplayImages.aspx page
<%@
Page
Language="C#"
AutoEventWireup="true"
CodeBehind="DisplayImages.aspx.cs"
Inherits="UpLoadimages.DisplayImages"
%>
<!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:FileUpload
ID="FileUpload1"
runat="server"
/>
<asp:Button
ID
=
"BtnUploadImages"
runat
=
"server"
Text
=
"UploadImages"
onclick="BtnUploadImages_Click"
/>
</div>
<div>
<asp:GridView
ID="gridview"
runat="server"
AutoGenerateColumns
=
"false">
<Columns>
<asp:BoundField
DataField="Id"
HeaderText="Id"/>
<asp:BoundField
DataField="ImageName"
HeaderText="ImageName"/>
<asp:ImageField
DataImageUrlField
=
"ImagePath"
ControlStyle-Height
=
"50"
ControlStyle-Width
=
"50"
HeaderText="Image
Preview"
/>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
In
DisplayImages.aspx.cs I am writing the logic to display images in
grid view
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data.SqlClient;
using
System.Data;
using
System.Configuration;
using
System.IO;
namespace
UpLoadimages
{
public
partial
class
DisplayImages
: System.Web.UI.Page
{
SqlConnection
con = new
SqlConnection("Data
Source=DotNetSharePoint;Database=Chinnu;User Id=sa;Password=Password123;");
protected
void
Page_Load(object
sender, EventArgs
e)
{
if
(!IsPostBack)
{
BindGridData();
}
}
private
void
BindGridData()
{
try
{
SqlCommand
command = new
SqlCommand("SELECT
* from Display_Images",
con);
SqlDataAdapter
da = new
SqlDataAdapter(command);
DataTable
dt = new
DataTable();
da.Fill(dt);
gridview.DataSource
= dt;
gridview.DataBind();
}
catch
(Exception
ex)
{
}
}
protected
void
BtnUploadImages_Click(object
sender, EventArgs
e)
{
if
(FileUpload1.PostedFile != null)
{
string
ImageName = Path.GetFileName(FileUpload1.PostedFile.FileName);
FileUpload1.SaveAs(Server.MapPath("DisplayImages/"
+ ImageName));
string
Query = "Insert
into Display_Images(ImageName,ImagePath)"
+ "values(@ImageName,@ImagePath)";
SqlCommand
cmd = new
SqlCommand(Query);
cmd.Connection
= con;
cmd.Parameters.AddWithValue("@ImageName",
ImageName);
cmd.Parameters.AddWithValue("@ImagePath",
"DisplayImages/"
+ ImageName);
cmd.CommandType
= CommandType.Text;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
}
In
Web.config iam giving the database connection string
<connectionStrings>
<add
name="Connstring"
connectionString="Data
Source=DotNetSharePoint;Database=Chinnu;User
Id=sa;Password=Password123;"
providerName="System.Data.SqlClient"
/>
</connectionStrings>
After
completing all the steps,Press F5
we
can see the output as fallows.