Walkthrough: Displaying, Paging, and Sorting Data Using the ListView Web Server Control

Article
12/04/2014

In this walkthrough, you will work with the ListView control, which enables you to display data from a data source in a format that you define by using templates. By working with templates, you can have complete control over the layout and appearance of the data in the control. The ListView control automatically supports edit, insert, and delete operations as well as sorting and paging functionality.

The walkthrough illustrates the following tasks:

Using the ListView control to display data from a database.
Adding paging functionality to the ListView control.
Adding sorting functionality to the ListView control.

Prerequisites

In order to complete this walkthrough, you will need:

Visual Studio or Visual Web Developer Express installed on your computer.

Note

If you are using Visual Studio, the walkthrough assumes that you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.
SQL Server Express. By default, this is installed with Visual Studio or Visual Web Developer Express. If you have SQL Server installed, you can use that instead, but you must make small adjustments to some of the procedures.
The AdventureWorks database installed on your computer. For information about how to download and install the SQL Server sample AdventureWorks database, see Installing Sample Databases for Express Editions on the Microsoft SQL Server Web site.
A user name and password for a SQL Server account that has access to the AdventureWorks database.

Creating the Web Site

If you have already created a Web site (for example, by completing Walkthrough: Creating a Basic Web Forms Page in Visual Studio ), you can use that Web site and go to the next section. Otherwise, create a new Web site and page.

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects in Visual Studio.

To create a file system Web site

Open Visual Studio or Visual Web Developer Express.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Installed Templates, click Visual Basic or Visual C# and then select ASP.NET Web Site.
In the Web location box, select File System, and then enter the name of the folder where you want to keep the pages for your Web site.

For example, type the folder name C:\WebSites.
Click OK.

Visual Studio creates a Web site project that includes prebuilt functionality for layout (a master page, the Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files), and for authentication (ASP.NET membership).

Displaying and Paging Through Data in the ListView Control

To display data on an ASP.NET Web page, you need the following:

A connection to a data source such as a database. In the following procedure, you will create a connection to the SQL Server AdventureWorks database.
A data source control on the page, which interacts with the data source (the database) to read and write data. In this walkthrough, you will use a SqlDataSource control that interacts with the SQL Server AdventureWorks database.
A control on the page to display the data. In the following procedure, you will display data in a ListView control, which gets its data from the SqlDataSource control.

To display and page through data in the ListView control

If the Web site does not have an App_Data folder, in Solution Explorer, right-click the project, click Add ASP.NET Folder, and then click App_Data.
In Solution Explorer, right-click the App_Data folder, and then click Add Existing Item.

The Add Existing Item dialog box is displayed.
Enter the location of the AdventureWorks database file (AdventureWorks_Data.mdf).

By default, the .mdf file is installed in the path C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

Note

This procedure will create a copy of the database file in the project. The database file is large. If it is impractical to make a copy of the database, you can connect to it by using an alternative method, such as attaching the database file directly. However, the procedure for doing this is not covered in this walkthrough.
In Solution Explorer, right-click the project and select Add New Item.

The Add New Item dialog box is displayed.
Under Installed Templates select Visual Basic or Visual C#, and then select Web Form.
Enter Sample.aspx as the name for the new Web page and then click Add.
Switch to Design view.
From the Data tab of the Toolbox, drag a ListView control onto the page.
On the Common ListView Tasks menu, in the Choose Data Source drop-down list, click <New data source…>.

The Data Source Configuration wizard is displayed.
Click Database.

This specifies that you want to get data from a database that supports SQL statements, which includes SQL Server and other OLE-DB–compatible databases.
In the Specify an ID for the data source box, a default data source control name, SqlDataSource1, is displayed. You can leave this name.
Click OK.

The Configure Data Source wizard is displayed.
Under Which data connection should your application use to connect to a database?, select AdventureWorks_Data.mdf from the list.
Click Next.

The wizard displays a page where you can specify that you want to store the connection string in the configuration file. Storing the connection string in the configuration file has two advantages:
- It can be more secure than storing it in the page.
- You can use the same connection string in multiple pages.
Make sure that the Yes, save this connection as check box is selected, and then click Next. You can leave the default connection string name.

The wizard displays a page where you can specify what data you want to retrieve from the database.
Select the Specify a custom SQL statement or stored procedure option.

Note

Typically, you would use the option Specify columns from a table or view. However, because the AdventureWorks database has schema names, in this walkthrough you will create a custom SQL statement.
Click Next
In the Define Custom Statements or Stored Procedures page, enter the following SQL query, which retrieves contact data from the AdventureWorks database.
```
SELECT  ContactID, FirstName, LastName, EmailAddress
FROM    Person.Contact
```
You can also click Query Builder and use the Query Builder window to create a query and then validate it by using the Execute Query button.

Note

The wizard lets you specify selection criteria (Where clauses) and other SQL query options. For this walkthrough, you will create a simple statement that has no selection or sort criteria.
Click Next.
Click Test Query to make sure that you are retrieving the data that you want.
Click Finish.

The wizard creates a SqlDataSource control and adds it to the page. The ListView control that you added earlier is bound to the SqlDataSource control.

If you view the properties for the SqlDataSource control, you will see that the wizard has created values for the ConnectionString and SelectCommand properties.
Right-click the ListView control, click Show Smart Tag.
On the Common ListView Tasks menu, click Configure ListView.

The Configure ListView dialog box is displayed.
Select Enable Paging.

Note

You might also want to select a different style, which can make it easier to view the data. To do this, under Select a Style, select a style such as Colorful.

The wizard creates the templates for the ListView control, based on the columns in the query. You can customize the layout by editing the templates that contain the layout elements, controls, and binding expressions.
Click OK.

Before proceeding, you can test the ListView control.

To test the ListView control

Press CTRL+F5 to run the page.

The ListView control is displayed with ContactID, FirstName, LastName, and EmailAddress columns.
Click the First, Previous, Next, and Last buttons at the bottom of the page in order to page through data.
When you have finished, close the browser.

Adding Sort Capability to the ListView Control

You will now add sort capability to the ListView control. You can provide this capability by adding a button to the ListView control and configuring the button.

To add sorting capability to the ListView control

In the Default.aspx file, switch to Source view.
From the Standard tab of the Toolbox, drag two Button controls and drop them after the table element that is in the LayoutTemplate element.
In the Properties window, change the properties of the buttons as follows:
- For the first button, set the Text property to "Sort by First Name", the CommandName property to "Sort", and the CommandArgument to "FirstName".
- For the second button, set the Text property to "Sort by Last Name", the CommandName property to "Sort", and the CommandArgument to "LastName".
The buttons' CommandArgument properties are set to a sort expression. For database data, this is typically the name of a column.
Save the page.

You can now test the page again.

To test sorting

Press CTRL+F5 to run the page.
Click the Sort by First Name and Sort by Last Name buttons to sort the data in different ways.
Click a button repeatedly to switch between ascending and descending sort order.

Next Steps

This walkthrough has shown you the basic steps for using a ListView control to display, page, and sort data records by using one of the layouts provided for the control. You might want to experiment with additional features of the ListView control and explore different scenarios. For example, you might want to edit, delete, and insert records. For more information, see Walkthrough: Modifying Data Using the ListView Web Server Control.