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

By | August 17, 2013

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

[code language=”xml”]
<connectionStrings>
<add name="ConString"
connectionString="Data Source=localhost\SQLEXPRESS;Initial Catalog=Northwind;User Id=sa;Password=********;"/>
</connectionStrings>

[/code]

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

[code language=”html”]
<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>
[/code]

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

C#

[code language=”csharp”]
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]

VB.NET

[code language=”vb”]
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
[/code]

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

[code language=”html”]
<!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]

Code Behind C#

[code language=”csharp”]
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]

Code Behind VB.NET

[code language=”vb”]
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
[/code]

Output:

Repeater control DIV layout

Leave a Reply

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