Upload image in database and show it in grid view
In grid view, It is not possible to show image from database directly. We have to have a handler for that. Handler create an image dynamically from taking bytes from database. It means we will pass an id to handler then it returns image based on that.
Let us see how to show image in grid view which is already in database.
First we will store image in database.
our Db table is like this below image.
Use this below code to store image in db
<p>
Name:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
Image:
<asp:FileUpload ID="FileUpload1" runat="server" />
</p>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />
</p>
<p>
keep this below code in button click event
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection cn = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True");
cn.Open();
SqlCommand com = new SqlCommand("CreateUser", cn);
com.Parameters.Add(new SqlParameter("Name", TextBox1.Text));
com.Parameters.Add(new SqlParameter("Image", FileUpload1.FileBytes));
com.CommandType = CommandType.StoredProcedure;
com.ExecuteNonQuery();
}
That page will be like this below image
Then keep a grid view in that page. For image write handler like this below step
code for grid view
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"
ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:ImageField DataImageUrlField="id"
DataImageUrlFormatString="image.ashx?id={0}" ControlStyle-Width="100px" HeaderText="Photo">
</asp:ImageField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Emp]"></asp:SqlDataSource>
add ahndle using this below step
Handler code it is image.ashx.
<%@ WebHandler Language="C#" Class="image" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
public class image : IHttpHandler {
public void ProcessRequest (HttpContext context) {
SqlConnection cn = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True");
cn.Open();
SqlDataAdapter da = new SqlDataAdapter("Getusers", cn);
da.SelectCommand.Parameters.Add(new SqlParameter("id", context.Request.QueryString["id"]));
da.SelectCommand.CommandType = CommandType.StoredProcedure;
DataSet ds = new DataSet();
da.Fill(ds);
cn.Close();
byte[] image = ((byte[])ds.Tables[0].Rows[0]["Image"]);
context.Response.Clear();
context.Response.ContentType = "image/jpg";
context.Response.BinaryWrite(image);
context.Response.Flush();
context.Response.Close();
}
public bool IsReusable {
get {
return false;
}
}
}
use full stored procedure for this resource
ALTER PROCEDURE dbo.CreateUser
@Name varchar(50),
@Image Image
AS
BEGIN
insert into Emp(Name,Image) values(@Name,@Image)
END
go
ALTER PROCEDURE dbo.Getusers
@id int
AS
select * from Emp where id=@id
RETURN
finally that screen will be like fallowing image.
Thanks and regards
Siva kumar