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
Step 2: Create a new ASP.NET application
Step 3: Add a ConnectionString “ConString” in the Web.config as per your database details
<connectionStrings> <add name="ConString" connectionString="Data Source=localhost\SQLEXPRESS;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
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:
Filed under: .Net, ASP.NET
