Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Save and show Images from Data Base in asp.net

Article:
Viewed:  820 
Posted On:  20/09/2014 21:38:21 
How we can save our images in Sql Server Table? How we can show images from Data Base in asp.net c# ? 

 

In this article I am going to explain how we can save and show Images from Data Base in asp.net c#.

Below is my table

DataTable.png

Image 1.

My aspx Code is:

<%@ 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 id="Head1" runat="server">
    <title>Save And Display Images From Data Base</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="1" cellspacing="10" style="background-color: skyblue; border: solid 2px Green;"
            width="70%" align="center">
            <tr>
                <td align="center">
                    <table cellpadding="1" cellspacing="10" style="background-color: skyblue; border: solid 4px Red;">
                        <tr>
                            <td>
                                Employee Name:
                            </td>
                            <td>
                                <asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Employee Address:
                            </td>
                            <td>
                                <asp:TextBox ID="txtEmpAddress" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Employee Mobile:
                            </td>
                            <td>
                                <asp:TextBox ID="txtEmpMobile" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Upload Image:
                            </td>
                            <td>
                                <asp:FileUpload ID="fileuploadImage" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                                <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td height="10px">
                            </td>
                        </tr>
                    </table>
                    <table cellpadding="1" cellspacing="10" style="background-color: skyblue; border: solid 2px Green;"
                        width="100%">
                        <tr>
                            <td align="center">
                                <asp:GridView ID="gridViewEmployee" CssClass="Gridview" runat="server" AutoGenerateColumns="False"
                                    Width="90%" HeaderStyle-ForeColor="#cc0000">
                                    <Columns>
                                        <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" ItemStyle-VerticalAlign="Middle"
                                            ItemStyle-HorizontalAlign="Center" />
                                        <asp:BoundField HeaderText="Address" DataField="Address" ItemStyle-VerticalAlign="Middle"
                                            ItemStyle-HorizontalAlign="Center" />
                                        <asp:BoundField HeaderText="Mobile" DataField="Mobile" ItemStyle-VerticalAlign="Middle"
                                            ItemStyle-HorizontalAlign="Center" />
                                        <asp:TemplateField HeaderText="Image" ItemStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                                <asp:Image ID="EmpImage" runat="server" ImageUrl='<%# "EmployeeImage.ashx?EmpID="+ Eval("ID") %>'
                                                    Height="100px" Width="100px" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div>
    </div>
    </form>
</body>
</html>
 
My aspx.cs  code is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
 
    protected void Page_Load(object sender, EventArgs e)
    {

       
if (!IsPostBack)
        {
            BindEmpGridData();
        }
    }
 
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (fileuploadImage.HasFile)
        {
            int length = fileuploadImage.PostedFile.ContentLength;
            byte[] imgbyte = new byte[length];
 
            HttpPostedFile img = fileuploadImage.PostedFile;
            img.InputStream.Read(imgbyte, 0, length);
            string Emp_Name = txtEmpName.Text;
            string Emp_Address = txtEmpAddress.Text;
            string Emp_Mobile = txtEmpMobile.Text;
 
            SqlConnection connection = new SqlConnection(@"Data Source= MyPC\SqlServer2k8;Integrated Security=True;Initial Catalog=Business");
            connection.Open();
            SqlCommand cmd = new SqlCommand("INSERT INTO Employee (EmployeeName,Address,Mobile,Image) VALUES
                                                                      (@EmployeeName,@Address,@Mobile,@Image)"
, connection);
            cmd.Parameters.Add("@EmployeeName", SqlDbType.VarChar, 50).Value = Emp_Name;
            cmd.Parameters.Add("@Address", SqlDbType.VarChar, 50).Value = Emp_Address;
            cmd.Parameters.Add("@Mobile", SqlDbType.VarChar, 50).Value = Emp_Mobile;
            cmd.Parameters.Add("@Image", SqlDbType.Image).Value = imgbyte;
            int RecordCount = cmd.ExecuteNonQuery();
            connection.Close();

            if (RecordCount == 1)
            {
                BindEmpGridData();
                txtEmpName.Text = string.Empty;
                txtEmpAddress.Text = string.Empty;
                txtEmpMobile.Text = string.Empty;
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('Record Inserted Successfully.')", true);
            }
            else
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage", "javascript:alert('There is some Error, Please try again.')", true);
            }
        }
    }
 
    private void BindEmpGridData()
    {
        SqlConnection connection = new SqlConnection(@"Data Source= MyPC \SqlServer2k8;Integrated Security=True;Initial Catalog=Business");
        SqlCommand command = new SqlCommand("SELECT * FROM EMPLOYEE", connection);
        SqlDataAdapter da = new SqlDataAdapter(command);
        DataTable dt = new DataTable();
        da.Fill(dt);
        gridViewEmployee.DataSource = dt;
        gridViewEmployee.DataBind();       
    }
}
 
Here I am using a Handler to display images (EmployeeImage.ashx)

<%@ WebHandler Language="C#" Class="EmployeeImage" %>
 
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
 
public class EmployeeImage : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string EmpId = context.Request.QueryString["EmpID"];
        SqlConnection connection = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated Security=True;Initial Catalog=Business");
        connection.Open();
        SqlCommand command = new SqlCommand("select Image from Employee where ID=" + EmpId, connection);
        SqlDataReader dr = command.ExecuteReader();
        dr.Read();
        context.Response.BinaryWrite((Byte[])dr[0]);
        connection.Close();
        context.Response.End();
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Now Run the application:

1.png

Image 2.

2.png

Image 3.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us