Snel Websites Ontwikkelen met ASP.NET Dynamic Data

Met de oplevering van ASP.NET 3.5 SP1 is het Dynamic Data framework beschikbaar gekomen voor de webontwikkelaar. Dynamic Data is een framework voor het snel ontwikkelen van data-driven websites. Op basis van een datamodel wordt runtime een website gegenereerd. Het opmerkelijke hierbij is, dat het framework gebruik maakt van zogenaamde templates voor het tonen en muteren van webpagina’s. Deze templates kunnen aangepast worden naar de eigen eisen en wensen. Het Dynamic Data framework is nog volop in ontwikkeling, regelmatig wordt op Codeplex een nieuwe update vrij gegeven met daarin nieuwe of verbeterde functionaliteit.

In dit artikel ga ik verder in hoe het Dynamic Data framework is opgebouwd, zodat we een beter inzicht krijgen in de werking van dit nieuwe framework.

Het Dynamic Data framework is nog volop in ontwikkeling

Infrastructuur

Als je een Dynamic Data website wilt gaan ontwikkelen, dan start je door een specifieke template te kiezen, zie figuur 1.

Fig. 1: Visual Studio project templates

Als je de Dynamic Data Website Wizard template hebt gekozen, dan creëert Visual Studio een project met daarin een folder ”Dynamic Data” en een aantal subfolders. Figuur 2 toont de initiële solution structuur van een Dynamic Data website.

Fig. 2: Dynamic Data project structuur

Een aantal van deze folders bevatten de templates en controls die gebruikt worden bij het genereren van de website. De volgende tabel beschrijft de structuur van de folder “DynamicData”.

Tabel 1: Folders in een Dynamic Data project

Naast de folder “DynamicData” creëert Visual Studio ook nog enkele andere bestanden voor een Dynamic Data Website; dit zijn:

• Web.Config; het configuratie bestand met o.a verwijzingen naar DynamicData assemblies
• Default.aspx; in dit bestand wordt het menu opgebouwd voor het initieel tonen van de lijst met tabellen uit het datamodel
• Global.asax; in dit bestand worden bij het Application_Start event de routes gedefinieerd
• Site.css; de stylesheet voor de gegenereerde website
• Site.Master; de masterpage voor de gegenereerde website met daarin een contentplaceholder waarin de gegenereerde pagina’s worden getoond.

Naast deze bestanden bevat de folder “DynamicData” ook een aantal subfolders. Deze subfolders bevatten de templates voor het genereren van pagina’s en controls.

Page templates

Dynamic Data kent twee verschillende type templates; page templates en field templates. Page templates zijn gewone ASPX pagina’s met daarin voorzieningen om Dynamic Data te ondersteunen. Er worden vijf page templates gedefinieerd:

• List.aspx
• Details.aspx
• ListDetails.aspx
• Insert.aspx
• Edit.aspx

In iedere template is een DynamicDataManager klasse gedefinieerd; deze is verplicht om Dynamic Data ondersteuning mogelijk te maken in het .NET framework. Deze klasse wordt in het Page_Init event van de template geinitialiseerd.

<%@ Page Language="C#" MasterPageFile="~/Site.master"
  CodeFile="List.aspx.cs" Inherits="List" %>

<%@ Register src="~/DynamicData/Content/GridViewPager.ascx"
  tagname="GridViewPager" tagprefix="asp" %>

<%@ Register src="~/DynamicData/Content/FilterUserControl.ascx"
  tagname="DynamicFilter" tagprefix="asp" %>

<asp:Content ID="Content1"
 ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:DynamicDataManager ID="DynamicDataManager1"
      runat="server" AutoLoadForeignKeys="true" />
……
<asp:DynamicValidator runat="server" ID="GridViewValidator"
  ControlToValidate="GridView1" Display="None" />

Listing 1: Fragmenten uit een page template met DynamicDataControls

In listing 1 is een fragment uit de template “List.aspx” te zien. Er worden onder andere twee controls geregistreerd uit de “DynamicData/Content” folder. Vervolgens wordt ook de DynamicDataManager geïnitialiseerd. Daarnaast zijn er enkele specifieke controls die gebruikt kunnen worden bij het ontwerpen van ASP pagina’s; dit zijn onder andere een validator control (DynamicValidator) en een filter control (DynamicFilter). Voor de rest kan een template ontworpen worden met de bestaande ASP.NET controls.

Templates aanpassen om je website te customizen

Door het aanpassen van de templates naar je eigen wensen is het mogelijk om de website volledig te customizen. Er zijn twee manieren om een Dynamic Data Website te customizen. Ten eerste, door de page templates zelf aan te passen. Je kunt dit doen door in de folder “DynamicData\PageTemplates” één van de vijf templates te wijzigingen. Alle wijzigingen die in de page templates gedaan worden gelden voor de gehele website.

Daarnaast kunnen de templates aangepast worden voor een specifieke tabel. Dit doe je door in de folder “DynamicDate\CustomPages” een subfolder te maken met de tabelnaam van de klasse waarvoor deze specifieke template gebruikt moet worden. Figuur 3 verduidelijkt dit:

Fig. 3: Custom pages

In bovenstaande situatie geldt nu dat voor de customers tabel een lokale template gebruikt wordt om een klant (customer) te muteren, namelijk de Edit.aspx template in de folder “CustomPages\Customers”. Voor alle andere tabellen wordt de Edit.aspx template  uit de folder “PageTemplates” gebruikt.

Field templates

Naast page templates kent Dynamic Data ook field templates; een field template verzorgt de mapping tussen de data op het scherm en diezelfde data in het datamodel.  Een field template overerft zijn gedrag van de klasse “System.Web.DynamicData.FieldTemplateUserControl”. Deze klasse zorgt voor de toegang tot de informatie in het datamodel. De bestaande field templates kunnen aangepast worden, maar je kunt ook zelf field templates ontwikkelen.

Dynamic Data kent een aantal standaard field templates. Dit zijn templates voor het tonen en/of muteren van booleans, één op veel relaties, foreign key relaties, datums en numerieke waarden. Als je een bestaand field template wijzigt, dan geldt deze wijziging voor de gehele website. Wil je dit niet, dan is het alternatief om een nieuwe field template te creëren.

Een nieuwe field template kan op verschillende manieren gebruikt worden binnen een Dynamic Data website. Allereerst kan de field template gebruikt worden om in een page template in bijvoorbeeld een gridview een kolom  te tonen.  Het “DynamicData” control heeft een property “UIHint” waarin de naam van de field template ingevuld wordt. Listing 2 toont dit.

<asp:DynamicControl runat= "server" DataField="Phone"
  UIHint="ShowPhone" />  

Listing 2: UIHint property van DynamicControl

Een field template laat je een dataveld customizen

Daarnaast is het ook mogelijk om met de attribuutklasse UIHint in het datamodel voor bepaalde properties aan te geven hoe deze getoond moeten worden. Dit wordt in listing 3 verder uitgewerkt.

…
using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;

/// <summary>
/// Summary description for Customer
/// </summary>

[MetadataType(typeof(CustomerMetadata))]
public partial class Customer
{}

public class CustomerMetadata
{
    [UIHint("ShowPhone")]
    public object Phone;
}

Listing 3: UIHintAttribuut in datamodel

Het voordeel listing 3 is dat de field template “ShowPhone”gebruikt wordt in alle schermen waar “Phone” getoond moet worden, dit in tegenstelling tot het voorbeeld in listing 2. Hier zal de betreffende template zal het attribuut “Phone” met deze UIHint tonen.

Data sources

We hebben nu een idee hoe Dynamic Data een website genereert, maar om echt een website te genereren hebben we een datasource nodig. In ons voorbeeld doen we dit met een Linq to SQL datasource, maar Linq to Entities werkt ook. Om een Linq to SQL datasource te koppelen aan Dynamic Data, voeren we de volgende stappen uit:

1. Creëer een folder App_Code
2. Voeg een nieuw “Linq to SQL classes”-item toe aan deze folder
3. Noem dit item NorthWind.dbml
4. Dubbel klik op NorthWind.dbml
5. Dubbel klik op Server Explorer
6. Selecteer een database en sleep de tabellen naar NorthWind.dbml

Als we dit gedaan hebben, dan ziet de folder “App_Code” er uit als in figuur vier:

Fig. 4: NorthWind Datasource

Het enige wat we nu moeten doen is deze datasource koppelen aan Dynamic Data. Dit doen we op de door het bestand “DynamicData.cs” voor een aantal regels de commentaartekens te verwijderen.

public static void RegisterRoutes(RouteCollection routes) {
  MetaModel model = new MetaModel();
       
  // IMPORTANT: DATA MODEL REGISTRATION
  // Uncomment this line to register LINQ to SQL classes
  // or an ADO.NET Entity Data model for ASP.NET Dynamic Data.
  // Set ScaffoldAllTables = true only if you are sure
  // that you want all tables in the data model to support
  // a scaffold (i.e. templates) view.
  // To control scaffolding for individual tables,
  // create a partial class for
  // the table and apply the [Scaffold(true)] attribute
  // to the partial class.
  // Note: Make sure that you change "YourDataContextType"
  // to the name of the data context
  // class in your application.
  model.RegisterContext(typeof(NorthWindDataContext),
    new ContextConfiguration()
      { ScaffoldAllTables = true });
…
…

Listing 4: Registreren NorthWindDataContext in DynamicData.cs

De laatste regel in listing 4 geeft aan dat we de “NorthWindDataContext” registreren bij DynamicData. Dit is alles we moeten doen; we kunnen nu het project compileren en runnen.

Routing

Het allereerste wat opvalt als je de website opstart die met Dynamic Data gegenereerd is, is dat het lijkt alsof het framework gebruik maakt van ASP.NET pagina’s bij het tonen van deze website. Als je naar figuur 5 kijkt, zie je de volgende URL:

http://localhost:52620/WebSite3/Orders/ListDetails.aspx.

Fig. 5: Dynamic Data URL

Hierboven heb ik aangegeven, dat het Dynamic Data framework een website genereert op basis van templates. De navigatie tussen de verschillende pagina’s in deze website gebeurt op basis van zogenaamde routes. Deze routes worden in het project gedefinieerd. Zo’n route stelt ons in staat om url’s te definiëren die niet direct aan een specifiek bestand op het file systeem gerelateerd zijn. Als de url aan een bepaalde routedefinitie voldoet, dan wordt hier een actie op ondernomen. Voldoet de url niet aan een routedefinitie, dan wordt aangenomen dat de url naar een bepaald bestand refereert, bijvoorbeeld een .aspx pagina. Hieruit volgt dat Dynamic Data ook te integreren is met een ‘gewone’ ASP.Net website. Een routedefinitie bestaat uit paramaters die gescheiden worden door een “/”. Zo’n routedefinitie kan er als volgt uitzien:

{parameter1}/{parameter2}/{parameter3}

Routering is ook dynamisch

Hierbij zijn parameter1, parameter2 en parameter3 zogenaamde url-parameters; deze url-parameters moeten altijd tussen “{“ en “}” staan om ze herkenbaar te maken voor het framework. Als de url geparsed wordt, dan worden de parameters geëvalueerd. Alle karakters in de url-string die ongelijk zijn aan het “/” -teken en niet tussen “{“ en “}” staan, worden als constanten gezien en zodanig geëvalueerd. Het is mogelijk om tussen twee scheidingstekens meerdere url-parameters te plaatsen. Deze moeten dan wel gescheiden zijn door een constante. Onderstaande tabel geeft enkele voorbeelden van route definities met bijbehorende voorbeelden.

Tabel 2: Route definities

In het eerste voorbeeld wordt waarschijnlijk een lijst met customers getoond. In het tweede voorbeeld wordt waarschijnlijk customer met id=10 getoond.

Deze routes worden vooraf gedefinieerd. Bij Dynamic Data wordt in het event Application_Start in de global.asax een functie aangeroepen die de routes definieert. In de templates is de functionaliteit ingevuld hoe er genavigeerd wordt, Dynamic Data valideert deze navigatie met de gedefinieerde routes en zorgt ervoor dat de betreffende pagina gegenereerd wordt. Routing is niet specifiek voor Dynamic Data. Ook het MVC framework maakt gebruik van routing. Uit de namespace van routing (“System.Web.Routing”) volgt dat routing ook in ‘normale’  ASP.NET website gebruikt kan worden.

Conclusie

In dit artikel heb ik meer inzicht gegeven in het Dynamic Data Framework, ik heb de structuur besproken hoe een Dynamic Data project eruit ziet. Daarnaast heb ik de page en de field templates beschreven en tenslotte de manier van navigeren tussen de gegenereerde webpagina’s.

Niet alleen templates kunnen we aanpassen naar onze eisen en wensen,we kunnen de gehele website customizen naar onze eigen inzichten. Dit maakt Dynamic Data is een krachtig framework voor het genereren van data-driven websites. Zoals we gezien hebben is het mogelijk om zonder zelf een regel code schrijven een website te genereren.  Het enige wat we gedaan hebben is een datamodel definiëren.

Toepassingen waar Dynamic Data geschikt voor is, zijn bijvoorbeeld prototyping en het onderhouden van stamgegevens. Of Dynamic Data een concurrent voor bestaande generator tools wordt, is nog niet helemaal duidelijk. Wat natuurlijk in het voordeel van Microsoft spreekt is, dat alle nieuwe functionaliteit direct met elkaar integreert. Zo kan Dynamic Data gecombineerd worden met het door Microsoft ontwikkelde MVC framework. Daarnaast wordt er nog volop aan Dynamic Data gesleuteld en worden er regelmatig nieuwe updates gereleased.