Een web-front-end voor je database in 10 minuten met ASP.NET Dynamic Data

ASP.NET Dynamic Data is een mogelijkheid in Visual Studio waarmee je in enkele minuten een mooie front-end voor je database kunt maken. Compleet met insert, update en delete mogelijkheden en associaties tussen de verschillende tabellen. In een paar stappen zal ik laten zien hoe je de basisfunctionaliteit gebruikt.
De Stappen
Eigenlijk zijn het maar 3 stappen:
- Het project aanmaken.
- Het datamodel aanmaken.
- Het model aan de website koppelen.
Voor degene die nog nooit een Entity Data model hebben aangemaakt heb ik deze stap onderverdeeld in een aantal sub-stappen.
Stap 1: Maak een ASP.NET Dynamic Data project aan

Stap 2: Voeg een Entity Model toe
Rechter muis knop op het project, Add -> New Item. Bij de template 'Data' kies je voor 'ADO.NET Entity Data Model'.

Laat het model genereren naar aanleiding van een database. In dit geval gebruik ik AdventureWorks.


Kies een aantal tabellen. In dit geval kies ik voor:
- Product
- ProductSubCategory
- ProductCategory
- SalesOrderHeader
- SalesOrderDetail
- Customer
Tevens vink ik aan 'Pluralize or singularize generated object names' zodat de meervoud- of enkelvoudsvormen van de naam van de tabellen herkend wordt. Of te wel, de tabel 'Product' zal herkend worden als enkelvoud. 1 record zal als 'Product' worden aangeduid, meerdere records zullen 'Products' genoemd zal worden.

Het model wordt aangemaakt. Naar aanleiding van foreignkeys herkent hij de relaties tussen tabellen. Helaas mist bij mij de relatie tussen SalesOrderDetail en Product, dus die maak ik met de hand aan.



Er komt nu een relatie tussen de product Entity en de OrderDetailsEntity. Door te dubbelklikken op deze relatie kun je aangeven welke properties bij elkaar horen.

Stap 3: Global.Asax aanpassen
In de global.asax moeten we aangeven welke tabellen we willen gebruiken in onze Dynamic Data website. In dit geval willen we alle tabellen uit de datamodel, dus kunnen we aangeven dat hij het zelf bij elkaar mag zoeken. Dit doen we door de commentaar tekens weg te halen bij de volgende regel:
DefaultModel.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false });
In deze regel zetten we 'ScaffoldAllTables' op 'true' en vullen we het juiste datamodel in, i.p.v. 'YourDataContextType'. Dit wordt dus:
DefaultModel.RegisterContext(typeof(AdventureWorksEntities), new ContextConfiguration() { ScaffoldAllTables = true });

Eventueel kunnen we de URL-routing hier aanpassen voor de URL-rewriting. Deze instellingen zij nu prima en we zijn al klaar om de website te draaien.. dus [F5].
Klaar is Kees
De website zal opstarten en we zien het volgende resultaat.

Laten we een klikken op 'ProductCategories'. Je krijgt een lijst met categorieën te zien. Tevens kun je kiezen om er eentje aan te passen, toe te voegen of te verwijderen.

Wanneer we door klikken op 'View ProductSubcategories' krijgen we een lijst met vergelijkbare opties van de Subcategorieën. Door te klikken op 'Edit' krijgen we de mogelijkheid om een subcategorie aan te passen. De naam, maar ook de categorie waaronder hij valt, door te kiezen uit een lijst van categorieën.

Vervolgens kunnen we door klikken naar de producten, en dan weer naar de OrderDetails waarin deze producten gekocht zijn. Door naar de OrderHeader en de bijbehorende Customer, etc. Alles met Edit, Insert en Delete mogelijkheid.
Customizable
Letterlijk in enkele minuten een Content Management systeem gebouwd, zonder een enkele regel code. Maar dat wil niet zeggen dat je helemaal vast zit aan de lay-out zoals die nu is.
In het project zit een map 'DynamicData'. Daarin zitten allerlei usercontrols die (samen met de masterpage) de layout bepalen van je website. Deze zijn aan te passen en uit te breiden.

URL Routes
Een ander ding dat je wellicht is opgevallen is de URL van de pagina’s. Enkele voorbeelden:
- http://localhost:53838/Products/List.aspx
(Toont lijst van producten) - http://localhost:53838/Products/Details.aspx?ProductID=1
(Toont details van product met productID 1) - http://localhost:53838/SalesOrderDetails/List.aspx?ProductID=1
(Toont een lijst van OrderDetails waar productID 1 in voorkomt) - http://localhost:53838/Products/Edit.aspx?ProductID=1
(Toont de Edit pagina van product met productID 1)
Ofwel; prima leesbare en goed indexeerbare URL’s.
Meer informatie
Op de website van Microsoft ASP.NET kun je veel meer info vinden. Tevens handige 'How to'-video’s die nog veel meer mogelijkheden laten zien: www.asp.net/dynamicdata
Vul onderstaand formulier volledig in om een reactie op dit bericht te plaatsen.

