Twitter Bootstrap and Repeater Control in ASP.Net

Repeater Control

A Repeater control is a lightweight control and faster to display data compared to a grid view and data grid.

So, let's proceed with the following procedure:

Repeater Control and Data Binding
Twitter Bootstrap tables (table table-striped table-bordered) and MySQL Database

Open your instance of Visual Studio 2012 and create a new ASP.NET Web application. Name the project “BindRepeaterControlApp", as shown in the following figure:

In the Design Source (BindRepeaterControl.aspx) write the code as in the following.

Twitter Bootstrap tables CSS (table table-striped table-bordered)

BindRepeaterControl.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="BindRepeaterControl.aspx.cs" Inherits="BindRepeaterControlApp.BindRepeaterControl" %>
<asp:Content ID="Content1" ContentPlaceHolderID="titleContent"
runat="server">Twitter Bootstrap and Repeater Control in ASP.NET
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div>
<h3>Customer Data</h3>
<p>
<asp:Repeater ID="Repeater1" runat="server" >
<HeaderTemplate>
<table class="table table-striped table-bordered">
<tr>
<td><b>CustomerID</b></td>
<td><b>Name</b></td>
<td><b>Contact Name</b></td>
<td><b>Contact Title</b></td>
<td><b>Address</b></td>
<td><b>City</b></td>
<td><b>Phone</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "CustomerID") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "CompanyName") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "ContactName") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "ContactTitle") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Address") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "City") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Phone") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</p>
</div>
</asp:Content>

In the Web.config file create the connection string as:

Web.config

<connectionStrings>
<add name="ConnectionString" connectionString="Server=localhost;userid=root;password=;
Database=Testdb" providerName="MySql.Data.MySqlClient"/>
</connectionStrings>

In the code behind file (BindRepeaterControl.aspx.cs) write the code as:

BindRepeaterControl.aspx.cs

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 MySql.Data.MySqlClient;
using System.Configuration;
namespace BindRepeaterControlApp
{
public partial class BindRepeaterControl : System.Web.UI.Page
{
#region MySqlConnection Connection
MySqlConnection conn = new MySqlConnection(ConfigurationManager.ConnectionStrings
["ConnectionString"].ConnectionString);
#endregion
#region show message
/// <summary>
/// This function is used for show message.
/// </summary>
/// <param name="msg"></param>
void ShowMessage(string msg)
{
ClientScript.RegisterStartupScript(Page.GetType(), "validation", "<script
language='javascript'>alert('" + msg + "');</script>");
}
#endregion
#region Repeater Control
/// <summary>
/// Bind Data to Repeater Control
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
//Query
string query = @"SELECT CustomerID,CompanyName,ContactName,ContactTitle,
Address,City,Phone,Email FROM customers";
DataTable dt = new DataTable();
try
{
MySqlDataAdapter da = new MySqlDataAdapter(query, conn);
da.Fill(dt);
}
catch (MySqlException ex)
{
ShowMessage(ex.ToString());
}
//Populate Repeater control with data
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
#endregion
}
}

Now run the page, it will look like the following. The Data Binding will be successful.

I hope this article is useful. If you have any other questions then please provide your comments below.