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.