In this article I will explain with an example, how to use HTML Table layout in ListView control 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 HTML Markup consists of following controls:
ListView – For displaying data.
The ListView has been assigned with the following properties:
Properties:-
GroupItemCount – It defines the number of items to be displayed in each group.
GroupPlaceholderID – It accepts ID of the PlaceHolder control which will be used to render its group PlaceHolders.
GroupPlaceholderID – It accepts ID of the PlaceHolder control which will be used to render its item PlaceHolders.
The ListView consists of LayoutTemplate, GroupTemplate and ItemTemplate.
LayoutTemplate – For determining the layout of the whole ListView.
GroupTemplate – For repeating the ListView items horizontally and it is associated with the GroupItemCount property.
The LayoutTemplate and GroupTemplate consist of PlaceHolder.
<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 in ASP.Net
Inside the Page Load event handler, the GetData method is called and it is assigned to the DataSource property of the ListView.
Inside the GetData method, the DataTable is returned with records 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 TOP 10 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 (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
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 DataTable
Dim sql As String = "SELECT TOP 10 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 DataTable = New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Function
Screenshot
![How to use table layout in ListView control in ASP.Net]()
Demo
Downloads
