In this article I will explain with an example, how to populate the
ListView control from database and repeat the columns horizontally using
GroupTemplate in ASP.Net using C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
HTML Markup
The following HTML Markup consists of:
ListView – For displaying data.
The
ListView consists of following Templates.
LayoutTemplate – For determining the layout of the whole ListView.
GroupTemplate – For repeating the ListView items horizontally and it is associated with the GroupItemCount property.
ItemTemplate – For containing the DataBound items which will be populated from database.
The LayoutTemplate and GroupTemplate consist of PlaceHolder and ItemTemplate consist of Eval function for binding ContactName.
<asp:ListView ID="lvCustomers" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table>
<asp:PlaceHolder ID="groupPlaceHolder1" runat="server"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder ID="itemPlaceHolder1" runat="server"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" 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>
Namespaces
You will 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 handler,
GetData method is called and it is assigned to the
DataSource property of the
ListView.
Inside the GetData method, the records are fetched from the Customers table of Northwind database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
lvCustomers.DataSource = this.GetData();
lvCustomers.DataBind();
}
}
private DataSet GetData()
{
string sql = "SELECT ContactName, City, PostalCode, Country, Phone, Fax FROM Customers";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
{
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
lvCustomers.DataSource = Me.GetData()
lvCustomers.DataBind()
End If
End Sub
Private Function GetData() As DataSet
Dim sql As String = "SELECT ContactName, City, PostalCode, Country, Phone, Fax FROM Customers"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using sda As SqlDataAdapter = New SqlDataAdapter(sql, con)
Using ds As DataSet = New DataSet()
sda.Fill(ds)
Return ds
End Using
End Using
End Using
End Function
Screenshot
Demo
Downloads