How
to displaying Images in GridView with ImageFiled
ImageFiled is designed for the purpose of displaying
images in databound controls like GridView and DetailsView so it is better to
use ImageField over Image Control with Template Field
Properties
with ImageField in GridView
·
DataImageUrlField
·
DataImageUrlFormatString
·
AlternateText
·
DataAlternateTextField
·
NullDisplayText
·
NullImageUrl
·
ControlStyle-Width
·
ControlStyle-Height
AlternateText this property
to specify the text that you want to display if image is missing
DataAlternateTextField this property
to specify the data field from Sql table that you want to display if image is missing
DataImageUrlField this property to specify the data field name of Sql table like
DataImageUrlField="Photo"
DataImageUrlFormatString this property to specify the Folder name of Web Application where images will be
saved like
DataImageUrlFormatString="/Image/{0}"
--Sql Query
create database GridConcept
use
GridConcept
create table tb_image1
(
SrNo int identity(1,1) primary key,
Name varchar(50),
Photo varchar(max)
)
Pictorial Representation with ImageField
Properties in GridView
Source code with WebForm2.aspx
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ImageFieldwithGridView.WebForm2"
%>
<!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>
<table width="100%">
<tr><td align="center">
<span color="Red">
<b><i>How to displaying Image in GridView with ImageField</i></b> </span> </td></tr>
<tr>
<td align="center">
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="SrNo" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="SrNo"
HeaderText="SrNo"
SortExpression="SrNo"
/>
<asp:BoundField DataField="Name"
HeaderText="Name"
SortExpression="Name"
/>
<asp:ImageField DataImageUrlField="Photo" DataImageUrlFormatString="/Image/{0}" ControlStyle-Width="100px" ControlStyle-Height="100px"
HeaderText="Photo" NullDisplayText="Not Found"
NullImageUrl="~/Image/notfoundimage.jpg">
</asp:ImageField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:GridConceptConnectionString %>"
SelectCommand="SELECT * FROM
[tb_image]"></asp:SqlDataSource>
</td></tr>
</table>
</div>
</form>
</body>
</html>
Result:
How
to displaying Images in GridView with ImageFiled with C# Code
First we create
class which name is StudentDataAceessLayer.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
namespace ImageFieldwithGridView
{
public class Student
{
public int RollNo { get; set; }
public string Name { get; set; }
public string Photo { get; set; }
// public string AlternateText { get; set; }
public string
DataAlternateText { get; set; }
}
public class StudentDataAceessLayer
{
public static List<Student>
GetAllData()
{
List<Student>
liststu = new List<Student>();
string constr = ConfigurationManager.ConnectionStrings["kush"].ConnectionString;
using (SqlConnection
con = new SqlConnection(constr))
{
SqlCommand cmd = new SqlCommand("select
* from tb_image", con);
con.Open();
SqlDataReader dr =
cmd.ExecuteReader();
while (dr.Read())
{
Student ss = new Student();
ss.RollNo
= Convert.ToInt32(dr["SrNo"]);
ss.Name
= dr["Name"].ToString();
ss.Photo
= dr["Photo"].ToString();
// ss.AlternateText = "Not found";
ss.DataAlternateText
= dr["Name"]+" image not found";
liststu.Add(ss);
}
return liststu;
}
}
}
}
Source code with WebForm1.aspx
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"
Inherits="ImageFieldwithGridView.WebForm1" %>
<!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">
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="style1">
<tr>
<td colspan="2" align="center">
<span color="Red">
<b><i>How to displaying Image in GridView with ImageField</i></b> </span> </td>
</tr>
<tr><td>Name</td>
<td><asp:TextBox ID="txtname"
runat="server"></asp:TextBox></td></tr>
<tr>
<td>
Photo</td>
<td>
<asp:FileUpload ID="FileUpload1"
runat="server"
/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave"
runat="server"
Text="Save"
onclick="btnSave_Click"
/>
<asp:Label ID="lblmessage"
runat="server"
Text="Label"
Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="RollNo"
HeaderText="RollNo"
SortExpression="RollNo" />
<asp:BoundField DataField="Name"
HeaderText="Name"
SortExpression="Name"
/>
<asp:ImageField DataImageUrlField="Photo" DataImageUrlFormatString="~/Image/{0}" ControlStyle-Width="150px" ControlStyle-Height="100px" DataAlternateTextField="DataAlternateText"
HeaderText="Student Image">
</asp:ImageField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Source code with WebForm1.aspx.cs
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.Configuration;
using System.Drawing;
namespace ImageFieldwithGridView
{
public partial class WebForm1 :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs
e)
{
BindGridView();
}
//code for retrieve image
.................
private void
BindGridView()
{
GridView1.DataSource
= StudentDataAceessLayer.GetAllData();
GridView1.DataBind();
}
//code for save image
.................
string fileimg;
protected void
btnSave_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
fileimg
= FileUpload1.FileName;
FileUpload1.SaveAs(Server.MapPath("~/Image/") + FileUpload1.FileName);
}
else
{
fileimg
= "Null";
}
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["kush"].ConnectionString);
SqlCommand cmd = new SqlCommand("insert
into tb_image values('" + txtname.Text + "','"
+fileimg+ "')", con);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Green;
lblmessage.Text
= "Save Successfully";
BindGridView();
}
}
}
Result:
0 comments:
Post a Comment