Insert and Retrieve Image from Database and Show in Repeater

In this blog we will know how to Insert and Retrieve image from database and show in repeater.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ADD_Retrieve_IMAGES_repeater._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>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <table>

        <tr>

            <td>

                Name

            </td>

            <td>

                <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>

                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt_name"

                    ErrorMessage="Please enter the name"></asp:RequiredFieldValidator>

            </td>

        </tr>

        <tr>

            <td>

                Picture

            </td>

            <td>

                <asp:FileUpload ID="FileUpload1" runat="server" />

                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="FileUpload1"

                    ErrorMessage="Please browse the image"></asp:RequiredFieldValidator>

            </td>

        </tr>

        <tr>

            <td>

            </td>

            <td>

                <asp:Button ID="btn_insert" runat="server" OnClick="btn_insert_Click" Text="Insert" />

            </td>

        </tr>

    </table>

    <div>

        <asp:Repeater ID="Repeater1" runat="server">

            <HeaderTemplate>

                <center>

                    <b>Photo Details</b></center>

            </HeaderTemplate>

            <ItemTemplate>

                <table border="1">

                    <tr>

                        <th>

                            Name

                        </th>

                        <th>

                            Picture

                        </th>

                    </tr>

                    <tr>

                        <td>

                            <%# Eval("name") %>

                        </td>

                        <td>

                            <img alt="" src='images/<%#Eval("pic") %>' height="50px" width="50px" />

                        </td>

                    </tr>

                </table>

            </ItemTemplate>

        </asp:Repeater>

    </div>

    </form>

</body>

</html>

 
.CS File
 

using System;

using System.Collections;

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;

using System.IO;

 

namespace ADD_Retrieve_IMAGES_repeater

{

    public partial class _Default : System.Web.UI.Page

    {

        string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        string s1;

        string path;

        SqlConnection cnn = new SqlConnection();

        SqlCommand com = new SqlCommand();

        SqlDataAdapter sqlda;

        DataTable dt;

        protected void btn_insert_Click(object sender, EventArgs e)

        {

            if (FileUpload1.PostedFile.ContentLength > 0)

            {

                s1 = Path.GetFileName(FileUpload1.FileName);

                path = Server.MapPath("images") + "/" + s1;

                FileUpload1.SaveAs(path);

            }

 

            SqlConnection con = new SqlConnection(strConnString);

            con.Open();

            SqlCommand com = new SqlCommand("insert_test", con);

            com.CommandType = CommandType.StoredProcedure;

            com.Connection = con;

            com.Parameters.AddWithValue("@name", txt_name.Text);

            com.Parameters.AddWithValue("@pic", s1);

            com.ExecuteNonQuery();

            com.Dispose();

            bindrepeater();

            con.Close();

            clear();

        }

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                bindrepeater();

            }

        }

 

        private void clear()

        {

            txt_name.Text = "";

        }

        private void bindrepeater()

        {

            SqlConnection con = new SqlConnection(strConnString);

            con.Open();

            sqlda = new SqlDataAdapter("SELECT * FROM test ", con);

            dt = new DataTable();

            sqlda.Fill(dt);

            sqlda.Dispose();

            Repeater1.DataSource = dt;

            Repeater1.DataBind();

            con.Close();

        }

    }

}