ASP.NET Dynamic Data: Generate a Dynamic Administrative Web App from an Entity Data Model in Less than Five Minutes
This screen capture sequence illustrates the “Generate a Dynamic-Page Web App” 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 ASP.NET Web Application from the Northwind sample database.
Step 1. Launch Visual Studio 2008 or Web Developer Express SP1, and select the Dynamic Data Entities Web Application template to use an Entity Data Model as the data access layer (DAL) for your project. (The Dynamic Data Web Site file-system project uses LINQ to SQL as its DAL.)
Step 2: Add an ADO.NET Entity Data Model DAL and give the model a descriptive name.
Step 3: Accept the default Generate from Database option in the first Wizard dialog.
Step 4: Select a connection to an SQL Server 2005 or 2008 instance of the Northwind sample database. (The computer name appears when localhost\SQLEXPRESS is specified as the Data Source.)
Step 5: Select the eight tables from the original Access version of the database and click Finish.
Step 6: After a few seconds the Entity Framework’s graphic object/relational mapping (O/RM) designer appears with the Model browser in the right pane. Rearranging the entity widgets and singularizing EntityType names is optional. (Click the image to open a full-size (1024 x 756) capture.)
Step 7: Open the Global.asax settings file and change the model name to NorthwindModel.NorthwindEntities and change ScaffoldAllTables from false to true. (Click the image to open a full-size (1024 x 756) capture.)
Step 8: Press F5 to compile and run the Web app with the ASP.NET Development Server (Cassini). Click OK to enable debugging.
Step 9: This subdued page opens to display a DynamicGridView of EntitySets. (The UI designers appear to have forgotten that the data source is an ObjectContext for EntitySets, not a relational table, and possibly are color blind.)
Step 10: Click the Products link to open the Products EntitySet in a DynamicGridView with three DynamicFilters for display by Discontinued state, Category and Supplier. Clicking a Category or Supplier link opens a DynamicDetailsView; clicking Order_Details opens a DynamicGridView of all Order_Detail entities that include the selected Product.
The three dropdown lists above the grid are DynamicFilter controls that enable filtering by Discontinued (Boolean) status (All, true, false), Category, Supplier or any combination of the three.
(Click the image to open a full-size (1152 x 864) capture.)
Step 11: Click a supplier link, such as Exotic Liquids, to display a DetailsView of the Supplier entity.
Optional Step 12: Singularize EntityType and navigation property (endpoint) names to correspond with association multiplicity. (Click the image to open a full-size capture.)
Appearance After Formatting with CSS and Minor Heading Changes
Following are customized versions of the forms shown in steps 9, 10 and 11 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 13: Default.aspx
Figure 14: /Products/List.aspx (Click for 1172 x 864 pixel version)
Figure 15: /Suppliers/Details.aspx$SupplierID=1
Sample code for the project, which includes customization by manipulating table and field metadata, will be available when the article publishes.
Atom 1.0 site feed
0 comments:
Post a Comment