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]
  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>
  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;
  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.