Do you remember the good old days of classic ASP when you had to create the HTML table by hand? Later ASP.NET 1.X introduced the Datagrid control which made our job much easier. Few years ago ASP.NET 2.0 was released and a new GridView control took over the classic Datagrid control. GridView ruled for few years but now there is a new grid in town which is ListView control. In this article we will learn how to display data in the ListView control.
Introduction:
Do you remember the good old days of classic ASP when you had to create the HTML table by hand? Later ASP.NET 1.X introduced the Datagrid control which made our job much easier. Few years ago ASP.NET 2.0 was released and a new GridView control took over the classic Datagrid control. GridView ruled for few years but now there is a new grid in town which is the ListView control. In this article we will learn how to display data using the ListView control.
ListView Templates:
The ListView control is used to display data in a customized format. It combines the power of the GridView and the DataList control and the flexibility of the Repeator control. ListView control is based on templates. Templates give the flexibility to customize the look and feel. Here are some of the basic templates:
LayoutTemplate
ItemTemplate
GroupTemplate
InsertItemTemplate
Populating the ListView Control:
Let’s start by filing a DataSet container with the Categories table data. Take a look at the following code:
private void BindData()
{
SqlConnection myConnection = new SqlConnection("Server=localhost;Database=Northwind;Trusted_Connection=true");
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds);
ListView1.DataSource = ds;
ListView1.DataBind();
}
And here is the HTML part of the ListView control.
<asp:ListView ID="ListView1" runat="server" >
</asp:ListView>
When you run this page you will be welcomed with the following error message.
An item placeholder must be specified on ListView 'ListView1'. Specify an item placeholder by setting a control's ID property to "itemPlaceholder". The item placeholder control must also specify runat="server".
This is quite strange since we were able to do the same when using the Datagrid and the GridView controls. For a ListView control to work you must have the ItemPlaceHolder property set to a control (mostly to a PlaceHolder control) and the ItemTemplate must be defined. So, let’s do both things.
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID=
"myItemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder ID="myItemPlaceHolder" runat="server">
</asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("CategoryName") %>
</ItemTemplate>
</asp:ListView>
In the code above we have described the ItemPlaceHolderID and the ItemTemplate. The ASP.NET PlaceHolder is placed under the LayoutTemplate of the ListView control. The purpose of the LayoutTemplate is to adjust the display when rendering. The PlaceHolder inside the LayoutTemplate whose ID is mentioned in the ItemPlaceHolderID property of the ListView control is replaced by the contents inside the ItemTemplate control.
This means that when rendering the PlaceHolder control will render the <%# Eval(“CategoryName”) %>. If you run the example above you will see the following output:
Beverages Edite Condiments Confections Dairy Products Grains/Cereals Meat/Poultry Produce Seafood Something Beverages Beverages New Category New Category Category Aaaaaa Aaaaaa
The output looks pretty bad since there is no formatting. No worries because we can easily add formatting using the ItemTemplate and the LayoutTemplate. Take a look at the code below:
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID=
"myItemPlaceHolder">
<LayoutTemplate>
<h2>Categories</h2>
<asp:PlaceHolder ID="myItemPlaceHolder" runat="server">
</asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<li>
<%# Eval("CategoryName") %>
</li>
</ItemTemplate>
</asp:ListView>
Now, the Eval(“CategoryName”) is placed inside the “<LI>” (list item) tags. Also, we have added the heading “Categories” before the PlaceHolder inside the LayoutTemplate. This gives a heading to the listing as shown below:
Conclusion:
In this article we introduced the ListView control which is part of the ASP.NET 3.5 framework. In the future articles we will see different aspects of the ListView control.
If you are interested in watching a video related to this article then click on the following link:
Video: Introduction to the ListView Control
I hope you liked the article, happy programming!