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:

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.