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

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"  
  2.  CodeBehind="BindRepeaterControl.aspx.cs" Inherits="BindRepeaterControlApp.BindRepeaterControl" %>  
  3. <asp:Content ID="Content1" ContentPlaceHolderID="titleContent"   
  4. runat="server">Twitter Bootstrap and Repeater Control in ASP.NET  
  5. </asp:Content>  
  6. <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">  
  7. </asp:Content>  
  8. <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">  
  9.          <div>  
  10.             <h3>Customer Data</h3>  
  11.             <p>  
  12.                 <asp:Repeater ID="Repeater1" runat="server" >  
  13.                     <HeaderTemplate>  
  14.                         <table class="table table-striped table-bordered">  
  15.                             <tr>  
  16.                                 <td><b>CustomerID</b></td>  
  17.                                 <td><b>Name</b></td>  
  18.                                 <td><b>Contact Name</b></td>  
  19.                                 <td><b>Contact Title</b></td>  
  20.                                 <td><b>Address</b></td>  
  21.                                 <td><b>City</b></td>  
  22.                                 <td><b>Phone</b></td>  
  23.                             </tr>  
  24.                     </HeaderTemplate>  
  25.                     <ItemTemplate>  
  26.                         <tr>  
  27.                             <td>  
  28.                                 <%# DataBinder.Eval(Container.DataItem, "CustomerID") %>   
  29.                             </td>  
  30.                             <td>  
  31.                                 <%# DataBinder.Eval(Container.DataItem, "CompanyName") %>   
  32.                             </td>  
  33.                             <td>  
  34.                                 <%# DataBinder.Eval(Container.DataItem, "ContactName") %>  
  35.                             </td>  
  36.                             <td>  
  37.                                 <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %>   
  38.                             </td>  
  39.                             <td>  
  40.                                 <%# DataBinder.Eval(Container.DataItem, "Address") %>   
  41.                             </td>  
  42.                             <td>  
  43.                                 <%# DataBinder.Eval(Container.DataItem, "City") %>   
  44.                             </td>  
  45.                             <td>  
  46.                                 <%# DataBinder.Eval(Container.DataItem, "Phone") %>   
  47.                             </td>  
  48.                         </tr>  
  49.                     </ItemTemplate>  
  50.                     <FooterTemplate>  
  51.                         </table>   
  52.                     </FooterTemplate>  
  53.                 </asp:Repeater>  
  54.             </p>  
  55.         </div>  
  56. </asp:Content> 
In the Web.config file create the connection string as:

Web.config
  1. <connectionStrings>  
  2.     <add name="ConnectionString" connectionString="Server=localhost;userid=root;password=;  
  3.       Database=Testdb" providerName="MySql.Data.MySqlClient"/>  
  4. </connectionStrings> 
In the code behind file (BindRepeaterControl.aspx.cs) write the code as:

BindRepeaterControl.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using MySql.Data.MySqlClient;  
  9. using System.Configuration;  
  10. namespace BindRepeaterControlApp  
  11. {  
  12.     public partial class BindRepeaterControl : System.Web.UI.Page  
  13.     {  
  14.         #region MySqlConnection Connection  
  15.         MySqlConnection conn = new MySqlConnection(ConfigurationManager.ConnectionStrings  
  16.             ["ConnectionString"].ConnectionString);  
  17.         #endregion  
  18.         #region show message  
  19.         /// <summary>  
  20.         /// This function is used for show message.  
  21.         /// </summary>  
  22.         /// <param name="msg"></param>  
  23.         void ShowMessage(string msg)  
  24.         {  
  25.             ClientScript.RegisterStartupScript(Page.GetType(), "validation", "<script  
  26.                          language='javascript'>alert('" + msg + "');</script>");  
  27.         }  
  28.         #endregion  
  29.         #region Repeater Control  
  30.         /// <summary>  
  31.         /// Bind Data to Repeater Control  
  32.         /// </summary>  
  33.         /// <param name="sender"></param>  
  34.         /// <param name="e"></param>  
  35.         protected void Page_Load(object sender, EventArgs e)  
  36.         {  
  37.             //Query   
  38.             string query = @"SELECT CustomerID,CompanyName,ContactName,ContactTitle,  
  39.                Address,City,Phone,Email FROM customers";  
  40.             DataTable dt = new DataTable();  
  41.             try  
  42.             {  
  43.                 MySqlDataAdapter da = new MySqlDataAdapter(query, conn);  
  44.                 da.Fill(dt);  
  45.             }  
  46.             catch (MySqlException ex)  
  47.             {  
  48.                 ShowMessage(ex.ToString());  
  49.             }  
  50.             //Populate Repeater control with data   
  51.             Repeater1.DataSource = dt;  
  52.             Repeater1.DataBind();  
  53.         }  
  54.         #endregion  
  55.     }  
  56. } 
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.