How to Save Image Database and show in GridView with Template Field…..
//Execute this query in Sql Server……………………………..
create table SiteImage(SrNo int identity(1,1) primary key,Name nvarchar(50) unique,Link nvarchar(100),Photo nvarchar(max))
insert into SiteImage values('Google','www.google.com','gplus.png')
Select * from
SiteImage
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!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 colspan="2"><center><b><i><font color="Green">How to Save Image Database and
show in GridView with Template
Field</font></i></b></center></td></tr>
<tr><td>Website Name</td><td>
<asp:TextBox ID="txtname"
runat="server"></asp:TextBox>
</td></tr>
<tr><td>WebSite Address</td><td>
<asp:TextBox ID="txtaddress"
runat="server"></asp:TextBox>
</td></tr>
<tr><td>Website Image</td><td>
<asp:FileUpload ID="FileUpload1"
runat="server"
/>
</td></tr>
<tr><td></td><td>
<asp:Button ID="btnSave"
runat="server"
onclick="btnSave_Click"
Text="Save"
/>
</td></tr>
<tr><td></td><td>
<asp:Label ID="lblmessage"
runat="server"
Visible="False"></asp:Label>
</td></tr>
<tr><td> </td><td>
</td></tr>
<tr><td colspan="2">
<center>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333"
GridLines="None"
>
<AlternatingRowStyle BackColor="White"
/>
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Site
Link">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1"
runat="server"
Text='<%# Eval("Link") %>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Site
Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
Height="43px"
ImageUrl='<%# Eval("Photo","SiteImage/{0}") %>' Width="61px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF"
/>
<FooterStyle BackColor="#507CD1"
Font-Bold="True"
ForeColor="White"
/>
<HeaderStyle BackColor="#507CD1"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle BackColor="#2461BF"
ForeColor="White"
HorizontalAlign="Center"
/>
<RowStyle BackColor="#EFF3FB"
/>
<SelectedRowStyle BackColor="#D1DDF1"
Font-Bold="True"
ForeColor="#333333"
/>
<SortedAscendingCellStyle BackColor="#F5F7FB"
/>
<SortedAscendingHeaderStyle BackColor="#6D95E1"
/>
<SortedDescendingCellStyle BackColor="#E9EBEF"
/>
<SortedDescendingHeaderStyle BackColor="#4870BE"
/>
</asp:GridView>
</center>
</td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
</form>
</body>
</html>
Follow all steps one by one with help of below image
First we take a Gridview and add
new Columns with Gridview smart tag and add template field for all records…
How to drag all asp.net Control in
Item Template in GridView for all Field.....................
After this Go to GridView Property and change
AutoGenerateColumns=False
How to bind this above contol
which are present under Item Template Field…
How to bind this Image Field which
are present under Item Template Field in GridView…
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.IO;
using System.Drawing;
using System.Data;
public partial class _Default :
System.Web.UI.Page
{
SqlConnection con;
protected void Page_Load(object sender, EventArgs
e)
{
con = new SqlConnection(@"Data Source=KUSH-PC\KUSH;Initial
Catalog=test;Integrated Security=True");
if (!IsPostBack)
{
GridViewBind();
}
}
//Method for bind GridView .........................................
private void
GridViewBind()
{
SqlCommand com = new SqlCommand("Select
* from SiteImage", con);
SqlDataAdapter da = new SqlDataAdapter(com);
DataSet ds=new DataSet();
da.Fill(ds);
if (ds.Tables[0] != null)
{
GridView1.DataSource
= ds;
GridView1.DataBind();
}
else
{
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Red;
lblmessage.Text
= "There is no any data in table";
}
}
//Save Image with name,link and Image in
Database……………………………..
protected void
btnSave_Click(object sender, EventArgs e)
{
try
{
// code for
only upload png,jpg,jpeg
format for image………………
string exe = Path.GetExtension(FileUpload1.FileName).ToLower();
string filename = FileUpload1.FileName;
if (exe == ".png"
|| exe == ".jpg" || exe == ".jpeg")
{
// code for
upload image less than 4 K B only………………
1 kb=1024 bytes -> 4 kb= 4096 bytes
if (FileUpload1.FileBytes.Length <= 4096)
{
SqlCommand cmd = new SqlCommand("insert
into SiteImage values(@name,@link,@photo)", con);
cmd.Parameters.AddWithValue("@name", txtname.Text);
cmd.Parameters.AddWithValue("@link", txtaddress.Text);
cmd.Parameters.AddWithValue("@photo", filename);
FileUpload1.SaveAs(Server.MapPath("~/SiteImage/") + filename);
con.Open();
cmd.ExecuteNonQuery();
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Green;
lblmessage.Text
= "Image Save Successfully ";
GridViewBind();
con.Close();
}
else
{
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Red;
lblmessage.Text
= "Please upload image less than 10.6 kb ";
}
}
else
{
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Red;
lblmessage.Text
= "Please select png,jpg,jpeg file for image
upload";
}
}
catch (Exception
ex)
{
lblmessage.Visible
= true;
lblmessage.ForeColor
= Color.Red;
lblmessage.Text
= ex.Message;
}
}
}
very well explained :)
ReplyDelete