Walkthrough: Modifying Data Using the ListView Web Server Control
The ASP.NET ListView control has built-in functionality that enables users to insert, edit, or delete records without requiring programming.
This walkthrough shows you how to display and update data by using the ListView control. This walkthrough uses a SqlDataSource control to retrieve results from the data source and to manage updates. The SqlDataSource control acts as the data source for the ListView control.
Tasks illustrated in this walkthrough include:
Displaying data that is returned from a database in the ListView control.
Adding the ability to edit, insert, and delete records to the ListView control.
A Visual Studio project with source code is available to accompany this topic: Download.
Prerequisites
In order to complete this walkthrough, you will need:
Visual Studio 2010 or Visual Web Developer 2010 Express.
An ASP.NET Web site or Web application project. For an example of how to create a Web project, see Walkthrough: Creating a Basic Web Page in Visual Studio.
Access to the School sample database. You can download the School sample database from the CodePlex Web site. It is also included in the Visual Studio sample project that is available for this walkthrough. (Download)
Enabling Users to Modify Data by Using the ListView Control
In this section, you will add a ListView control to the page and configure it to display and modify data from the Course table of the School database.
To display and modify 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 School database file (School.mdf).
Note
This step will make a copy of the School.mdf file in the App_Data folder.
Switch to or open the Default.aspx file.
Switch to Design view.
From the Data tab of the Toolbox, drag a ListView control onto the page.
In the ListView Tasks menu, in the Choose Data Source drop-down list, click <New data source…>.
The following illustration shows the Common ListView Tasks menu.
.png "ListView Tasks")
The Data Source Configuration wizard is displayed. The following illustration shows the Data Source Configuration wizard.
.png "Data Source Configuration Wizard")
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 School.mdf from the list.
Click Next.
The wizard displays a page where you can choose to store the connection string in the configuration file. Storing the connection string in the configuration file has the following advantages:
You can easily change the connection string from a test or development server to a production server without modifying your code.
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 Configure Data Source wizard is displayed, where you can specify the data that you want to retrieve from the database.
Select Specify columns from a table or view option. The following illustration shows the Configure Data Source wizard.
.png "Configure the Select Statement")
Select the Course table, and then check the asterisk (*) check box to select all the columns.
Select the Advanced button.
Select the Generate INSERT, UPDATE, and DELETE statements check box, then select the OK button.
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.
Right-click the ListView control, click Show Smart Tag.
In the ListView Tasks menu, click Configure ListView.
The Configure ListView dialog box is displayed.
Under Options, select the Enable Editing, Enable Inserting, and Enable Deleting check boxes. The following illustration shows the Configure ListView dialog box.
.png "Configure ListView")
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 Blues.
Click OK.
The configured ListView control might look like the following illustration.
.png "Configured ListView")
You can now test the ListView control.
To test the page
Press CTRL+F5 to run the page.
The ListView control is displayed with CourseID, Title, Credits, and DepartmentID columns.
Click the Edit button to modify a record in the table.
Change the values and then click Update, or click Cancel to cancel the edit operation.
Enter values for the fields in the bottom of the page and click Insert to insert a new record. For the departmentID, you must enter 1, 2, 4 or 7.
Click the Delete button of the record you just inserted to delete the record from the database.
Next Steps
This walkthrough has shown you the basic steps for using a ListView control to display and edit data records by using a custom layout. The ListView control enables you to perform more sophisticated formatting than what you have done in this walkthrough. To explore other possible scenarios with the ListView control, see ListView Web Server Control Overview.
See Also
Tasks
Walkthrough: Displaying, Paging, and Sorting Data Using the ListView Web Server Control
How To: Secure Connection Strings when Using Data Source Controls
Walkthrough: Basic Data Access in Web Pages