ListView Control in ASP.NET 3.5

This tutorial will server as an introduction to the new Control added to the 3.5 .NET Framework.

The ListView Control is a new addition to the .NET Framework 3.5 and this tutorial will serve as an introduction to this Data Control and what we can use it for.

The ListView Control is somewhat of a hybrid of the existing Data Controls in the .NET framework. We can use the ListView in many places we have used the GridView, FormView, DataList, and Repeater before. The ListView has entirely template-based like the Repeater, and has 11 templates to customize.
In this example, we will be looking at the LayoutTemplate, ItemTemplate, AlternatingItemTemplate and the EmptyDataTemplate.

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

The LayoutTemplate is used for the containing element of the ListView's contents; the ItemTemplate is used to specify how each item is displayed; AlternatingItemTemplate is used to specify how every other item is displayed; and the EmptyDataTemplate is used when there is no data to display.

We start by creating a new web site in VS.NET 2008, and adding a SQL Database to our project. For this example, we will use a table with three columns - id, name and age. Once we have our database and some sample data, we can begin. We will start by adding the ListView Control and a SqlDataSource:

<form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> </asp:ListView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [tblPeople]"></asp:SqlDataSource> </form>

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

We use the DataSource to select everything from our table in the datbase, and then we assign the DataSource to the ListView. The ListView control looks like every other ASP.NET Control, and works similarly.
Next, we will add the first template, the LayoutTemplate:

<LayoutTemplate> <div style="border:dotted 1px black;"> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </div> </LayoutTemplate>

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

This template specifies the container for the contents of the ListView. We have put a PlaceHolder in here, but this will never get rendered by the browser. The PlaceHolder will be replaced by the contents of the ItemTemplate. We could - in theory - use any server control with the ID of itemPlaceholder and it would work, but PlaceHolder is generally the default control to use. Next, we define the ItemTemplate and AlternatingItemTemplate:

<ItemTemplate> <%# Eval("name") %>, <%# Eval("age") %> %> </ItemTemplate> <AlternatingItemTemplate> <div style="border:dotted 1px gray;background-color:silver;"> <%# Eval("name") %>, <%# Eval("age") %> </div> </AlternatingItemTemplate>

We use these templates to display the Name and Age from our database. Each record will use these templates.
Finally, we add the EmptyDataTemplate. This will be used if there is no data returned from the database:

<EmptyDataTemplate> Sorry, no data to display. </EmptyDataTemplate>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

After we have added these templates, we can run the web application to see what we have. We should have a tabular view of records output from the database, with alternating styled cells (divs).
The ASPX code will look something like this:

<form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> <LayoutTemplate> <div style="border:dotted 1px black;"> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </div> </LayoutTemplate> <ItemTemplate> <%# Eval("name") %>, <%# Eval("age") %> </ItemTemplate> <AlternatingItemTemplate> <div style="border:dotted 1px gray;background-color:silver;"> <%# Eval("name") %>, <%# Eval("age") %> </div> </AlternatingItemTemplate> <EmptyDataTemplate> Sorry, no data to display. </EmptyDataTemplate> </asp:ListView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [tblPeople]"></asp:SqlDataSource> </form>

Looking for more ASP.NET Tutorials? Click Here!