Data binding in ASP.NET Repeater control from code-behind using DataView

Introduction

In this article I will explain how to bind data to a Repeater control in ASP.NET from code-behind using DataView to render a DIV layout

Description

In this article we will create a DIV layout using Repeater control to display product list with their images. We will use DataView to sort and bind data to the Repeater control from the code-behind.

First we will create a table with some sample data. Then we will use SqlDataAdapter and DataTable to put data in a DataView object. After that we will use “ItemTemplate” template of the Repeater control to create a DIV layout. Finally we will sort data using the DataView object and bind data to the Repeater control programmatically from the code-behind.

Step 1: Create a table “NewProducts” in SQL Server with following fields and data

NewProducts

Step 2: Create a new ASP.NET application

New Project_2013-08-13_22-16-21

Step 3: Add a ConnectionString “ConString” in the Web.config as per your database details

 <connectionStrings>
 <add name="ConString"
 connectionString="Data Source=localhostSQLEXPRESS;Initial Catalog=Northwind;User Id=sa;Password=********;"/>
 </connectionStrings>

Step 4: Add a folder “Images” in the project and add images in the folder with the names as in the “NewProducts” table

RepeaterExample - Microsoft Visual Web Developer 2010 Express_2013-08-16_23-31-19

Step 5: Add a Repeater control on the form and add following in the HTML source

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div style="float: left; width: 202px; margin-top: 15px; padding-left: 15px;">
            <div style="height: 200px; border: 1px solid #CCCCCC;">
                <img width="200px" height="200px" src=" <%#Eval("ProductPhoto") %>" alt="<%#Eval("ProductName") %>">
            </div>
            <div style="clear: both;">
            </div>
            <div class="title">
                <%#Eval("ProductName") %>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Step 6: Add following in the code-behind of the form

C#

protected void Page_Load(object sender, EventArgs e)
{
    BindRepeater();
}

private void BindRepeater()
{
    using(SqlConnection con=new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString))
    {
        SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, ProductPhoto FROM NewProducts", con);
        DataTable dt = new DataTable();
        sda.Fill(dt);

        DataView dv = new DataView(dt);
        dv.Sort = "ProductName";    // Sort by product name
        Repeater1.DataSource = dv;
        Repeater1.DataBind();
    }
}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    BindRepeater()
End Sub

Private Sub BindRepeater()
    Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConString").ConnectionString)
        Dim sda As New SqlDataAdapter("SELECT ProductName, ProductPhoto FROM NewProducts", con)
        Dim dt As New DataTable()
        sda.Fill(dt)

        Dim dv As New DataView(dt)
        dv.Sort = "ProductName" 'Sort by product name
        Repeater1.DataSource = dv
        Repeater1.DataBind()
    End Using
End Sub

Here, DataView is used to sort data of the DataTable and then set as the DataSource of the Repeater control.

Complete Source Code:

HTML Source

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        .title
        {
            background-color: #FFFFFF;
            border: 1px solid #CCCCCC;
            bottom: 1px;
            left: 1px;
            color: #1A1A1A;
            font-size: 13px;
            font-weight: bold;
            padding: 8px 0 8px 0px;
            text-transform: uppercase;
            width: 200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 900px;">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div style="float: left; width: 202px; margin-top: 15px; padding-left: 15px;">
                    <div style="height: 200px; border: 1px solid #CCCCCC;">
                        <img width="200px" height="200px" src=" <%#Eval("ProductPhoto") %>" alt="<%#Eval("ProductName") %>">
                    </div>
                    <div style="clear: both;">
                    </div>
                    <div class="title">
                        <%#Eval("ProductName") %>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

Code Behind C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace RepeaterExample
{
    public partial class RepeaterExample2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            BindRepeater();
        }

        private void BindRepeater()
        {
            using(SqlConnection con=new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString))
            {
                SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, ProductPhoto FROM NewProducts", con);
                DataTable dt = new DataTable();
                sda.Fill(dt);

                DataView dv = new DataView(dt);
                dv.Sort = "ProductName";    // Sort by product name
                Repeater1.DataSource = dv;
                Repeater1.DataBind();
            }
        }
    }
}

Code Behind VB.NET

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Public Class RepeaterExample2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        BindRepeater()
    End Sub

    Private Sub BindRepeater()
        Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("ConString").ConnectionString)
            Dim sda As New SqlDataAdapter("SELECT ProductName, ProductPhoto FROM NewProducts", con)
            Dim dt As New DataTable()
            sda.Fill(dt)

            Dim dv As New DataView(dt)
            dv.Sort = "ProductName" 'Sort by product name
            Repeater1.DataSource = dv
            Repeater1.DataBind()
        End Using
    End Sub
End Class

Output:

Repeater control DIV layout

Leave a Reply

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