Sorting Data with the ListView Control in ASP.NET 3.5

Quick Search

Navigator: Home - Display - Sorting Data with the ListView Control in ASP.NET 3.5

This tutorial will show you how to display data with the new ListView Control and also how to create headers that will sort the data like in a GridView.

Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!

Looking for more .NET Database Tutorials? Click Here!

New in the .NET Framework 3.5 is the ListView Control. This Controls is very versatile and can be used in most instances we'd normally use GridView, DataList, FormView and Repeater controls. The ListView control, much like the Repeater, is completely template-driven. This tutorial is going to show how we can use the ListView control to display data from a SQL Database, and also how we can manually add headers to the data which will allow us to sort the data. This is like the GridView control, but the ListView gives us much more flexibility.

We will start by creating a sample SQL Database with one table, which has 3 columns - id, name and age. We will be displaying the name and age and also allow sorting of both of these fields.

Once we have our database setup and added to our project, we can add our controls. We will add a ListView control and a SqlDataSource:

<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>

The ListView control looks similar to the other data controls, and works in a similar way to the Repeater, seeing as it is template-based. For this example, we are going to use the LayoutTemplate, ItemTemplate and EmptyDataTemplate of the ListView. The LayoutTemplate serves as a container for the ItemTemplate, and will look something like this:

<th>
<asp:LinkButton ID="lnkName" runat="server" CommandName="Sort"

CommandArgument="Name" Text="Name" />

</th>
<th>
<asp:LinkButton ID="lnkAge" runat="server" CommandName="Sort"

CommandArgument="Age" Text="Age" />

</th>

</tr>
</thead>
<tbody>

<asp:PlaceHolder ID="itemPlaceholder" runat="server" />

</tbody>
</table>

</LayoutTemplate>

We create an HTML table as the container and add two link buttons that will be the headers. Notice the CommandName and CommandArgument attributes that will allow us to sort the data. Also, the PlaceHolder will be replaced with the ItemTemplate because of the ID we gave it. The ItemTemplate will look like this:

</ItemTemplate>

This will output the data from the database - the ItemTemplate is rendered for each row returned from the database. Also, we start with a table row because it will replace the PlaceHolder control we created earlier.
Finally, we add the EmptyDataTemplate, which will be rendered if there are no rows returned from the database:

Sorry, no data to display.

</EmptyDataTemplate>

If there is no data returned from the database, this will be rendered by the browser only - the LayoutTemplate will not.
If we now run our web application, we will be greeted with data displayed from the website, and we should be able to click either of the Link Buttons, and the data will sort automatically.
The ASPX code will look something like this:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">