Walkthrough: Building a Data-Driven Web Site Using ASP.NET Dynamic Data
Introduction
This walkthrough shows you how to create a basic application that uses ASP.NET Dynamic Data. Dynamic Data enables you to create a data-driven Web site with minimal or no code.
In this walkthrough you will build an application that displays pages of Categories, Customers, Employees, and Products data from the Northwind sample database. The following example shows the data-driven Web site that you create by following the steps of this walkthrough.
In order to complete this walkthrough, you will need:
-
Visual Studio 2008 or Visual Web Developer 2008 Express Edition.
-
ASP.NET 3.5 Extensions Preview (December 2007). You can download the preview release from the ASP.NET Web site.
-
The Northwind sample database. For information about how to download and install the SQL Server sample Northwind database, see Installing Sample Databases for Express Editions on the Microsoft SQL Server Web site.
Creating a Dynamic Data Web Site
You can create Dynamic Data Web sites in Visual Studio by using a Web site template.
To create a Dynamic Data Web Site
-
Start Visual Studio.
-
In the File menu, click New, and then click Web Site.
The New Web Site dialog box is displayed.
-
Under Visual Studio installed templates, select Dynamic Data Web Site.
-
In the first Location box, select File System, and in the second box, enter the name of the folder where you want to keep the pages of the Web site.
For example, enter the folder name C:\WebSites\DynamicData.
-
In the Language list, click the programming language that you prefer to work in.
-
Click OK.
Visual Studio creates the folder and the structure for the Web site.
-
Open the Web.config file.
-
Find the DynamicData section and change the value of the enableTemplates property to true.
This enables the automatic scaffolding of the data model.
Caution
Enabling the scaffolding can pose a security risk because you are exposing all the tables in the data model for display and edit operations.
-
Save and close the Web.config file.
Adding Data to the Web Site
The next step is to add a database to the project and then create classes to represent database entities by using a tool provided by Visual Studio.
To add the database file to the project
-
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 where you installed the Northwind database file (Northwnd.mdf).
By default, the .mdf file is installed in the path C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\Northwnd.mdf.
Note
This procedure will create a copy of the database file in the project. 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.
To create the database model
-
If the Web site does not already have an App_Code folder, in Solution Explorer, right-click the project, click Add ASP.NET Folder, and then click App_Code.
-
Right-click the App_Code folder and then click Add New Item.
-
Under Visual Studio installed templates, click LINQ to SQL Classes.
-
In the Name box, enter a name for the database model.
For example, enter the name Northwind.dbml.
-
Click Add.
The Object Relational Designer (O/R Designer) is displayed.
-
In the O/R Designer, click the Server Explorer link.
-
In Server Explorer (Database Explorer in Visual Web Developer Express Edition), under Data Connections, expand the database file node and then the Tables node.
-
Drag the Categories, Customers, Employees, and Products tables into the O/R Designer window.
Each table is represented as an entity that is named for the corresponding database table, but in the singular form.
-
Save the Northwind.dbml file.
-
In Solution Explorer, open the Northwind.designer.cs or Northwind.designer.vb file.
Notice that it now has the NorthwindDataContext, Category, Customer, Employee, and Product classes. The NorthwindDataContext class represents the database, and the Category, Customer, Employee, and Product classes represent database tables. The parameterless constructor for the NorthwindDataContext class reads the connection string from the Web.config file.
-
Open the Web.config file.
Notice that the connection string has been added in the connectionStrings element.
-
Close the class file and the Web.config file.
Testing the Dynamic Data Web Site
You can now test the Dynamic Data Web site that you just created.
To test the page
-
Press CTRL+F5 to run the page.
The page displays a list that contains the tables that you added to the data model.
-
Click one of the tables.
A page is displayed that contains the data from the table that you selected.
-
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.
-
Click the Select button to select a record in the table.
The details of the selected record are displayed in the second table.
-
In the second grid, click the New button to create a new record.
-
Provide the new record information and then click Insert, or click Cancel to cancel the insert operation.
-
Click the Delete button to delete the record you just created from the table.
-
Click the page numbers to navigate through the records.
-
When you have finished, close the browser.
This walkthrough illustrates how you can create a basic Dynamic Data Web site without writing any code. From here, you can begin to explore the feature and extend the default behavior and architecture.
This topic is ASP.NET Extensions documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases.