In this article I will explain with an example, how to populate the ASP.Net ListView control from database and repeat the ListView Items horizontally using its GroupItemCount property in ASP.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Following HTML markup consists of an ASP.Net ListView control. The ListView control will be displayed in HTML Table Layout.
The ListView has the following Templates:
LayoutTemplate
This determines the layout of the whole ListView. This section of ListView will have a PlaceHolder enclosed in HTML tags.
An HTML Table has been placed inside the LayoutTemplate.
ItemTemplate
This contains the actual DataBound items which will be populated from Database, similar to the ItemTemplate of ASP.Net GridView or DataList controls.
Inside the ItemTemplate, records will be populated from the database.
GroupTemplate
This plays the vital role in repeating the ListView items horizontally, and it is associated with the GroupItemCount property. This section of ListView will have a PlaceHolder enclosed in HTML tags.
The GroupPlaceHolder will display the contents from GroupTemplate.
<asp:ListView ID="lvCustomers" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td>
<b><u><span class="name">
<%# Eval("ContactName") %></span></u></b>
</td>
</tr>
<tr>
<td>
<b>City: </b><span class="city"><%# Eval("City") %></span><br />
<b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
<b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
<b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
<b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>
You need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Binding the ASP.Net ListView control with data
Inside the Page Load event, the ListView is populated with records from the Customers table of the Northwind database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateData();
}
}
private void PopulateData()
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 10 * FROM Customers";
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
lvCustomers.DataSource = dt;
lvCustomers.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.PopulateData()
End If
End Sub
Private Sub PopulateData()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT TOP 10 * FROM Customers"
Using cmd As New SqlCommand(query)
Using con As New SqlConnection(conString)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable()
sda.Fill(dt)
lvCustomers.DataSource = dt
lvCustomers.DataBind()
End Using
End Using
End Using
End Using
End Sub
Screenshot
Demo
Downloads