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.