Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Scarica Kit di formazione per i campi Web
Questo lab pratico è basato su MVC (Model View Controller) Music Store, un'applicazione di esercitazione che introduce e spiega dettagliatamente come usare ASP.NET MVC e Visual Studio. Nel corso del lab si apprenderà la semplicità, ma la potenza dell'uso di queste tecnologie insieme. Si inizierà con una semplice applicazione e verrà compilata fino a quando non si dispone di un ASP.NET applicazione Web MVC 4 completamente funzionante.
Questo lab funziona con ASP.NET MVC 4.
Se si vuole esplorare la versione ASP.NET MVC 3 dell'applicazione tutorial, è possibile trovarla in MVC-Music-Store.
Questo lab pratico presuppone che lo sviluppatore abbia esperienza nelle tecnologie di sviluppo Web, ad esempio HTML e JavaScript.
Nota
Tutti i frammenti e il codice di esempio sono inclusi nel Web Camp Training Kit, disponibile in Microsoft-Web/WebCampTrainingKit Releases.All sample code and snippets are included in the Web Camps Training Kit, available at Microsoft-Web/WebCampTrainingKit Releases. Il progetto specifico per questo lab è disponibile in ASP.NET concetti fondamentali di MVC 4.
Applicazione Music Store
L'applicazione Web Music Store che verrà compilata in questo lab comprende tre parti principali: shopping, checkout e amministrazione. I visitatori potranno esplorare gli album per genere, aggiungere album al carrello, rivedere la selezione e infine procedere al checkout per accedere e completare l'ordine. Inoltre, gli amministratori dello Store saranno in grado di gestire gli album disponibili e le loro proprietà principali.
Schermate di Music Store
ASP.NET MVC 4 Essentials
L'applicazione Music Store verrà compilata usando MVC (Model View Controller), un modello di architettura che separa un'applicazione in tre componenti principali:
- Modelli: gli oggetti modello sono le parti dell'applicazione che implementano la logica del dominio. Spesso, anche gli oggetti modello recuperano e archiviano lo stato del modello in un database.
- Visualizzazioni: le visualizzazioni sono i componenti che visualizzano l'interfaccia utente dell'applicazione. In genere, questa interfaccia utente viene creata dai dati del modello. Un esempio è la visualizzazione di modifica di Album che visualizza caselle di testo e un elenco a discesa in base allo stato corrente di un oggetto Album.
- Controller: i controller sono i componenti che gestiscono l'interazione dell'utente, modificano il modello e infine selezionano una visualizzazione per eseguire il rendering dell'interfaccia utente. In un'applicazione MVC la visualizzazione presenta solo le informazioni, mentre il controller gestisce e risponde all'input e all'interazione dell'utente.
Il modello MVC consente di creare applicazioni che separano i diversi aspetti dell'applicazione (logica di input, logica di business e logica dell'interfaccia utente), fornendo un accoppiamento libero tra questi elementi. Questa separazione consente di gestire la complessità quando si compila un'applicazione, in quanto consente di concentrarsi su un aspetto dell'implementazione alla volta. Inoltre, il modello MVC semplifica il test delle applicazioni, incoraggiando anche l'uso dello sviluppo basato su test (TDD) per la creazione di applicazioni.
Il framework MVC ASP.NET offre un'alternativa al modello di Web Forms ASP.NET per la creazione di applicazioni Web basate su MVC ASP.NET. Il framework MVC ASP.NET è un framework di presentazione leggero e altamente testabile che , come per le applicazioni basate su Web form, è integrato con le funzionalità di ASP.NET esistenti, ad esempio pagine master e autenticazione basata sull'appartenenza, in modo da ottenere tutta la potenza del framework .NET core. Ciò è utile se si ha già familiarità con Web Forms ASP.NET perché tutte le librerie già usate sono disponibili anche in ASP.NET MVC 4.
Inoltre, l'accoppiamento libero tra i tre componenti principali di un'applicazione MVC promuove anche lo sviluppo parallelo. Ad esempio, uno sviluppatore può lavorare sulla vista, un secondo sviluppatore può lavorare sulla logica del controller e un terzo sviluppatore può concentrarsi sulla logica di business nel modello.
Obiettivi
In questo lab pratico si apprenderà come:
- Creare un'applicazione MVC ASP.NET da zero in base all'esercitazione sull'applicazione Music Store
- Aggiungere controller per gestire gli URL alla home page del sito e per esplorarne le funzionalità principali
- Aggiungere una visualizzazione per personalizzare il contenuto visualizzato insieme al relativo stile
- Aggiungere classi modello per contenere e gestire dati e logica di dominio
- Usare il modello Di visualizzazione modello per passare informazioni dalle azioni del controller ai modelli di visualizzazione
- Esplorare il nuovo modello di ASP.NET MVC 4 per le applicazioni Internet
Prerequisiti
Per completare questo lab, è necessario disporre degli elementi seguenti:
- Visual Studio 2012 Express for Web (vedere Appendice A per istruzioni su come installarlo)
Attrezzaggio
Installazione di frammenti di codice
Per praticità, gran parte del codice che si gestirà con questo lab è disponibile come frammenti di codice di Visual Studio. Per installare i frammenti di codice, eseguire il file .\Source\Setup\CodeSnippets.vsi .
Se non si ha familiarità con i frammenti di codice di Visual Studio e si vuole imparare a usarli, è possibile fare riferimento all'appendice di questo documento "Appendice C: Uso di frammenti di codice".
Esercizi
Questo lab pratico è costituito dagli esercizi seguenti:
- Esercizio 1: Creazione di MusicStore ASP.NET progetto di applicazione Web MVC
- Esercizio 2: Creazione di un controller
- Esercizio 3: Passaggio di parametri a un controller
- Esercizio 4: Creazione di una visualizzazione
- Esercizio 5: Creazione di un modello di visualizzazione
- Esercizio 6: Uso dei parametri nella visualizzazione
- Esercizio 7: Un giro intorno ASP.NET MVC 4 Nuovo modello
Nota
Ogni esercizio è accompagnato da una cartella End contenente la soluzione risultante da ottenere dopo aver completato gli esercizi. È possibile usare questa soluzione come guida se sono necessarie altre informazioni sull'utilizzo degli esercizi.
Tempo stimato per il completamento del lab: 60 minuti.
Esercizio 1: Creazione di MusicStore ASP.NET progetto di applicazione Web MVC
In questo esercizio si apprenderà come creare un'applicazione MVC ASP.NET in Visual Studio 2012 Express for Web e nella relativa organizzazione principale delle cartelle. Si apprenderà anche come aggiungere un nuovo controller e visualizzare una stringa semplice nella home page dell'applicazione.
Attività 1 - Creazione del progetto applicazione Web MVC ASP.NET
In questa attività verrà creato un progetto di applicazione MVC vuoto ASP.NET usando il modello di Visual Studio MVC. Avviare VS Express per Web.
Scegliere Nuovo progetto dal menu File.
Nella finestra di dialogo Nuovo progetto selezionare il tipo di progetto applicazione Web MVC 4 ASP.NET, disponibile in Visual C#, Elenco modelli Web.
Modificare il nome in MvcMusicStore.
Impostare il percorso della soluzione all'interno di una nuova cartella Begin nella cartella Source di questo esercizio, ad esempio [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Fare clic su OK.
Finestra di dialogo Crea nuovo progetto
Nella finestra di dialogo Nuovo ASP.NET Progetto MVC 4 selezionare il modello Basic e assicurarsi che il motore di visualizzazione selezionato sia Razor. Fare clic su OK.
Finestra di dialogo Nuovo progetto MVC 4 ASP.NET
Attività 2 - Esplorazione della struttura della soluzione
Il framework MVC ASP.NET include un modello di progetto di Visual Studio che consente di creare applicazioni Web che supportano il modello MVC. Questo modello crea una nuova applicazione Web MVC ASP.NET con le cartelle, i modelli di elemento e le voci del file di configurazione necessarie.
In questa attività si esaminerà la struttura della soluzione per comprendere gli elementi coinvolti e le relative relazioni. Le cartelle seguenti sono incluse in tutte le applicazioni MVC ASP.NET perché il framework MVC ASP.NET per impostazione predefinita usa un approccio "convenzione sulla configurazione" e fa alcuni presupposti predefiniti basati sulle convenzioni di denominazione delle cartelle.
Dopo aver creato il progetto, esaminare la struttura di cartelle creata nel Esplora soluzioni sul lato destro:
struttura della cartella MVC ASP.NET in Esplora soluzioni
Controller. Questa cartella conterrà le classi controller. In un'applicazione basata su MVC, i controller sono responsabili della gestione dell'interazione dell'utente finale, della modifica del modello e della scelta finale di una visualizzazione per il rendering dell'interfaccia utente.
Nota
Il framework MVC richiede che i nomi di tutti i controller terminano con "Controller", ad esempio HomeController, LoginController o ProductController.
Modelli. Questa cartella viene fornita per le classi che rappresentano il modello di applicazione per l'applicazione Web MVC. Questo include in genere codice che definisce gli oggetti e la logica per l'interazione con l'archivio dati. In genere, gli oggetti modello effettivi si troveranno in librerie di classi separate. Tuttavia, quando si crea una nuova applicazione, è possibile includere classi e quindi spostarle in librerie di classi separate in un secondo momento nel ciclo di sviluppo.
Visualizzazioni. Questa cartella è il percorso consigliato per le visualizzazioni, i componenti responsabili della visualizzazione dell'interfaccia utente dell'applicazione. Le viste usano .aspx, file con estensione ascx, cshtml e master, oltre a qualsiasi altro file correlato alle visualizzazioni di rendering. La cartella Views contiene una cartella per ogni controller; la cartella viene denominata con il prefisso controller-name. Ad esempio, se si dispone di un controller denominato HomeController, la cartella Views conterrà una cartella denominata Home. Per impostazione predefinita, quando il framework MVC ASP.NET carica una visualizzazione, cerca un file .aspx con il nome di visualizzazione richiesto nella cartella Views\controllerName (Views[ControllerName][Action].aspx) o (Views[ControllerName][Action].cshtml) per le visualizzazioni Razor.
Nota
Oltre alle cartelle elencate in precedenza, un'applicazione Web MVC usa il file Global.asax per impostare le impostazioni predefinite di routing url globali e usa il file Web.config per configurare l'applicazione.
Attività 3 - Aggiunta di un controllo HomeController
In ASP.NET applicazioni che non usano il framework MVC, l'interazione dell'utente è organizzata intorno alle pagine e intorno alla generazione e alla gestione di eventi da tali pagine. Al contrario, l'interazione dell'utente con ASP.NET applicazioni MVC è organizzata in base ai controller e ai relativi metodi di azione.
D'altra parte, ASP.NET framework MVC esegue il mapping degli URL alle classi denominate controller. I controller elaborano le richieste in ingresso, gestiscono l'input e le interazioni dell'utente, eseguono la logica dell'applicazione appropriata e determinano la risposta da inviare al client (visualizzare HTML, scaricare un file, reindirizzare a un URL diverso e così via). Nel caso della visualizzazione del codice HTML, una classe controller chiama in genere un componente di visualizzazione separato per generare il markup HTML per la richiesta. In un'applicazione MVC la visualizzazione presenta solo le informazioni, mentre il controller gestisce e risponde all'input e all'interazione dell'utente.
In questa attività si aggiungerà una classe Controller che gestirà gli URL alla home page del sito Music Store.
Fare clic con il pulsante destro del mouse sulla cartella Controllers all'interno del Esplora soluzioni, scegliere Aggiungi e quindi Comando controller:
Comando Aggiungi controller
Verrà visualizzata la finestra di dialogo Aggiungi controller . Assegnare al controller il nome HomeController e premere Aggiungi.
Finestra di dialogo Aggiungi controller
Il file HomeController.cs viene creato nella cartella Controllers . Per fare in modo che HomeController restituisca una stringa sull'azione Index, sostituire il metodo Index con il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex1 HomeController Index)
public string Index() { return "Hello from Home"; }
Attività 4 - Esecuzione dell'applicazione
In questa attività si proverà l'applicazione in un Web browser.
Premere F5 per eseguire l'applicazione. Il progetto viene compilato e viene avviato il server Web IIS locale. Il server Web IIS locale aprirà automaticamente un Web browser che punta all'URL del server Web.
Applicazione in esecuzione in un Web browser
Nota
Il server Web IIS locale eseguirà il sito Web in un numero di porta libera casuale. Nella figura precedente il sito è in esecuzione in
http://localhost:50103/, quindi usa la porta 50103. Il numero di porta può variare.Chiudere il browser.
Esercizio 2: Creazione di un controller
In questo esercizio si apprenderà come aggiornare il controller per implementare funzionalità semplici dell'applicazione Music Store. Tale controller definirà i metodi di azione per gestire ognuna delle richieste specifiche seguenti:
- Una pagina di presentazione dei generi musicali nel Music Store
- Una pagina di esplorazione che elenca tutti gli album musicali per un particolare genere
- Pagina dei dettagli che mostra informazioni su un album musicale specifico
Per l'ambito di questo esercizio, tali azioni restituiranno semplicemente una stringa.
Attività 1 - Aggiunta di una nuova classe StoreController
In questa attività si aggiungerà un nuovo controller.
Se non è già aperto, avviare VS Express per Web 2012.
Scegliere Apri progetto dal menu File. Nella finestra di dialogo Apri progetto passare a Source\Ex02-CreatingAController\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aggiungere il nuovo controller. A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Controllers all'interno del Esplora soluzioni, selezionare Aggiungi e quindi il comando Controller. Modificare il nome del controller in StoreController e fare clic su Aggiungi.
Finestra di dialogo Aggiungi controller
Attività 2 - Modifica delle azioni di StoreController
In questa attività verranno modificati i metodi controller chiamati azioni. Le azioni sono responsabili della gestione delle richieste URL e della determinazione del contenuto che deve essere inviato al browser o all'utente che ha richiamato l'URL.
La classe StoreController dispone già di un metodo Index . Lo userai più avanti in questo lab per implementare la pagina che elenca tutti i generi del music store. Per il momento, è sufficiente sostituire il metodo Index con il codice seguente che restituisce una stringa "Hello from Store.Index()":
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex2 StoreController Index)
public string Index() { return "Hello from Store.Index()"; }Aggiungere metodi Browse e Details . A tale scopo, aggiungere il codice seguente a StoreController:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex2 StoreController BrowseAndDetails)
// GET: /Store/Browse public string Browse() { return "Hello from Store.Browse()"; } // GET: /Store/Details public string Details() { return "Hello from Store.Details()"; }
Attività 3 - Esecuzione dell'applicazione
In questa attività si proverà l'applicazione in un Web browser.
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL per verificare l'implementazione di ogni azione.
/Store. Verrà visualizzato "Hello from Store.Index()".
/Store/Browse. Verrà visualizzato "Hello from Store.Browse()" (Hello from Store.Browse()".
/Store/Details. Verrà visualizzato "Hello from Store.Details()".
Esplorazione /Store/Sfoglia
Chiudere il browser.
Esercizio 3: Passaggio di parametri a un controller
Fino ad ora, si sono restituite stringhe costanti dai controller. In questo esercizio si apprenderà come passare parametri a un controller usando l'URL e la stringa di query e quindi fare in modo che le azioni del metodo rispondano con testo al browser.
Attività 1 - Aggiunta del parametro Genre a StoreController
In questa attività si userà la stringa di query per inviare parametri al metodo di azione Browse in StoreController.
Se non è già aperto, avviare VS Express for Web.
Scegliere Apri progetto dal menu File. Nella finestra di dialogo Apri progetto passare a Source\Ex03-PassingParametersToAController\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aprire la classe StoreController . A tale scopo, nella Esplora soluzioni espandere la cartella Controller e fare doppio clic su StoreController.cs.
Modificare il metodo Browse , aggiungendo un parametro stringa per richiedere un genere specifico. ASP.NET MVC passerà automaticamente qualsiasi parametro querystring o post form denominato genre a questo metodo di azione quando viene richiamato. A tale scopo, sostituire il metodo Browse con il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex3 StoreController BrowseMethod)
// GET: /Store/Browse?genre=Disco public string Browse(string genre) { string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre); return message; }
Nota
Si usa il metodo di utilità HttpUtility.HtmlEncode per impedire agli utenti di inserire Javascript in View con un collegamento come /Store/Browse? Genre=<script>window.location=''<http://hackersite.com/script>.
Per altre spiegazioni, visitare questo articolo msdn.
Attività 2 - Esecuzione dell'applicazione
In questa attività si proverà l'applicazione in un Web browser e si userà il parametro genre .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Browse? Genre=Disco per verificare che l'azione riceva il parametro genre.
Esplorazione /Store/Sfoglia? Genre=Disco
Chiudere il browser.
Attività 3 - Aggiunta di un parametro ID incorporato nell'URL
In questa attività si userà l'URL per passare un parametro Id al metodo di azione Details di StoreController. ASP.NET convenzione di routing predefinita di MVC consiste nel considerare il segmento di un URL dopo il nome del metodo di azione come parametro denominato ID. Se il metodo di azione ha un parametro denominato Id, ASP.NET MVC passerà automaticamente il segmento URL come parametro. Nell'URL Store/Details/5 l'ID verrà interpretato come 5.
Modificare il metodo Details di StoreController, aggiungendo un parametro int denominato id. A tale scopo, sostituire il metodo Details con il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex3 StoreController DetailsMethod)
// GET: /Store/Details/5 public string Details(int id) { string message = "Store.Details, ID = " + id; return message; }
Attività 4 - Esecuzione dell'applicazione
In questa attività si proverà l'applicazione in un Web browser e si userà il parametro ID .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Details/5 per verificare che l'azione riceva il parametro ID.
Esplorazione di /Store/Dettagli/5
Esercizio 4: Creazione di una visualizzazione
Finora sono state restituite stringhe dalle azioni del controller. Anche se questo è un modo utile per comprendere il funzionamento dei controller, non è il modo in cui vengono compilate le applicazioni Web reali. Le visualizzazioni sono componenti che offrono un approccio migliore per la generazione di codice HTML nel browser con l'uso di file modello.
In questo esercizio si apprenderà come aggiungere una pagina master del layout per configurare un modello per contenuto HTML comune, un foglio stile per migliorare l'aspetto del sito e infine un modello di visualizzazione per consentire a HomeController di restituire html.
Attività 1 - Modifica del file _layout.cshtml
Il file ~/Views/Shared/_layout.cshtml consente di configurare un modello per html comune da usare nell'intero sito Web. In questa attività si aggiungerà una pagina master di layout con un'intestazione comune con collegamenti all'area Home page e Store.
Se non è già aperto, avviare VS Express for Web.
Scegliere Apri progetto dal menu File. Nella finestra di dialogo Apri progetto passare a Source\Ex04-CreatingAView\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Il file _layout.cshtml contiene il layout del contenitore HTML per tutte le pagine del sito. Include l'elemento <html> per la risposta HTML, nonché gli <elementi head> e< body.> @RenderBody() all'interno del corpo HTML identificare le aree in cui i modelli di visualizzazione saranno in grado di compilare con contenuto dinamico. (C#)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>Aggiungere un'intestazione comune con collegamenti all'area Home page e Store in tutte le pagine del sito. A tale scopo, aggiungere il codice seguente sotto <l'istruzione body> . (C#)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Store", "Index", "Store")</li> </ul> </nav> </div> </div> </header> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>Includere un div per eseguire il rendering della sezione body di ogni pagina. Sostituire @RenderBody() con il codice evidenziato seguente: (C#)
... <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Store", "Index", "Store")</li> </ul> </nav> </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> ... </body> </html>Nota
Suggerimenti utili Visual Studio 2012 include frammenti di codice che semplificano l'aggiunta di codice comune in HTML, file di codice e altro ancora. Provalo digitando <div> e premendo TAB due volte per inserire un tag div completo.
Attività 2 - Aggiunta del foglio di stile CSS
Il modello di progetto vuoto include un file CSS molto semplificato che include solo gli stili usati per visualizzare i messaggi di convalida e i moduli di base. Si useranno immagini e CSS aggiuntive (potenzialmente fornite da una finestra di progettazione) per migliorare l'aspetto del sito.
In questa attività si aggiungerà un foglio di stile CSS per definire gli stili del sito.
Il file CSS e le immagini sono inclusi nella cartella Source\Assets\Content di questo lab. Per aggiungerli all'applicazione, trascinare il contenuto da una finestra di Esplora risorse nella Esplora soluzioni in Visual Studio Express for Web, come illustrato di seguito:
Trascinamento del contenuto dello stile
Verrà visualizzata una finestra di dialogo di avviso che chiede di confermare di sostituire Site.css file e alcune immagini esistenti. Selezionare Applica a tutti gli elementi e fare clic su Sì.
Attività 3 - Aggiunta di un modello di visualizzazione
In questa attività si aggiungerà un modello di visualizzazione per generare la risposta HTML che userà la pagina master del layout e CSS aggiunti in questo esercizio.
Per usare un modello di visualizzazione durante l'esplorazione della home page del sito, è prima necessario indicare che invece di restituire una stringa, il metodo HomeController Index restituirà una visualizzazione. Aprire la classe HomeController e modificarne il metodo Index per restituire un ActionResult e restituirlo View().Open HomeController class and change its Index method to return an ActionResult, and have it return View().
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex4 HomeController Index)
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return this.View(); } }È ora necessario aggiungere un modello di visualizzazione appropriato. A tale scopo, fare clic con il pulsante destro del mouse all'interno del metodo di azione Indice e selezionare Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione .
Aggiunta di una vista dall'interno del metodo Index
Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione per generare un file modello di visualizzazione. Per impostazione predefinita, questa finestra di dialogo precompila il nome del modello Di visualizzazione in modo che corrisponda al metodo di azione che lo userà. Poiché è stato usato il menu di scelta rapida Aggiungi visualizzazione all'interno del metodo di azione Indice all'interno di HomeController, la finestra di dialogo Aggiungi visualizzazione include Index come nome di visualizzazione predefinito. Fare clic su Aggiungi.
Finestra di dialogo Aggiungi visualizzazione
Visual Studio genera un modello di visualizzazione Index.cshtml all'interno della cartella Views\Home e quindi lo apre.
Visualizzazione Indice home creata
Nota
il nome e il percorso del file Index.cshtml sono rilevanti e seguono le convenzioni di denominazione predefinite ASP.NET MVC.
La cartella \Views*Home* corrisponde al nome del controller (Home Controller). Il nome del modello di visualizzazione (Indice) corrisponde al metodo di azione del controller che visualizzerà la vista.
In questo modo, ASP.NET MVC evita di dover specificare in modo esplicito il nome o la posizione di un modello di visualizzazione quando si usa questa convenzione di denominazione per restituire una visualizzazione.
Il modello view generato si basa sul modello _layout.cshtml definito in precedenza. Aggiornare la proprietà ViewBag.Title in Home e modificare il contenuto principale in Questa è la home page, come illustrato nel codice seguente:
@{ ViewBag.Title = "Home"; } <h2>This is the Home Page</h2>Selezionare il progetto MvcMusicStore nella Esplora soluzioni e premere F5 per eseguire l'applicazione.
Attività 4: Verifica
Per verificare di aver eseguito correttamente tutti i passaggi dell'esercizio precedente, procedere come segue:
Con l'applicazione aperta in un browser, è necessario tenere presente che:
Il metodo di azione Index di HomeController ha trovato e visualizzato il modello \Views\Home\Index.cshtml View, anche se il codice denominato return View(), perché il modello View ha seguito la convenzione di denominazione standard.
Nella home page viene visualizzato il messaggio di benvenuto definito nel modello di visualizzazione \Views\Home\Index.cshtml .
La home page usa il modello _layout.cshtml e quindi il messaggio di benvenuto è contenuto nel layout HTML del sito standard.
Home Index View usando layoutPage e stile definiti
Esercizio 5: Creazione di un modello di visualizzazione
Finora, le visualizzazioni visualizzano codice HTML hardcoded, ma, per creare applicazioni Web dinamiche, il modello Visualizza deve ricevere informazioni dal controller. Una tecnica comune da usare a tale scopo è il modello ViewModel , che consente a un controller di creare un pacchetto di tutte le informazioni necessarie per generare la risposta HTML appropriata.
In questo esercizio si apprenderà come creare una classe ViewModel e aggiungere le proprietà necessarie: il numero di generi nell'archivio e un elenco di tali generi. Aggiornerai anche StoreController per usare il ViewModel creato e infine creerai un nuovo modello di visualizzazione che visualizzerà le proprietà indicate nella pagina.
Attività 1 - Creazione di una classe ViewModel
In questa attività verrà creata una classe ViewModel che implementerà lo scenario di presentazione dei generi nello Store.
Se non è già aperto, avviare VS Express for Web.
Scegliere Apri progetto dal menu File. Nella finestra di dialogo Apri progetto passare a Source\Ex05-CreatingAViewModel\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Creare una cartella ViewModels per contenere ViewModel. A tale scopo, fare clic con il pulsante destro del mouse sul progetto MvcMusicStore di primo livello, scegliere Aggiungi e quindi Nuova cartella.
Aggiunta di una nuova cartella
Assegnare alla cartella il nome ViewModels.
Cartella ViewModels in Esplora soluzioni
Creare una classe ViewModel . A tale scopo, fare clic con il pulsante destro del mouse sulla cartella ViewModels creata di recente, selezionare Aggiungi e quindi Nuovo elemento. In Codice scegliere l'elemento Classe e denominare il file StoreIndexViewModel.cs, quindi fare clic su Aggiungi.
Aggiunta di una nuova classe
Creazione della classe StoreIndexViewModel
Attività 2 - Aggiunta di proprietà alla classe ViewModel
Esistono due parametri da passare da StoreController al modello View per generare la risposta HTML prevista: il numero di generi nell'archivio e un elenco di tali generi.
In questa attività verranno aggiunte queste 2 proprietà alla classe StoreIndexViewModel : NumberOfGenres (un numero intero) e Generi (un elenco di stringhe).
Aggiungere le proprietà NumberOfGenres e Genres alla classe StoreIndexViewModel . A tale scopo, aggiungere le 2 righe seguenti alla definizione della classe:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Proprietà ex5 StoreIndexViewModel)
public class StoreIndexViewModel { public int NumberOfGenres { get; set; } public List<string> Genres { get; set; } }
Nota
La notazione { get; set; } usa la funzionalità delle proprietà implementate automaticamente da C#. Offre i vantaggi di una proprietà senza che sia necessario dichiarare un campo sottostante.
Attività 3 - Aggiornamento di StoreController per l'uso di StoreIndexViewModel
La classe StoreIndexViewModel incapsula le informazioni necessarie per passare dal metodo Index di StoreController a un modello View per generare una risposta.
In questa attività aggiornerai StoreController per usare StoreIndexViewModel.
Aprire la classe StoreController .
Apertura della classe StoreController
Per usare la classe StoreIndexViewModel da StoreController, aggiungere lo spazio dei nomi seguente nella parte superiore del codice StoreController :
(Frammento di codice - ASP.NET concetti fondamentali di MVC 4 - Ex5 StoreIndexViewModel con ViewModel)
using MvcMusicStore.ViewModels;Modificare il metodo di azione Index di StoreController in modo che crei e popola un oggetto StoreIndexViewModel e quindi lo passi a un modello View per generare una risposta HTML con essa.
Nota
In Lab "ASP.NET MVC Models and Data Access" si scriverà codice che recupera l'elenco dei generi di archiviazione da un database. Nel codice seguente verrà creato un elenco di generi di dati fittizi che popolano StoreIndexViewModel.
Dopo aver creato e configurato l'oggetto StoreIndexViewModel , verrà passato come argomento al metodo View . Ciò indica che il modello Di visualizzazione userà tale oggetto per generare una risposta HTML con essa.
Sostituire il metodo Index con il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Metodo Ex5 StoreController Index)
public ActionResult Index() { // Create a list of genres var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"}; // Create our view model var viewModel = new StoreIndexViewModel { NumberOfGenres = genres.Count(), Genres = genres }; return this.View(viewModel); }
Nota
Se non si ha familiarità con C#, è possibile presupporre che l'uso di var significa che la variabile viewModel è associata in ritardo. Risposta errata: il compilatore C# usa l'inferenza del tipo in base a ciò che si assegna alla variabile per determinare che viewModel è di tipo StoreIndexViewModel. Inoltre, compilando la variabile viewModel locale come tipo StoreIndexViewModel, si ottiene il controllo in fase di compilazione e il supporto dell'editor di codice di Visual Studio.
Attività 4 - Creazione di un modello di visualizzazione che usa StoreIndexViewModel
In questa attività verrà creato un modello di visualizzazione che userà un oggetto StoreIndexViewModel passato dal controller per visualizzare un elenco di generi.
Prima di creare il nuovo modello di visualizzazione, compilare il progetto in modo che la finestra di dialogo Aggiungi visualizzazione conosca la classe StoreIndexViewModel . Compilare il progetto selezionando la voce di menu Compila e quindi Compila MvcMusicStore.
Compilazione del progetto
Creare un nuovo modello di visualizzazione. A tale scopo, fare clic con il pulsante destro del mouse all'interno del metodo Index e scegliere Aggiungi visualizzazione.
Aggiunta di una visualizzazione
Poiché la finestra di dialogo Aggiungi visualizzazione è stata richiamata da StoreController, il modello Visualizza verrà aggiunto per impostazione predefinita in un file \Views\Store\Index.cshtml . Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e quindi selezionare StoreIndexViewModel come classe Model. Assicurarsi anche che il motore di visualizzazione selezionato sia Razor. Fare clic su Aggiungi.
Finestra di dialogo Aggiungi visualizzazione
Il file modello di visualizzazione \Views\Store\Index.cshtml viene creato e aperto. In base alle informazioni fornite alla finestra di dialogo Aggiungi visualizzazione nell'ultimo passaggio, il modello Visualizza prevede un'istanza di StoreIndexViewModel come dati da usare per generare una risposta HTML. Si noterà che il modello eredita un
ViewPage<musicstore.viewmodels.storeindexviewmodel>oggetto in C#.
Attività 5 - Aggiornamento del modello di visualizzazione
In questa attività si aggiornerà il modello Di visualizzazione creato nell'ultima attività per recuperare il numero di generi e i relativi nomi all'interno della pagina.
Nota
Per eseguire codice all'interno del modello Di visualizzazione, si userà la sintassi @ (spesso denominata "nuggets di codice").
- Nel file Index.cshtml, all'interno della cartella Store, sostituire il codice con il codice seguente:
@model MvcMusicStore.ViewModels.StoreIndexViewModel
@{
ViewBag.Title = "Browse Genres";
}
<h2>Browse Genres</h2>
<p>Select from @Model.NumberOfGenres genres</p>
- Scorrere l'elenco dei generi in StoreIndexViewModel e creare un elenco HTML <ul> usando un ciclo foreach. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel
@{
ViewBag.Title = "Browse Genres";
}
<h2>Browse Genres</h2>
<p>Select from @Model.NumberOfGenres genres</p>
<ul>
@foreach (string genreName in Model.Genres)
{
<li>
@genreName
</li>
}
</ul>
- Premere F5 per eseguire l'applicazione e sfogliare /Store. Verrà visualizzato l'elenco dei generi passati nell'oggetto StoreIndexViewModel da StoreController al modello View.
Visualizzazione di un elenco di generi
- Chiudere il browser.
Esercizio 6: Uso dei parametri nella visualizzazione
Nell'esercizio 3 si è appreso come passare i parametri al controller. In questo esercizio si apprenderà come usare questi parametri nel modello Di visualizzazione. A tale scopo, verranno introdotte prima le classi Model che consentiranno di gestire i dati e la logica di dominio. Si apprenderà anche come creare collegamenti alle pagine all'interno dell'applicazione MVC ASP.NET senza doversi preoccupare di elementi come la codifica dei percorsi URL.
Attività 1 - Aggiunta di classi di modelli
A differenza di ViewModels, che vengono creati solo per passare informazioni dal controller alla visualizzazione, le classi modello vengono compilate per contenere e gestire dati e logica di dominio. In questa attività verranno aggiunte due classi di modello per rappresentare questi concetti: Genre e Album.
Se non è già aperto, avviare VS Express for Web
Scegliere Apri progetto dal menu File. Nella finestra di dialogo Apri progetto passare a Source\Ex06-UsingParametersInView\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.
Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.
Aggiungere una classe Genre Model. A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Modelli nella Esplora soluzioni, selezionare Aggiungi e quindi l'opzione Nuovo elemento. In Codice scegliere l'elemento Classe e denominare il file Genre.cs, quindi fare clic su Aggiungi.
Aggiunta di un nuovo elemento
Aggiungi classe modello Genre
Aggiungere una proprietà Name alla classe Genre. A tale scopo, aggiungere il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex6 Genre)
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcMusicStore.Models { public class Genre { public string Name { get; set; } } }Seguendo la stessa procedura descritta in precedenza, aggiungere una classe Album . A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Modelli nella Esplora soluzioni, selezionare Aggiungi e quindi l'opzione Nuovo elemento. In Codice scegliere l'elemento Classe e denominare il file Album.cs, quindi fare clic su Aggiungi.
Aggiungere due proprietà alla classe Album: Genre e Title. A tale scopo, aggiungere il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex6 Album)
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcMusicStore.Models { public class Album { public string Title { get; set; } public Genre Genre { get; set; } } }
Attività 2 - Aggiunta di un storeBrowseViewModel
In questa attività verrà usato un oggetto StoreBrowseViewModel per visualizzare gli album corrispondenti a un genere selezionato. In questa attività si creerà questa classe e quindi si aggiungeranno due proprietà per gestire il genere e l'elenco dell'album.
Aggiungere una classe StoreBrowseViewModel . A tale scopo, fare clic con il pulsante destro del mouse sulla cartella ViewModels nella Esplora soluzioni, scegliere Aggiungi e quindi l'opzione Nuovo elemento. In Codice scegliere l'elemento Classe e denominare il file StoreBrowseViewModel.cs, quindi fare clic su Aggiungi.
Aggiungere un riferimento alla classe Models in StoreBrowseViewModel . A tale scopo, aggiungere lo spazio dei nomi seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex6 UsingModel)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using MvcMusicStore.Models; namespace MvcMusicStore.ViewModels { public class StoreBrowseViewModel { } }Aggiungere due proprietà alla classe StoreBrowseViewModel : Genre e Albums. A tale scopo, aggiungere il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Fundamentals - Ex6 ModelProperties)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using MvcMusicStore.Models; namespace MvcMusicStore.ViewModels { public class StoreBrowseViewModel { public Genre Genre { get; set; } public List<Album> Albums { get; set; } } }
Nota
Che cos'è List<Album> ?: questa definizione usa il tipo List<T> , dove T vincola il tipo a cui appartengono gli elementi di questo elenco , in questo caso Album (o uno dei relativi discendenti).
Questa possibilità di progettare classi e metodi che rinviano la specifica di uno o più tipi fino a quando la classe o il metodo non viene dichiarata e creata un'istanza dal codice client è una funzionalità del linguaggio C# denominato Generics.
List<T> è l'equivalente generico del tipo ArrayList ed è disponibile nello spazio dei nomi System.Collections.Generic . Uno dei vantaggi dell'uso di generics è che, poiché il tipo è specificato, non è necessario occuparsi di operazioni di controllo dei tipi, ad esempio il cast degli elementi in Album come si farebbe con un ArrayList.
Attività 3 - Uso del nuovo ViewModel in StoreController
In questa attività si modificheranno i metodi di azione Sfoglia e Dettagli di StoreController per usare il nuovo StoreBrowseViewModel.
Aggiungere un riferimento alla cartella Models nella classe StoreController . A tale scopo, espandere la cartella Controllers nella Esplora soluzioni e aprire la classe StoreController. Aggiungere quindi il codice seguente:
(Frammento di codice - ASP.NET concetti fondamentali di MVC 4 - Ex6 UsingModelInController)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcMusicStore.ViewModels; using MvcMusicStore.Models;Sostituire il metodo di azione Browse per usare la classe StoreViewBrowseController . Si creeranno un oggetto Genre e due nuovi oggetti Album con dati fittizi (nel prossimo lab pratico si utilizzeranno dati reali da un database). A tale scopo, sostituire il metodo Browse con il codice seguente:
(Frammento di codice - ASP.NET concetti fondamentali di MVC 4 - Ex6 BrowseMethod)
// // GET: /Store/Browse?genre=Disco public ActionResult Browse(string genre) { var genreModel = new Genre() { Name = genre }; var albums = new List<Album>() { new Album() { Title = genre + " Album 1" }, new Album() { Title = genre + " Album 2" } }; var viewModel = new StoreBrowseViewModel() { Genre = genreModel, Albums = albums }; return this.View(viewModel); }Sostituire il metodo di azione Details per usare la classe StoreViewBrowseController . Verrà creato un nuovo oggetto Album da restituire alla visualizzazione. A tale scopo, sostituire il metodo Details con il codice seguente:
(Frammento di codice - ASP.NET concetti fondamentali di MVC 4 - DettagliMethod ex6)
// // GET: /Store/Details/5 public ActionResult Details(int id) { var album = new Album { Title = "Sample Album" }; return this.View(album); }
Attività 4 - Aggiunta di un modello di visualizzazione Sfoglia
In questa attività verrà aggiunta una visualizzazione Sfoglia per visualizzare gli album trovati per un genere specifico.
Prima di creare il nuovo modello di visualizzazione, è necessario compilare il progetto in modo che la finestra di dialogo Aggiungi visualizzazione conosca la classe ViewModel da usare. Compilare il progetto selezionando la voce di menu Compila e quindi Compila MvcMusicStore.
Aggiungere una visualizzazione Sfoglia . A tale scopo, fare clic con il pulsante destro del mouse sul metodo azione Sfoglia di StoreController e scegliere Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome della visualizzazione sia Sfoglia. Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e selezionare StoreBrowseViewModel nell'elenco a discesa Classe modello . Lasciare invariati gli altri campi con il valore predefinito. Fare quindi clic su Aggiungi.
Aggiunta di una visualizzazione Sfoglia
Modificare Browse.cshtml per visualizzare le informazioni di Genre, accedendo all'oggetto StoreBrowseViewModel passato al modello di visualizzazione. A tale scopo, sostituire il contenuto con quanto segue: (C#)
@model MvcMusicStore.ViewModels.StoreBrowseViewModel @{ ViewBag.Title = "Browse Albums"; } <h2>Browsing Genre: @Model.Genre.Name</h2> <ul> @foreach (var album in Model.Albums) { <li>@album.Title</li> } </ul>
Attività 5 - Esecuzione dell'applicazione
In questa attività si verificherà che il metodo Browse recuperi gli album dall'azione del metodo Browse .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Browse? Genre=Disco per verificare che l'azione restituisca due album.
Esplora album disco store
Attività 6 - Visualizzazione di informazioni su un album specifico
In questa attività verrà implementata la visualizzazione Store/Dettagli per visualizzare informazioni su un album specifico. In questo lab pratico, tutto ciò che verrà visualizzato sull'album è già contenuto nel modello Visualizza . Invece di creare una classe StoreDetailsViewModel, userai quindi il modello StoreBrowseViewModel corrente passando l'album.
Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aggiungere una nuova visualizzazione Dettagli per il metodo di azione Dettagli di StoreController. A tale scopo, fare clic con il pulsante destro del mouse sul metodo Details nella classe StoreController e scegliere Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome della visualizzazione sia Dettagli. Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e selezionare Album dall'elenco a discesa Classe modello . Lasciare invariati gli altri campi con il valore predefinito. Fare quindi clic su Aggiungi. Verrà creato e aperto un file \Views\Store\Details.cshtml .
Aggiunta di una visualizzazione dettagli
Modificare il file Details.cshtml per visualizzare le informazioni dell'album, accedendo all'oggetto Album passato al modello di visualizzazione. A tale scopo, sostituire il contenuto con quanto segue: (C#)
@model MvcMusicStore.Models.Album @{ ViewBag.Title = "Details"; } <h2>Album: @Model.Title</h2>
Attività 7 - Esecuzione dell'applicazione
In questa attività si verificherà che la visualizzazione Dettagli recupera le informazioni dell'album dal metodo di azione Dettagli.
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Details/5 per verificare le informazioni dell'album.
Dettagli dell'album di esplorazione
Attività 8 - Aggiunta di collegamenti tra pagine
In questa attività verrà aggiunto un collegamento nella visualizzazione dello Store per avere un collegamento in ogni nome genere all'URL /Store/Browse appropriato. In questo modo, quando si fa clic su un genere, ad esempio Disco, si passerà a /Store/Browse?genre=Disco URL.
Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aggiornare la pagina Indice per aggiungere un collegamento alla pagina Sfoglia . A tale scopo, nella Esplora soluzioni espandere la cartella Visualizzazioni, quindi la cartella Store e fare doppio clic sulla pagina Index.cshtml.
Aggiungere un collegamento alla visualizzazione Sfoglia che indica il genere selezionato. A tale scopo, sostituire il codice evidenziato seguente all'interno dei <tag li> : (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel @{ ViewBag.Title = "Browse Genres"; } <h2>Browse Genres</h2> <p> Select from @Model.NumberOfGenres genres</p> <ul> @foreach (string genreName in Model.Genres) { <li> @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null) </li> } </ul>Nota
un altro approccio consiste nel collegamento diretto alla pagina, con un codice simile al seguente:
<a href="/Store/Browse?genre=@genreName">@genreName</a>
Anche se questo approccio funziona, dipende da una stringa hardcoded. Se in un secondo momento si rinomina il controller, sarà necessario modificare questa istruzione manualmente. Un'alternativa migliore consiste nell'usare un metodo helper HTML. ASP.NET MVC include un metodo helper HTML disponibile per tali attività. Il metodo helper Html.ActionLink() semplifica la compilazione di collegamenti> HTML<, assicurandosi che i percorsi URL siano codificati correttamente.
Html.ActionLink include diversi overload. In questo esercizio si userà uno che accetta tre parametri:
- Testo del collegamento, che visualizzerà il nome del genere
- Nome azione controller (Sfoglia)
- Valori dei parametri di route, specificando sia il nome (Genre) che il valore (Nome genere)
Attività 9 - Esecuzione dell'applicazione
In questa attività si verificherà che ogni genere venga visualizzato con un collegamento all'URL /Store/Browse appropriato.
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store per verificare che ogni genere sia collegato all'URL /Store/Browse appropriato.
Esplorazione di generi con collegamenti alla pagina Sfoglia
Attività 10 - Uso della raccolta Dynamic ViewModel per passare i valori
In questa attività si apprenderà un metodo semplice e potente per passare i valori tra il controller e la visualizzazione senza apportare modifiche al modello. ASP.NET MVC 4 fornisce la raccolta "ViewModel", che può essere assegnata a qualsiasi valore dinamico e accessibile anche all'interno di controller e visualizzazioni.
Si userà ora la raccolta dinamica ViewBag per passare un elenco di "Generi con stelle" dal controller alla visualizzazione. La visualizzazione Store Index accederà a ViewModel e visualizzerà le informazioni.
Chiudere il browser, se necessario, per tornare alla finestra di Visual Studio. Aprire StoreController.cs e modificare il metodo Index per creare un elenco di generi con stella nella raccolta ViewModel :
public ActionResult Index() { // Create list of genres var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" }; // Create your view model var viewModel = new StoreIndexViewModel { NumberOfGenres = genres.Count, Genres = genres }; ViewBag.Starred = new List<string> { "Rock", "Jazz" }; return this.View(viewModel); }Nota
È anche possibile usare la sintassi ViewBag["Starred"] per accedere alle proprietà.
L'icona a stella "starred.png" è inclusa nella cartella Source\Assets\Images di questo lab. Per aggiungerlo all'applicazione, trascinare il contenuto da una finestra di Esplora risorse nella Esplora soluzioni in Visual Web Developer Express, come illustrato di seguito:
Aggiunta di un'immagine star alla soluzione
Aprire la vista Store/Index.cshtml e modificare il contenuto. Leggere la proprietà "starred" nell'insieme ViewBag e chiedere se il nome del genere corrente è presente nell'elenco. In questo caso verrà visualizzata un'icona a stella a destra del collegamento di genere. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel @{ ViewBag.Title = "Browse Genres"; } <h2>Browse Genres</h2> <p>Select from @Model.NumberOfGenres genres</p> <ul> @foreach (string genreName in Model.Genres) { <li> @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null) @if (ViewBag.Starred.Contains(genreName)) { <img src="../../Content/Images/starred.png" alt="Starred element" /> } </li> } </ul> <br /> <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
Attività 11 - Esecuzione dell'applicazione
In questa attività si verificherà che i generi con stelle visualizzino un'icona a stella.
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store per verificare che ogni genere in primo piano abbia l'etichetta di rispetto:
Esplorazione di generi con elementi con stelle
Esercizio 7: Un giro intorno ASP.NET nuovo modello MVC 4
In questo esercizio verranno esaminati i miglioramenti nei modelli di progetto ASP.NET MVC 4, esaminando le funzionalità più rilevanti del nuovo modello.
Attività 1: Esplorazione del ASP.NET modello di applicazione Internet MVC 4 MVC 4
Se non è già aperto, avviare VS Express for Web
Selezionare il file | Nuovo | Comando di menu Progetto . Nella finestra di dialogo Nuovo progetto selezionare Visual C#|Modello Web nell'albero del riquadro sinistro e scegliere l'applicazione Web MVC 4 ASP.NET. Denominare il progetto MusicStore e aggiornare il nome della soluzione in Begin, quindi selezionare un percorso (o lasciare il valore predefinito) e fare clic su OK.
Creazione di un nuovo progetto ASP.NET MVC 4
Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare il modello di progetto Applicazione Internet e fare clic su OK. Si noti che è possibile selezionare Razor o ASPX come motore di visualizzazione.
Creazione di una nuova applicazione Internet MVC 4 ASP.NET
Nota
La sintassi Razor è stata introdotta in ASP.NET MVC 3. L'obiettivo è ridurre al minimo il numero di caratteri e sequenze di tasti necessari in un file, abilitando un flusso di lavoro di codifica veloce e fluido. Razor sfrutta le competenze esistenti del linguaggio C#/VB (o altre) e offre una sintassi di markup del modello che consente un flusso di lavoro di costruzione HTML impressionante.
Premere F5 per eseguire la soluzione e visualizzare il modello rinnovato. È possibile consultare le funzionalità seguenti:
Modelli moderni
I modelli sono stati rinnovati, fornendo stili più moderni.
modelli ASP.NET MVC 4 con aspetto
Rendering adattivo
Controllare il ridimensionamento della finestra del browser e notare come il layout di pagina si adatti dinamicamente alle nuove dimensioni della finestra. Questi modelli usano la tecnica di rendering adattiva per eseguire correttamente il rendering in piattaforme desktop e per dispositivi mobili senza alcuna personalizzazione.
ASP.NET modello di progetto MVC 4 in dimensioni del browser diverse
Chiudere il browser per arrestare il debugger e tornare a Visual Studio.
Ora è possibile esplorare la soluzione ed esaminare alcune delle nuove funzionalità introdotte da ASP.NET MVC 4 nel modello di progetto.
Modello di progetto applicazione Internet MVC 4 ASP.NET
Markup HTML5
Esplorare le visualizzazioni modello per scoprire il nuovo markup del tema, ad esempio aprire la visualizzazione About.cshtml all'interno della cartella Home .
Nuovo modello, con il markup Razor e HTML5
Librerie JavaScript incluse
jQuery: jQuery semplifica l'attraversamento dei documenti HTML, la gestione degli eventi, l'animazione e le interazioni Ajax.
interfaccia utente di jQuery: questa libreria fornisce astrazioni per interazioni e animazioni di basso livello, effetti avanzati e widget temibili, basati sulla libreria JavaScript jQuery.
Nota
È possibile ottenere informazioni sull'interfaccia utente di jQuery e jQuery in [http://docs.jquery.com/](http://docs.jquery.com/).
KnockoutJS: il modello predefinito ASP.NET MVC 4 include ora KnockoutJS, un framework MVVM JavaScript che consente di creare applicazioni Web avanzate e altamente reattive usando JavaScript e HTML. Come in ASP.NET MVC 3, le librerie jQuery e jQuery dell'interfaccia utente sono incluse anche in ASP.NET MVC 4.
Nota
Per altre informazioni sulla libreria KnockOutJS, vedere questo collegamento: http://learn.knockoutjs.com/.
Modernizr: questa libreria viene eseguita automaticamente, rendendo il sito compatibile con browser meno recenti quando si usano tecnologie HTML5 e CSS3.
Nota
Per altre informazioni sulla libreria Modernizr, vedere questo collegamento: http://www.modernizr.com/.
SimpleMembership inclusa nella soluzione
SimpleMembership è stato progettato come sostituzione del precedente sistema di provider di ruoli e appartenenze ASP.NET. Offre molte nuove funzionalità che rendono più semplice per lo sviluppatore proteggere le pagine Web in modo più flessibile.
Il modello Internet ha già configurato alcuni aspetti per integrare SimpleMembership, ad esempio AccountController è pronto a usare OAuthWebSecurity (per la registrazione dell'account OAuth, l'accesso, la gestione e così via) e la sicurezza Web.
SimpleMembership Incluso nella soluzione
Nota
Altre informazioni su OAuthWebSecurity sono disponibili in MSDN.
Nota
Inoltre, è possibile distribuire questa applicazione nei siti Web di Windows Azure dopo l'Appendice B: Pubblicazione di un'applicazione ASP.NET MVC 4 tramite Distribuzione Web.
Riepilogo
Completando questo lab pratico si sono appresi i concetti fondamentali di ASP.NET MVC:
- Gli elementi principali di un'applicazione MVC e il modo in cui interagiscono
- Come creare un'applicazione MVC ASP.NET
- Come aggiungere e configurare controller per gestire i parametri passati tramite l'URL e la stringa di query
- Come aggiungere una pagina master di layout per configurare un modello per contenuto HTML comune, un foglio StyleSheet per migliorare l'aspetto e un modello di visualizzazione per visualizzare il contenuto HTML
- Come usare il modello ViewModel per passare le proprietà al modello Di visualizzazione per visualizzare informazioni dinamiche
- Come usare i parametri passati ai controller nel modello Di visualizzazione
- Come aggiungere collegamenti alle pagine all'interno dell'applicazione MVC ASP.NET
- Come aggiungere e usare proprietà dinamiche in una visualizzazione
- Miglioramenti nei modelli di progetto ASP.NET MVC 4
Appendice A: Installazione di Visual Studio Express 2012 per Web
È possibile installare Microsoft Visual Studio Express 2012 per Il Web o un'altra versione "Express" usando il Installazione guidata piattaforma Web Microsoft. Le istruzioni seguenti illustrano i passaggi necessari per installare Visual Studio Express 2012 per Il Web usando Installazione guidata piattaforma Web Microsoft.
Passare a [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). In alternativa, se è già stato installato Il programma di installazione della piattaforma Web, è possibile aprirlo e cercare il prodotto "Visual Studio Express 2012 for Web con Windows Azure SDK".
Fare clic su Installa ora. Se non si dispone del programma di installazione della piattaforma Web, si verrà reindirizzati per scaricarlo e installarlo per primo.
Dopo aver aperto Il programma di installazione della piattaforma Web, fare clic su Installa per avviare l'installazione.
Installare Visual Studio Express
Leggere tutte le licenze e le condizioni dei prodotti e fare clic su Accetto per continuare.
Accettazione delle condizioni di licenza
Attendere il completamento del processo di download e installazione.
Stato dell'installazione
Al termine dell'installazione, fare clic su Fine.
Installazione completata
Fare clic su Esci per chiudere Programma di installazione piattaforma Web.
Per aprire Visual Studio Express for Web, passare alla schermata Start e iniziare a scrivere "VS Express", quindi fare clic sul riquadro VS Express for Web.
Riquadro di VS Express per Il Web
Appendice B: Pubblicazione di un'applicazione MVC 4 ASP.NET tramite distribuzione Web
Questa appendice illustra come creare un nuovo sito Web dal portale di gestione di Windows Azure e pubblicare l'applicazione ottenuta seguendo il lab, sfruttando la funzionalità di pubblicazione Distribuzione Web fornita da Windows Azure.
Attività 1 - Creazione di un nuovo sito Web dal portale di Windows Azure
Passare al portale di gestione di Windows Azure e accedere usando le credenziali Microsoft associate alla sottoscrizione.
Nota
Con Windows Azure è possibile ospitare gratuitamente 10 siti Web ASP.NET e quindi ridimensionare man mano che il traffico cresce. È possibile iscriversi qui.
Accedere al portale di gestione di Windows Azure
Fare clic su Nuovo sulla barra dei comandi.
Creazione di un nuovo sito Web
Fare clic su Calcolo | sito Web. Selezionare quindi l'opzione Creazione rapida. Specificare un URL disponibile per il nuovo sito Web e fare clic su Crea sito Web.
Nota
Un sito Web di Windows Azure è l'host di un'applicazione Web in esecuzione nel cloud che è possibile controllare e gestire. L'opzione Creazione rapida consente di distribuire un'applicazione Web completata nel sito Web di Windows Azure dall'esterno del portale. Non include i passaggi per la configurazione di un database.
Creazione di un nuovo sito Web con creazione rapida
Attendere la creazione del nuovo sito Web.
Dopo aver creato il sito Web, fare clic sul collegamento nella colonna URL . Verificare che il nuovo sito Web funzioni.
Esplorazione del nuovo sito Web
Sito Web in esecuzione
Tornare al portale e fare clic sul nome del sito Web nella colonna Nome per visualizzare le pagine di gestione.
Apertura delle pagine di gestione del sito Web
Nella pagina Dashboard fare clic sul collegamento Download publish profile (Scarica profilo di pubblicazione).
Nota
Il profilo di pubblicazione contiene tutte le informazioni necessarie per pubblicare un'applicazione Web in un sito Web di Windows Azure per ogni metodo di pubblicazione abilitato. Il profilo di pubblicazione contiene gli URL, le credenziali utente e le stringhe di database necessari per connettersi ed eseguire l'autenticazione su ognuno degli endpoint per cui è abilitato un metodo di pubblicazione. Microsoft WebMatrix 2, Microsoft Visual Studio Express per il Web e Microsoft Visual Studio 2012 supportano la lettura dei profili di pubblicazione per automatizzare la configurazione di questi programmi per la pubblicazione di applicazioni Web nei siti Web di Windows Azure.
Download del profilo di pubblicazione del sito Web
Scaricare il file del profilo di pubblicazione in un percorso noto. Più avanti in questo esercizio si vedrà come usare questo file per pubblicare un'applicazione Web in siti Web di Windows Azure da Visual Studio.
Salvataggio del file del profilo di pubblicazione
Attività 2 - Configurazione del server di database
Se l'applicazione usa i database di SQL Server, sarà necessario creare un server database SQL. Se si vuole distribuire una semplice applicazione che non usa SQL Server, è possibile ignorare questa attività.
È necessario un server database SQL per archiviare il database dell'applicazione. È possibile visualizzare i server database SQL dalla sottoscrizione nel portale di gestione di Windows Azure nel dashboard del server dei database | | SQL. Se non è stato creato un server, è possibile crearne uno usando il pulsante Aggiungi sulla barra dei comandi. Prendere nota del nome del server e dell'URL, del nome di accesso amministratore e della password, perché verranno usati nelle attività successive. Non creare ancora il database, perché verrà creato in una fase successiva.
Dashboard del server database SQL
Nell'attività successiva verrà testata la connessione al database da Visual Studio, per questo motivo è necessario includere l'indirizzo IP locale nell'elenco degli indirizzi IP consentiti del server. A tale scopo, fare clic su Configura, selezionare l'indirizzo IP da Indirizzo IP client corrente e incollarlo nelle caselle di testo Start IP Address and End IP Address (Indirizzo IP iniziale e Indirizzo IP finale) e fare clic sul
pulsante .
Aggiunta dell'indirizzo IP client
Dopo aver aggiunto l'indirizzo IP client all'elenco indirizzi IP consentiti, fare clic su Salva per confermare le modifiche.
Conferma modifiche
Attività 3- Pubblicazione di un'applicazione ASP.NET MVC 4 tramite distribuzione Web
Tornare alla soluzione ASP.NET MVC 4. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto del sito Web e scegliere Pubblica.
Pubblicazione del sito Web
Importare il profilo di pubblicazione salvato nella prima attività.
Importazione del profilo di pubblicazione
Fare clic su Convalida connessione. Al termine della convalida, fare clic su Avanti.
Nota
La convalida viene completata dopo aver visualizzato un segno di spunta verde accanto al pulsante Convalida connessione.
Convalida della connessione
Nella pagina Impostazioni, nella sezione Database, fare clic sul pulsante accanto alla casella di testo della connessione al database, ad esempio DefaultConnection.
Configurazione distribuzione Web
Configurare la connessione al database come indicato di seguito:
Nel nome del server digitare l'URL del server database SQL usando il prefisso tcp: .
In Nome utente digitare il nome di accesso dell'amministratore del server.
In Password digitare la password di accesso dell'amministratore del server.
Digitare un nuovo nome di database, ad esempio MVC4SampleDB.
Configurazione di stringa di connessione di destinazione
Quindi fare clic su OK. Quando viene richiesto di creare il database, fare clic su Sì.
Creazione del database
Il stringa di connessione che verrà usato per connettersi a database SQL in Windows Azure viene visualizzato nella casella di testo Connessione predefinita. Fare clic su Avanti.
Stringa di connessione che punta a database SQL
Nella pagina Anteprima fare clic su Pubblica.
Pubblicazione dell'applicazione Web
Al termine del processo di pubblicazione, il browser predefinito aprirà il sito Web pubblicato.
Applicazione pubblicata in Windows Azure
Appendice C: Uso di frammenti di codice
Con i frammenti di codice è disponibile tutto il codice necessario a portata di mano. Il documento del lab indica esattamente quando è possibile usarli, come illustrato nella figura seguente.
Uso dei frammenti di codice di Visual Studio per inserire codice nel progetto
Per aggiungere un frammento di codice usando la tastiera (solo C#)
- Posizionare il cursore in cui si desidera inserire il codice.
- Iniziare a digitare il nome del frammento (senza spazi o trattini).
- Guardare come IntelliSense visualizza i nomi dei frammenti di codice corrispondenti.
- Selezionare il frammento corretto (o continuare a digitare fino a quando non viene selezionato il nome dell'intero frammento).
- Premere il tasto TAB due volte per inserire il frammento di codice nella posizione del cursore.
Iniziare a digitare il nome del frammento
Premere TAB per selezionare il frammento di codice evidenziato
Premere di nuovo TAB e il frammento di codice verrà espanso
Per aggiungere un frammento di codice usando il mouse (C#, Visual Basic e XML) 1. Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice.
- Selezionare Inserisci frammento di codice seguito da Frammenti di codice personali.
- Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso.
Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento
Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso