Post
Ask Question

Dynamically Bind Repeater Control In ASP.NET From Database - Part Six

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]  
  13.   
  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>  
  2.   
  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;  
  5.   
  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.         }  
  17.   
  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.


Similar Articles