Post
Ask Question

ListView Control in ASP.NET

The ListView control displays columns and rows of data and allows sorting and paging. It is by far the most popular data display control, and is ideal for understanding how data display controls interact with data retrieval controls and code.

Note: For interactions with a database like Create, Read, Update and Delete, you should have prior knowledge of SQL.

I will discuss following processes to bind ListView Control:
  1. SQL Server Express
  2. Microsoft SQL Server

1. Data Access in ListView Control by SQL Server Express

First create a new web page, if you don't know how to create a web page then just see the previous tutorial. Now switch to Design View and drag the ListView control from the Toolbox directly onto the design surface. See in Figure 1.

Image1.jpg
Figure 1

Now choose the data source over the ListView's right side. See in Figure 2.

Image2.jpg 
Figure 2

Now you see the Data Source Configuration Wizard, here you can choose the Data Source type, like Access, SQL, Entity, LINQ etcetera. Then choose the SQL Database as you are familiar with. In the bottom specify an ID for the data source; by default it is SqlDataSource1; just choose this name or change it as per you prefer. See Figure 3.

Image3.jpg
Figure 3

Now choose your new Data Connection & Server name. See Figures 4 & 5.

Image4.jpg
Figure 4

Image5.jpg
Figure 5

In the Add Connection window, for example the server name is CAMPUSWO-1703D3. Here you can choose Windows Authentication or SQL Server Authentication.

After authentication, choose the database name. We will discuss another option in future tutorials. Now test your connection; if it is successful then proceed to the next section. See Figure 6.

Image6.jpg
Figure 6

Now you see your server name along with the database. See Figure 7.

Image7.jpg
Figure 7

Now you see a Connection String for SQL Server Express. See Figure 8.

Image8.jpg
Figure 8

Next, configure the database table or Stored Procedure from which the data will be retrieved. I have chosen the Categories table as an example. Here you can choose to order by or use advanced SQL commands. See Figure 9.

Image9.jpg
Figure 9

Now test the query and see the results. See Figure 10.

Image10.jpg
Figure 10

After finishing the test query, now see the source file in "default.aspx" as below:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListView.aspx.cs" Inherits="ListView"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head2" runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form2" runat="server">  
  9.     <div>  
  10.         <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">  
  11.         </asp:ListView>  
  12.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
  13.             ConnectionString="<%$ ConnectionStrings:BlogEngineConnectionString %>"  
  14.             SelectCommand="SELECT * FROM [Comments]"></asp:SqlDataSource>  
  15.     </div>  
  16.     </form>  
  17. </body>  
  18. </html>
But the code above is not finished until you make a design and data bound for the ListView. Now we will make a LayoutTemplate & ItemTemplate in a table then bind it with the columns of the SQL table named "Comments" as you see in Figure 10. Now see the following complete code.

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListView.aspx.cs" Inherits="ListView"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title>ListView Control - ASP.NET Tutorials</title>  
  6.     <style type="text/css">  
  7.         .TableCSS   
  8.         {   
  9.             border-style:none;   
  10.             background-color:#3BA0D8;   
  11.             width: 850px;   
  12.         }   
  13.         .TableHeader   
  14.         {   
  15.             background-color:#66CCFF;   
  16.             color:#0066FF;   
  17.             font-size:large;   
  18.             font-family:Verdana;   
  19.             }   
  20.         .TableData   
  21.         {   
  22.             background-color:#82C13E;  
  23.             color:#fff;   
  24.             font-family:Courier New;   
  25.             font-size:medium;   
  26.             font-weight:bold;   
  27.         }  
  28.     </style>  
  29. </head>  
  30. <body>  
  31.     <form id="form1" runat="server">  
  32.     <div>  
  33.     <h2 style="color:#3BA0D8; font-style:italic;">ListView Control Example in ASP.NET: How To Use ListView Control</h2>     
  34.         <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">   
  35.             <LayoutTemplate>   
  36.                 <table id="Table1" runat="server" class="TableCSS">   
  37.                     <tr id="Tr1" runat="server" class="TableHeader">   
  38.                         <td id="Td1" runat="server">Comment ID</td>   
  39.                         <td id="Td2" runat="server">Blog ID</td>   
  40.                         <td id="Td3" runat="server">Date</td>   
  41.                         <td id="Td4" runat="server">Name</td>   
  42.                         <td id="Td5" runat="server">Comments</td>   
  43.                     </tr>   
  44.                     <tr id="ItemPlaceholder" runat="server">   
  45.                     </tr>   
  46.                     <tr id="Tr2" runat="server">   
  47.                         <td id="Td6" runat="server" colspan="2">   
  48.                             <asp:DataPager ID="DataPager1" runat="server">   
  49.                                 <Fields>   
  50.                                     <asp:NextPreviousPagerField ButtonType="Link" />   
  51.                                     <asp:NumericPagerField />   
  52.                                     <asp:NextPreviousPagerField ButtonType="Link" />   
  53.                                 </Fields>   
  54.                             </asp:DataPager>   
  55.                         </td>   
  56.                     </tr>   
  57.                 </table>   
  58.             </LayoutTemplate>   
  59.             <ItemTemplate>   
  60.                 <tr class="TableData">   
  61.                     <td>   
  62.                         <asp:Label  ID="Label1" runat="server" Text='<%# Eval("id")%>'>   
  63.                         </asp:Label>   
  64.                     </td>   
  65.                     <td>   
  66.                         <asp:Label  ID="Label2" runat="server" Text='<%# Eval("Blog_id")%>'>   
  67.                         </asp:Label>   
  68.                     </td>  
  69.                     <td>   
  70.                         <asp:Label  ID="Label3" runat="server" Text='<%# Eval("Date")%>'>   
  71.                         </asp:Label>   
  72.                     </td>  
  73.                     <td>   
  74.                         <asp:Label  ID="Label4" runat="server" Text='<%# Eval("Name")%>'>   
  75.                         </asp:Label>   
  76.                     </td>  
  77.                     <td>   
  78.                         <asp:Label  ID="Label5" runat="server" Text='<%# Eval("Comment")%>'>   
  79.                         </asp:Label>  
  80.                     </td>   
  81.                 </tr>                   
  82.             </ItemTemplate>   
  83.         </asp:ListView>  
  84.         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:BlogEngineConnectionString %>" SelectCommand="SELECT * FROM [Comments]"></asp:SqlDataSource>     
  85.     </div>  
  86.     </form>  
  87. </body>  
  88. </html>

Now finally see the output in a browser by pressing F6 (Build) and F5 (Debug). See Figure 11.

Image11.jpg
Figure 11

2. Data Access in ListView Control by SQL Server

Now we will learn how to fill a ListView by SQL Server queries and ASP.NET classes. First drag a ListView control in design view. See Figure 1.

Now by pressing F7 you will see code-behind files. We will write SQL Server queries and ASP.NET classes here. See Figure 12.

Image12.jpg
Figure 12

Here is the code-behind files in "default.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 System.Data.SqlClient;  
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         SqlConnection con = new SqlConnection("data source=(local);database=BlogEngine;Integrated Security=true;");  
  14.         SqlDataAdapter da = new SqlDataAdapter("select * from Comments", con);  
  15.         DataSet ds = new DataSet();  
  16.         da.Fill(ds, "FillComent");  
  17.         ListView1.DataSource = ds.Tables["FillComent "];  
  18.         ListView1.DataBind();  
  19.     }  
  20. }

 


Similar Articles