Today I will explain how to retrieve image and display
in Grid View using asp.net with C#. I used SQL query to retrieve data from
database and a Grid View control to display image. Grid View control is an
ASP.net control which help to display data in a tabular form. Let’s follow some
steps to build this project.
Step1:
Open Visual Studio and create a Database. I have
created a database named ImageDatabase which
has four column(imgid, Imagename, imageLink and upateDate).
Insert some data to the database. In my previous post I
have explain how to insert file to dataset and server. In same process you can
insert some image to server and insert image link to database. I have explained
to insert image or file to server because it will save size of the data base. So
I suggest inserting only image link to the database.
After insert data the database looks like
Step2:
Now add a webpage from solution explorer.
Step3:
Add three Namespace
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
Step4:
Now add a button from ToolBox. Whenever you will click
this button then Button click event will fire and it will show the Grid View.
Step5:
Add a Grid View control from the ToolBox and add four columns.
Now set Header name and data binding property of each column. following code can help you ta add a Grid view Control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagefile.aspx.cs" Inherits="imagefile" %>
<!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:Button ID="Button1" runat="server" BorderColor="#339933"
BorderStyle="Solid" BorderWidth="1px" Height="38px" onclick="Button1_Click"
Text="Show Grid View" Width="122px" />
<br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("imgid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/"+ Eval("imageLink") %>' />
</ItemTemplate>
<ItemStyle Height="150px" Width="150px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("ImageName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Update Date">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("upateDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
</div>
</form>
</body>
</html>
<!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:Button ID="Button1" runat="server" BorderColor="#339933"
BorderStyle="Solid" BorderWidth="1px" Height="38px" onclick="Button1_Click"
Text="Show Grid View" Width="122px" />
<br />
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("imgid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/"+ Eval("imageLink") %>' />
</ItemTemplate>
<ItemStyle Height="150px" Width="150px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("ImageName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Update Date">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("upateDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
</div>
</form>
</body>
</html>
Step6:
Double click to the button and add following code.
string con = ConfigurationManager.ConnectionStrings["imgcon"].ToString();
SqlConnection conobj = new SqlConnection(con);
SqlCommand com = new SqlCommand("select * from ImageDatabase", conobj);
SqlDataAdapter da = new SqlDataAdapter(com);
DataSet ds = new DataSet();
da.Fill(ds, "ImageDatabase");
DataTable dtemp = ds.Tables[0];
Session["dtemp"] = dtemp;
Session["da"] = da;
GridView1.DataSource = (DataTable)Session["dtemp"];
GridView1.DataBind();
SqlConnection conobj = new SqlConnection(con);
SqlCommand com = new SqlCommand("select * from ImageDatabase", conobj);
SqlDataAdapter da = new SqlDataAdapter(com);
DataSet ds = new DataSet();
da.Fill(ds, "ImageDatabase");
DataTable dtemp = ds.Tables[0];
Session["dtemp"] = dtemp;
Session["da"] = da;
GridView1.DataSource = (DataTable)Session["dtemp"];
GridView1.DataBind();
Step7:
Open web.config and add a connection string. Right click
on the database and click on properties option. Copy the data source and paste
it as the connection string.
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
</system.web>
<connectionStrings>
<add name="imgcon" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=\imageShow.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"/>
</connectionStrings>
</configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
</system.web>
<connectionStrings>
<add name="imgcon" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=\imageShow.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"/>
</connectionStrings>
</configuration>
Now run the project and enjoy
Out Put:
No comments:
Post a Comment