Your shopping cart is empty!
This describes how to create an AJAX-enabled Web application that can work as a to-do or task list. It helps you create a basic user interface for creating, managing, and deleting lists, and for the items in those lists. All the insert, update, delete, sort, and paging operations are performed inside an UpdatePanel control that uses Microsoft Ajax.
You can use the UpdatePanel control to enable asynchronous postbacks on a page. By default, ASP.NET refreshes the whole page when a postback occurs. However, when you use the UpdatePanel control to create asynchronous postbacks, only the page elements that are inside the UpdatePanel control are changed. This makes the page feel more dynamic and perform faster, and it provides a richer user experience.
Tasks illustrated in this walkthrough include the following:
To complete the walkthrough, you will need the following:
Creating a Web Site
In this part of the walkthrough, you create a Web site and add a page to it. In the next section, you connect to a database. If you have already created a Web site (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Studio), you can use that Web site for this walkthrough. Otherwise, create a new Web site by following these steps.
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.
To create a new file system Web site
Visual Web Developer creates the folder and a new page named Default.aspx.
Creating a New SQL Server Database
Now that you have a Web site, the next step is to create a database and add a reference to the database in Server Explorer. (In Visual Web Developer 2008 Express Edition, Server Explorer is named Database Explorer.) When you add a database to Server Explorer, you can use Visual Studio to add tables, stored procedures, views, and so on. You can also view table data or create your own queries by hand or graphically by using the Query Builder window.
To add a database to the project
Creating a Schema and Sample Data for the Database
You can use the database design and editing features to create a schema for the new table that stores the task items.
To create a schema and sample data for the database
Allow Nulls: No
Creating the Data Access Controls
In this section, you will use the LinqDataSource control and create classes that represent database entities. The control and the classes that are created are the data-access layer that will be used in this walkthrough.
The LinqDataSource control exposes Language Integrated Query (LINQ) to Web developers through the ASP.NET data-source control architecture. The LinqDataSource control creates the code for selecting, inserting, updating, and deleting objects in the database. LINQ applies the principles of object-oriented programming to relational data. It provides a unified programming model for querying and updating data from different kinds of data sources and extends data capabilities directly into the C# and Visual Basic languages. For more information about LINQ, see LINQ (Language-Integrated Query).
Mapping the Tasks Database to a SQL Data Context Object
To begin creating the data access layer, you add a typed dataset to the project.
To create a class for the TasksList table
Creating and Configuring a LinqDataSource Control
Now that you have a database table and classes that represent database entities, you can use a LinqDataSource control on an ASP.NET Web page to access the database.
To create and configure a LinqDataSource control
Using the Data Source Controls
In this section, you will add controls to the page that use the LINQ to SQL Classes file that mapped the database table to classes. You will also use the LinqDataSource control to create a basic data application.
You will add a ListView control to display data from a SQL Server database. You will then add a DropDownList control to filter the data that appears in the ListView control. Later in the walkthrough you will put the controls into an UpdatePanel control to add asynchronous postback capabilities.
Displaying Data with a ListView Control
The ListView control is useful for displaying data in any repeating structure, similar to the DataList and Repeater controls. However, unlike those controls, the ListView control supports edit, insert, and delete operations as well as sorting and paging.
You will add a ListView control that shows all the tasks. Later, you will add a drop-down list that lets you filter the data. The ListView control formats the presentation of the data and displays buttons that can be used to edit and update the content, or to insert new content.
To add a ListView control to the page
Adding a DropDownList Control to Filter Data
You can filter the data that is displayed in the ListView control by creating a drop-down list that lets you select which tasks to show. For this example, you will create a list that displays either tasks that are active or tasks that have been completed.
You can put code in the ListView control to auto-generate a Where clause to display only the records that match the selection in the DropDownList control.
To add a control to filter data
Current List Filter:
You can now test the page to make sure that it displays the data that you select.
To test the page
Adding AJAX Functionality to the Page
In this section you will add a ScriptManager control to the page to enable the AJAX features of ASP.NET. You will then add an UpdatePanel control to the page, which lets you perform tasks in the ListView control without a full page postback.
Adding a ScriptManager Control
To use any ASP.NET AJAX features such as the UpdatePanel control, you must add a ScriptManager control to the page.
To add a ScriptManager control to the page
Putting the ListView Control in an UpdatePanel Control
For this example, you will put the ListView inside an UpdatePanel control. Changes to the ListView control will not require a full postback.
To put the ListView control inside an UpdatePanel control
This code puts an UpdatePanel control around the ListView control and the DropDownList control.
You can now test the page again.