Introduction

Repeater is a data-bound list control that allows custom layout by repeating a specified template for each item displayed in the list. In this article, I will demonstrate how to dynamically bind repeater control in ASP.NET from a database.

Step 1

Create a database table in SQL Server 2014.

  1. CREATE TABLE [dbo].[Employees](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [nvarchar](50) NULL,
  4. [Position] [nvarchar](50) NULL,
  5. [Office] [nvarchar](50) NULL,
  6. [Salary] [nvarchar](50) NULL,
  7. [Profile_Picture] [nvarchar](50) NULL,
  8. CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED
  9. (
  10. [ID] ASC
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  12. ) ON [PRIMARY]
  14. GO
  1. CREATE PROCEDURE [dbo].[spGetEmployees]
  2. AS
  3. BEGIN
  4. SELECT Name,Position,Office,Salary,Profile_Picture from [dbo].[Employees]
  5. END

ASP.NET

Step 2

Open Visual Studio 2015, click on New Project, and create an empty web application project.

Screenshot for creating new project 1

ASP.NET
After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project, then click on OK.

Screenshot for creating new project 2

ASP.NET

After clicking on OK, one more window will appear. Choose Empty, check on Web Forms checkbox, and click on OK.

Screenshot for creating new project 3

ASP.NET
Step 3

Double click on webconfig file and connect the database by writing the following line of code.
  1. <connectionStrings>
  2. <add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>
  3. </connectionStrings>

Step 4 - Add web form in your project

Right click on project, select Add >>Web Form.

Screenshot for adding web form 1

ASP.NET

After clicking on web form, one window will appear. Give name to the web form, such as - Repeater or any meaningful name. Click on OK and web form will be added to the project.

Screenshot for adding web form 2

ASP.NET
Step 5

Add script and styles of bootstrap in the head section of the web form.
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Step 6

Drag and drop a Repeater control on the web form. Design Repeater control.

  1. <body>
  2. <form id="form1" runat="server">
  3. <div class="container py-4">
  4. <h5 class="text-center text-uppercase">Repeater control in asp.net</h5>
  5. <asp:Repeater ID="Repeater1" runat="server">
  6. <ItemTemplate>
  7. <table class="table table-bordered">
  8. <tr>
  9. <td style="width: 20%;">
  10. <img alt="" width="150" class="img-thumbnail" src='<%#Eval("Profile_Picture")%>' />
  11. </td>
  12. <td>
  13. <table class="table">
  14. <tr>
  15. <td style="width:50%;">Employee Name:</td>
  16. <td><%#Eval("Name")%></td>
  17. </tr>
  18. <tr>
  19. <td>Position:</td>
  20. <td><%#Eval("Position")%></td>
  21. </tr>
  22. <tr>
  23. <td>Office:</td>
  24. <td><%#Eval("Office")%></td>
  25. </tr>
  26. <tr>
  27. <td>Salary:</td>
  28. <td><%#Eval("Salary")%></td>
  29. </tr>
  30. </table>
  31. </td>
  32. </tr>
  33. </table>
  34. </ItemTemplate>
  35. </asp:Repeater>
  36. </div>
  37. </form>
  38. </body>

Complete web form code

  1. <!DOCTYPE html>
  3. <html>
  4. <head runat="server">
  5. <title>Repeator</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div class="container py-4">
  13. <h5 class="text-center text-uppercase">Repeater control in asp.net</h5>
  14. <asp:Repeater ID="Repeater1" runat="server">
  15. <ItemTemplate>
  16. <table class="table table-bordered">
  17. <tr>
  18. <td style="width: 20%;">
  19. <img alt="" width="150" class="img-thumbnail" src='<%#Eval("Profile_Picture")%>' />
  20. </td>
  21. <td>
  22. <table class="table">
  23. <tr>
  24. <td style="width:50%;">Employee Name:</td>
  25. <td><%#Eval("Name")%></td>
  26. </tr>
  27. <tr>
  28. <td>Position:</td>
  29. <td><%#Eval("Position")%></td>
  30. </tr>
  31. <tr>
  32. <td>Office:</td>
  33. <td><%#Eval("Office")%></td>
  34. </tr>
  35. <tr>
  36. <td>Salary:</td>
  37. <td><%#Eval("Salary")%></td>
  38. </tr>
  39. </table>
  40. </td>
  41. </tr>
  42. </table>
  43. </ItemTemplate>
  44. </asp:Repeater>
  45. </div>
  46. </form>
  47. </body>
  48. </html>

Step 7

Right click and view web form code. Write the following code.

  1. using System;
  2. using System.Configuration;
  3. using System.Data;
  4. using System.Data.SqlClient;
  6. namespace BindDataControl_Demo
  7. {
  8. public partial class Repeator : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. if (!IsPostBack)
  13. {
  14. BindRepeator();
  15. }
  16. }
  18. private void BindRepeator()
  19. {
  20. string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  21. using (SqlConnection con = new SqlConnection(CS))
  22. {
  23. SqlCommand cmd = new SqlCommand("spGetEmployees", con);
  24. cmd.CommandType = CommandType.StoredProcedure;
  25. con.Open();
  26. Repeater1.DataSource = cmd.ExecuteReader();
  27. Repeater1.DataBind();
  28. }
  29. }
  30. }
  31. }

Step 8

Create a folder with name images in the project and add some images to the folder.

Step 9

Run the project by pressing Ctrl+F5.

Screenshot

ASP.NET

Conclusion

In this article, I have explained how to dynamically bind Repeater control from database step by step. I hope it will help you.