Post
Ask Question

Dynamically Bind ListView Control In ASP.NET From Database - Part Five

Introduction

In this article, I will demonstrate how to dynamically bind ListView control in ASP.NET from a database and display the values of a data source by using user-defined templates. The ListView control enables users to select, sort, delete, edit, and insert records.

Step 1

Create a database table in SQL Server 2014.

  1. CREATE TABLE [dbo].[Customers](  
  2.     [CustomerID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [CustomerName] [nvarchar](50) NULL,  
  4.     [Gender] [char](10) NULL,  
  5.     [City] [nvarchar](50) NULL,  
  6.     [State] [nvarchar](50) NULL,  
  7.     [Country] [nvarchar](50) NULL,  
  8.  CONSTRAINT [PK_Customers] PRIMARY KEY CLUSTERED   
  9. (  
  10.     [CustomerID] 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].[spGetAllCustomers]  
  2. AS  
  3. BEGIN  
  4. SELECT CustomerID,CustomerName,Gender,City,State,Country from [dbo].[Customers]  
  5. END  

Screenshot of database table

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 of your project and then click on OK as shown in below screenshot.

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 database connect. Write 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 choose Web Form and click.

Screenshot adding web form 1

ASP.NET 
 
After clicking on web form one window will appear, give a name to web form such as ListView or any meaningful name. Click on OK and web form will be added in project.

Screenshot adding web form 2

ASP.NET 

Step 5

Add script and styles of bootstrap in head section of 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 ListView control on web form. Design ListView control.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-4">  
  4.             <h5 class="text-uppercase text-center">ListView control in asp.net</h5>  
  5.             <asp:ListView ID="ListView1" runat="server">  
  6.                 <LayoutTemplate>  
  7.                     <table class="table table-bordered table-striped">  
  8.                         <tr class="bg-danger text-white">  
  9.                             <th>Customer ID</th>  
  10.                             <th>Customer Name</th>  
  11.                             <th>Gender</th>  
  12.                             <th>City</th>  
  13.                             <th>State</th>  
  14.                             <th>Country</th>  
  15.                         </tr>  
  16.                         <tbody>  
  17.                             <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />  
  18.                         </tbody>  
  19.                     </table>  
  20.                 </LayoutTemplate>  
  21.                 <ItemTemplate>  
  22.                     <tr>  
  23.                         <td><%# Eval("CustomerID")%></td>  
  24.                         <td><%# Eval("CustomerName")%></td>  
  25.                         <td><%# Eval("Gender")%></td>  
  26.                         <td><%# Eval("City")%></td>  
  27.                         <td><%# Eval("State")%></td>  
  28.                         <td><%# Eval("Country")%></td>  
  29.                     </tr>  
  30.                 </ItemTemplate>  
  31.             </asp:ListView>  
  32.         </div>  
  33.     </form>  
  34. </body>  

Complete web form code

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>ListView</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-uppercase text-center">ListView control in asp.net</h5>  
  14.             <asp:ListView ID="ListView1" runat="server">  
  15.                 <LayoutTemplate>  
  16.                     <table class="table table-bordered table-striped">  
  17.                         <tr class="bg-danger text-white">  
  18.                             <th>Customer ID</th>  
  19.                             <th>Customer Name</th>  
  20.                             <th>Gender</th>  
  21.                             <th>City</th>  
  22.                             <th>State</th>  
  23.                             <th>Country</th>  
  24.                         </tr>  
  25.                         <tbody>  
  26.                             <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />  
  27.                         </tbody>  
  28.                     </table>  
  29.                 </LayoutTemplate>  
  30.                 <ItemTemplate>  
  31.                     <tr>  
  32.                         <td><%# Eval("CustomerID")%></td>  
  33.                         <td><%# Eval("CustomerName")%></td>  
  34.                         <td><%# Eval("Gender")%></td>  
  35.                         <td><%# Eval("City")%></td>  
  36.                         <td><%# Eval("State")%></td>  
  37.                         <td><%# Eval("Country")%></td>  
  38.                     </tr>  
  39.                 </ItemTemplate>  
  40.             </asp:ListView>  
  41.         </div>  
  42.     </form>  
  43. </body>  
  44. </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 ListView : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.             if (!IsPostBack)  
  13.             {  
  14.                 BindListView();  
  15.             }  
  16.         }  
  17.         private void BindListView()  
  18.         {  
  19.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  20.             using (SqlConnection con = new SqlConnection(CS))  
  21.             {  
  22.                 SqlCommand cmd = new SqlCommand("spGetAllCustomers", con);  
  23.                 cmd.CommandType = CommandType.StoredProcedure;  
  24.                 con.Open();  
  25.                 ListView1.DataSource = cmd.ExecuteReader();  
  26.                 ListView1.DataBind();  
  27.             }  
  28.         }  
  29.     }  
  30. }  

Step 8

Run the project ctrl+F5

Screenshot

ASP.NET 

Conclusion

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


Similar Articles