Sviluppo Web

AspNet MVC - Il nostro primo progetto MVC

Dopo aver capito insieme, nel precedente articolo, che cos'è Asp.Net MVC possiamo creare la nostra prima applicazione Asp.Net MVC 5 avviando Visual Studio 2013 e selezionando dal menu File la voce New Project. Scelto il linguaggio di programmazione preferito, nel nostro caso C#, selezioniamo dai template Web il template ASP.NET Web Application e indichiamo un Nome per il progetto, un nome per la soluzione e il percorso in cui salvare il tutto. Realizzeremo insieme un piccolo e-commerce per la vendita on-line di libri che chiameremo BookStore, progetto che ci accompagnerà in questa serie di articoli.


 
Il template scelto ci offre a questo punto le opzioni con cui generare il progetto, in particolare che tipo di contenuto generare. Possiamo scegliere tra un progetto vuoto, un progetto Web Forms, un progetto MVC, un progetto Web Api, un progetto SPA, un progetto Azure Mobile Services. In tutti questi casi verrà creato un progetto da un template predefinito con cui poter cominciare a sviluppare la nostra applicazione. Possiamo anche decidere di mischiare le carte creando un progetto vuoto, e aggiungere le core reference per MVC e/o Web Forms e/o Web Api: One Asp.Net, di cui parlavamo nel precedente articolo, si riferisce proprio a questo. Possiamo infine aggiungere un progetto di test, decidere il modello di autenticazione e se hostare la nostra applicazione nel cloud! Partiamo da un'applicazione vuota con le core reference di MVC, in modo da concentrarci sui componenti standard di una applicazione di questo genere.


 
La struttura base di un’applicazione MVC si presenta come nella figura precedente. Le cartelle Controller, Model e View sono contenitori per i rispettivi elementi del pattern, in particolare la classe View conterrà alcuni file e cartelle comuni a tutte le view. Di default viene utilizzato Razor come view engine per le nostre view, che quindi non avranno la classica estensione .aspx, bensì la nuova estensione .cshtml nel caso si scelga C# come linguaggio di programmazione, .vbhtml nel caso si scelga Visual Basic. Già questo dettaglio ci indica precisamente che una view per Asp.Net MVC è un misto di codice html e .net.


 
La regola di routing, attraverso la quale Asp.Net MVC gestirà le nostre richieste, la potete trovare nel file RouteConfig.cs nella cartella App_Start. 



Per creare la nostra prima Home Page dobbiamo aggiungere al nostro progetto un Controller, operazione molto semplice che può essere eseguita cliccando sul tasto destro del mouse in corrispondenza della cartella Controllers e selezionando dai menu a tendina che compariranno le voci Add e Controlle. Una finestra ci indicherà le opzioni disponibili, partiamo con una Controller vuoto per MVC 5.


 
A questo punto ci viene chiesto il nome del controller che vogliamo creare. Visto che avrà il compito di rispondere all’url di default, che per convenzione è del tipo http://miosito/Home/Index dovrà quindi, per quanto detto precedentemente, chiamarsi HomeController. Per il nostro esempio avrà un template vuoto.
 

 
L’operazione appena eseguita creerà per noi una classe di nome HomeContoller che estende la classe base Controller e definirà un metodo pubblico e non statico chiamato Index. Quest’ultimo è il nostro Action Method che sarà automaticamente invocato quando l’utente eseguirà una richiesta con l’url di default. Il tipo di ritorno di questo metodo è ActionResult, una classe astratta del framework MVC che rappresenta il risultato della Action. Nel nostro caso, indicando il metodo View della classe base Controller senza nessun parametro, stiamo dicendo al framework che vogliamo restituire all’utente la view con lo stesso nome del metodo, quindi Index.cshtml. Il runtime cercherà questo file nella cartella View, partendo dalla sottocartella con lo stesso nome del Controller, nel nostro caso Home, e poi in una cartella condivisa chiamata Shared.
 

 
Possiamo creare questa View cliccando con il tasto destro del mouse sul nome del metodo e selezionando dal menu a tendina che compare la voce Add View: 
 

 
Ci sarà presentata una finestra che ci consente di specificare i parametri con cui creare la Index.cshtml.Nel nostro caso possiamo lasciare invariati tutti i parametri giacché vogliamo chiamare Index la view e utilizzare il layout predefinito. Vedremo in seguito l’utilità delle altre possibilità. 
 

 
Se non già presente, come nel nostro caso, il tool crea per noi una sottocartella con il nome del controller e al suo interno la view. Dato che il template è vuoto e abbiamo scelto di utlizzare una layout page (era selezionato di dfault nella finestra precedente) vengono create anche le cartelle Content, Scripts e Shared. Content conterrà i fogli di stile del nostro sito e i fogli di stile di Bootstrap, un framework css che semplifica la realizzazione di interfacce grafiche adattabili allo spazio a disposizione che impareremo ad amare nei prossimi articoli. Scripts conterrà le librerie javascript necessarie all'applicazione, di default vengono caricati bootstrap, jQuery e Modernizr. 
 

 
Nella cartella shared viene creato il file _Layout.cshtml, che conterrà la parti della nostra applicazione web che sono comuni a una parte o tutte delle pagine che realizzeremo. Per chi viene da aspx è l'equivalente della MasterPage.
 


Apriamo il file Index.cshtml realizzato dal tool. Come potete vedere nella figura seguente contiene solo l'html che vogliamo venga visualizzato nella Home Page, la parte restante verrà presa dal file _Layout.cshtml. In particolare quello che vedete in questo file sarà elaborato e sostituito nel Layout nel punto esatto in cui c'è l'istruzione @RenderBody(). Le view e i controller hanno a disposizione dei contenitori per scambiare informazioni, uno di questo è il ViewBag, che ha la caratteristica di essere di tipo dynamic, potete quindi aggiungervi qualsiasi proprietà. La Index sfrutta una proprietà denominata Title (ma potete anche modificarla) per indicare alla Layout cosa utilizzare come titolo per la pagina. Infatti come potete vedere nella figura precedente in corrispondenza dell'elemento



Ma come fa a sapere il framework che per la Index.cshtml deve essere utilizzato il Layout nella cartella Shared denominato _Layout.cshtml? In realtà nella root della cartella View è stato creato un file standard denominato _ViewStart.cshtml in cui possiamo dare delle direttive al view engine (il view engine è la componente del framework che si occupa dell'elaborazione dinamica delle view). Se lo apriamo infatti vedremo che l'unica istruzione presente è proprio il percorso del layout standard, che verrà quindi utilizzato in tutti i casi in cui non sia stata la pagina stessa a indicare il contrario.



Siamo pronti ad avviare la nostra prima applicazione Asp.Net MVC premendo il tasto F5. Il risultato è quello visibile nella seguente figura:

Conclusioni

In questo articolo abbiamo realizzato il nostro primo progetto MVC 5 analizzando i tool messi a disposizione dall'ambiente di sviluppo. Si è trattato di un esempio molto semplice che complicheremo sempre di più nei prossimi articoli, fino alla realizzazione di un'applicazione di esempio completa. Per chi viene da Web Form il consiglio è di non spaventarsi: dovete scrivere un po' più di html e javascript ma scroprirete che ne vale davvero la pena.