OakLeaf Systems: ASP.NET Dynamic Data: Scaffold a Custom Administrative Web Site with a LINQ to SQL Data Model in Less than Five Minutes

Saturday, June 14, 2008

ASP.NET Dynamic Data: Scaffold a Custom Administrative Web Site with a LINQ to SQL Data Model in Less than Five Minutes

This screen capture sequence illustrates the “Use the Wizard to Generate Custom Pages” topic of the Scaffold Web Apps with ASP.NET Dynamic Data cover story for the September 2008 issue of Visual Studio Magazine. The topic describes how to create a fully-functioning file-system Web site from the Northwind sample database.

Step 1: Launch Visual Studio 2008 or Web Developer Express SP1, start a new file-system Web site and select the Dynamic Data Website Wizard (Preview) template.

Step 2: Accept the Generate a New Data Model from This Database option and select a connection to an SQL Server instance with the Northwind sample database installed.

Step 3: Select the only the original Northwind tables to install; omit the Regions and Territories tables. (The May 23, 2008 Dynamic Data preview was limited to LINQ to SQL as the data model. If your version of this dialog has a Data Context Namespace text box, leave it empty.)

Step 4: Scaffold all eight EntitySets for your project with List, Details, Edit and Insert pages.

Step 5: Accept the default customization options. You can remove features that use DetailsView or FormView controls or elect to edit or insert pages inline with GridView or ListView controls.

Step 6: Click Edit to open the Edit Fields dialog. Clear columns for properties of the selected entity that you don’t want to appear in the GridView or ListView control. (This dialog was not fully cooked in the May 23, 2008 release on which this post is based.) Click OK and then click Finish.

Step 7: Generating the scaffolding code will add several files to existing project folders. Mark the Apply to All Items check box and click Yes to avoid repeated appearances of the Merge folders message box.

Step 8: Review and optionally rearrange the singularized EntityType widgets. Notice the addition of a prebuilt NorthwindDataContextPartialClass file and addition of a CustomPages subfolder for each EntitySet. (Click image for an 1024 x 768 screen capture.)

Step 9: Press F5 to build and run the project, clicking OK to dismiss the Debugging Not Enabled message box.

Step 10: Notice the insertion of the Web site name after the Domain:Port name and number for the default and other pages.

Step 11: Click Products to display the Products ListView. Notice that a column for ProductID is missing and that Category and Supplier columns are out of sequence when compared with the original sequence of entity properties. (Click image for an 1152 x 864 screen capture.)

Appearance After Formatting with CSS and Minor Heading Changes

Following are customized versions of the forms shown in steps 10 and 11 as well as a Supplier details page with 11-point Calibri substituted for the approximately 8.5-point (76%) default Tahoma and Trebuchet MS fonts as well as color saturation increased.

Figure 12: /DynamicDataWebSite/Default.aspx

Figure 13: /DynamicDataWebSite/Products/List.aspx (Click for 1172 x 864 pixel version). Notice that the DynamicFilter dropdown lists are missing from Wizard-generated ListView pages.