Bind Images in Repeater Control from SQL Server Database in Asp.Net C# VB.Net

Some developers want to store Images into SQL Server Database. For those developers need to retrieve Images from Database and display those images either in GridView or DataList or in Repeater control. In my previous article I have explained how to display images from database into GridView. And in this article I am going to explain How one can display stored Images from SQL Server Database into Asp.Net Repeater control. I am providing this example by developing a product display page using Repeater Control.

Related Articles:
1. Save Images into Sql Server Database Table using Asp.Net FileUpload Control C# VB.Net
2. Display Images in GridView from Sql Server Database Table Using Asp.net C# VB.Net
3. Display Images in DataList Control from SQL Server Database in Asp.Net C# VB.Net

Objective/Outcome:
Bind Images in Repeater Control from SQL Server Database in Asp.Net Csharp VB.Net

To do the example I am assuming that you have already a database table with some stored images like below:

HTML Code for the Repeater Control:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div style="display:inline;">
                <img style='border:1px solid #000000' alt="Bind Images from Folder Asp.Net Repeater Control" src='<%# "GetImageDatafromDB.aspx?id=" + System.Convert.ToString(Eval("ProductID")) %>' height="200px"/>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</asp:Content>

Note: If you look at the Image control ImageUrl properties which is pointed to another URL. Actually this GetImageDatafromDB.aspx page will generate the image.

Namespaces required for this example:
1. System.Data
2. System.Data.SqlClient
3. System.Configuration

Now first Bind the Repeater Control from DataBase using ADO.Net:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string connectionString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
            DataTable dt = new DataTable();
            SqlConnection conn = new SqlConnection(connectionString);
            using (conn)
            {
                SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Product", conn);
                ad.Fill(dt);
            }
            Repeater1.DataSource = dt;
            Repeater1.DataBind();
        }
    }

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim connectionString As String = ConfigurationManager.ConnectionStrings("DBConnection").ConnectionString
            Dim dt As New DataTable()
            Dim conn As New SqlConnection(connectionString)
            Using conn
                Dim ad As New SqlDataAdapter("SELECT * FROM Product", conn)
                ad.Fill(dt)
            End Using
            Repeater1.DataSource = dt
            Repeater1.DataBind()
        End If
    End Sub

So now add the GetImageDatafromDB.aspx page & write below code under Page_Load Event:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string sProductID = Request.QueryString["id"];

            string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
            string sQuery = "SELECT ProductImage FROM Product WHERE ProductID = @ProductID";

            SqlConnection con = new SqlConnection(constr);
            SqlCommand cmd = new SqlCommand(sQuery, con);

            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = Int32.Parse(sProductID);

            using (con)
            {
                con.Open();
                SqlDataReader DR = cmd.ExecuteReader();

                if (DR.Read())
                {
                    byte[] imgData = (byte[])DR["ProductImage"];
                    Response.BinaryWrite(imgData);
                }
            }
        }
    }

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim sProductID As String = Request.QueryString("id")

            Dim constr As String = ConfigurationManager.ConnectionStrings("DBConnection").ConnectionString
            Dim sQuery As String = "SELECT ProductImage FROM Product WHERE ProductID = @ProductID"

            Dim con As New SqlConnection(constr)
            Dim cmd As New SqlCommand(sQuery, con)

            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = Int32.Parse(sProductID)

            Using con
                con.Open()
                Dim DR As SqlDataReader = cmd.ExecuteReader()

                If DR.Read() Then
                    Dim imgData As Byte() = DirectCast(DR("ProductImage"), Byte())
                    Response.BinaryWrite(imgData)
                End If
            End Using
        End If
    End Sub

Note: Don’t forget to add above mentioned namespaces also for this page handler.

Hope now you can Bind SQL Server stored images into Repeater Control.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Database, Repeater, SQL Server, VB.Net
2 comments on “Bind Images in Repeater Control from SQL Server Database in Asp.Net C# VB.Net
  1. CJ says:

    Hi sir. your code is not working cmd.Parameters.Add(“@ProductID”, SqlDbType.Int).Value = Int32.Parse(sProductID) it says input string was not in a correct format. Can you help me fix that error. thanks

  2. Luis F says:

    Works perfect !!!, thank you very much.

Leave a Reply

Your email address will not be published. Required fields are marked *

     

*