Aan de slag met ASP.NET MVC

‘k heb net een groot project afgerond dat is gebouwd met het ASP.NET MVC framework.
Het betrof hier de herbouw van http://www.beurs.nl, een site waar performance een must is, SEO ook, en runtime errors en work-arounds zijn niet welkom. Oftewel: een mooie testcase voor dit nieuwe framework.

In deze post als eerste: wat is het ASP.NET MVC framework (vanaf hier genoemd: MVC)?
MVC is een pattern dat al lang bestaat en de opbouw van je applicatie opdeelt in de componenten Model, View en Controller. Hierbij komt een aanvraag of request van in dit geval een webpagina binnen bij de controller. Meestal komt er ook nog data mee in de aanvraag: bij een Get request zit dit in de querystring (www.beurs.nl/zoek/term=AEX) en bij een Post request zit het in een aparte collectie met data en bevat het de inhoud van de velden van je Form.

Het verschil met de gewone aspx pagina is dat nu niet een Page object wordt opgestart (met normaal het eerste contact in de form load, die kijkt of het een postback is etc etc) maar een Class die afgeleid is van een MVC Controller object.
Dit is direct het eerste verschil: je komt nu binnen in een apart object (de controller), terwijl je anders in een code behind van een grafisch element, een form, binnenkomt.
Deze controller (de C uit het MVC) heeft meerdere Actions in zich, die je implementeert als methode in het Controller object. Deze Actions kunnen bijvoorbeeld zijn: SaveNews, PostComment, CreateRssFeed, EditNews etc. De koppeling tussen url’s en de controller/action combinatie doe je in de Global.asax, daar zet je in dat ‘/nieuws/binnenland/AEX stijgt’ naar de controller ‘News’ moet, en naar de Action (methode) ‘news’ en dat deze een parameter van het type string heeft waar dan de tekst ‘AEX stijgt’ in wordt geplaatst.

Je voelt nu al dat dit wel gemakkelijk testbaar is, want een methode aanroepen met een parameter is iets dat je nu ook al doet in test projecten.
De Action heeft dan de kennis in zich wat hij moet doen. In dit geval moet hij de cache controleren, eventueel het nieuws uit de database halen en het toevoegen aan de cache. Deze laatste acties, het al dan niet gecached ophalen van de data, zit in je service- en datalaag. Deze twee lagen samen vormen je Model (de M uit het MVC). Je kunt het Model dus ook wel zien als je business layer gecombineerd met je data layer.

Als de controller deze data heeft opgehaald dan bepaalt hij welke view (de V uit het MVC) deze data moet gaan tonen: is de data bestemd voor een nieuwsfeed of voor een usercontrol of voor een HTML pagina of iets anders. Meestal zal het laatste het geval zijn en geeft de controller de opgehaalde data aan de View. De view ten slotte heeft de kennis in zich hoe een en ander op het scherm getoond gaat worden; welke data in welke DIV geplaatst wordt, en afhankelijk van de data welke css style erop van toepassing is. Standaard is de view een ASPX pagina die niet afleidt van het Page object maar van de Mvc.ViewPage.

cc337884_fig01

De verschillen tussen een gewoon webproject en een MVC project die het meeste in het oog springen:

  • Geen Viewstate
  • weinig tot geen SessionState
  • Eenvoudig SEO-friendly url’s
  • Geen servercontrols (DataGrid, ObjectDataSource)
  • Wel volledige controle over de gegenereerde HTML
  • Goede testbaarheid
  • Geen code behind
  • Duidelijke separation of concerns

In de volgende post: de ervaringen met het ASP.NET MVC framework.

2 thoughts on “Aan de slag met ASP.NET MVC

  1. Hartstikke bedankt! Heeft me geholpen om een goed Architectural Design te schrijven voor mn opleiding. Daarnaast krijg je snel een helder beeld wat ASP.NET MVC nou precies inhoudt. Ben zelf veel bezig met Java, Objective-C en PHP. Apple x-code neemt het MVC model ook zeer serieus. Toch blijf ik de vrijheid die ik heb in PHP ook erg waarderen🙂

    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s