Concetti fondamentali su ASP.NET MVC 4
Scaricare Il kit di training per i campi Web
Questo lab Hands-On si basa su MVC (Model View Controller) Music Store, un'applicazione di esercitazione che introduce e spiega in dettaglio come usare ASP.NET MVC e Visual Studio. In tutto il lab si apprenderà la semplicità, ma il potere di usare queste tecnologie insieme. Si inizierà con un'applicazione semplice e verrà compilata fino a quando non si dispone di un'applicazione Web MVC 4 completamente ASP.NET funzionale.
Questo lab funziona con ASP.NET MVC 4.
Se si vuole esplorare la versione ASP.NET MVC 3 dell'applicazione di esercitazione, è possibile trovarla in MVC-Music-Store.
In questo Hands-On Lab si presuppone che lo sviluppatore abbia esperienza nelle tecnologie di sviluppo Web, ad esempio HTML e JavaScript.
Nota
Tutti i frammenti di codice e codice di esempio sono inclusi nel Web Camps Training Kit, disponibile in Microsoft-Web/WebCampTrainingKit Release. Il progetto specifico per questo lab è disponibile in ASP.NET concetti fondamentali MVC 4.
Applicazione Music Store
L'applicazione Web di Music Store che verrà compilata in questo Lab comprende tre parti principali: shopping, checkout e amministrazione. I visitatori potranno esplorare gli album in base al genere, aggiungere album al carrello, rivedere la loro selezione e infine procedere al pagamento per accedere e completare l'ordine. Inoltre, gli amministratori dell'archivio potranno gestire gli album disponibili e le relative proprietà principali.
di
Schermate di Music Store
ASP.NET MVC 4 Essentials
L'applicazione Music Store verrà compilata usando Model View Controller (MVC), 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 di dominio. Spesso, 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. Questa interfaccia utente viene in genere creata in base ai dati del modello. Un esempio è la visualizzazione di modifica degli Album che visualizza le 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 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 ASP.NET MVC offre un'alternativa al modello di Web Forms ASP.NET per la creazione di applicazioni Web basate su MVC ASP.NET. Il framework ASP.NET MVC è un framework di presentazione leggero e altamente testabile che , come per le applicazioni basate su moduli Web, è 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 principale. Questo è 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 visualizzazione, 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 di Hands-On si apprenderà come:
- Creare un'applicazione MVC di 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 esplorare la funzionalità principale
- Aggiungere una visualizzazione per personalizzare il contenuto visualizzato insieme allo stile
- Aggiungere classi modello per contenere e gestire i dati e la logica di dominio
- Usare il modello di visualizzazione 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 (leggere Appendice A per istruzioni su come installarlo)
Installazione
Installazione di frammenti di codice
Per praticità, gran parte del codice che si gestirà lungo 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 di Hands-On è costituito dagli esercizi seguenti:
- Esercizio 1: Creazione di MusicStore ASP.NET progetto 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 ulteriori informazioni su come usare gli esercizi.
Tempo stimato per completare questo lab: 60 minuti.
Esercizio 1: Creazione di MusicStore ASP.NET progetto applicazione Web MVC
In questo esercizio si apprenderà come creare un'applicazione MVC di ASP.NET in Visual Studio 2012 Express for Web e la relativa organizzazione principale delle cartelle. Inoltre, si apprenderà 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 ASP.NET applicazione Web MVC 4 , disponibile nell'elenco di modelli Visual C#,Web .
Modificare il nome in MvcMusicStore.
Impostare il percorso della soluzione all'interno di una nuova cartella Begin nella cartella Origine 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 Di base e assicurarsi che il motore di visualizzazione selezionato sia Razor. Fare clic su OK.
Finestra di dialogo Nuovo ASP.NET progetto MVC 4
Attività 2 - Esplorazione della struttura della soluzione
Il framework ASP.NET MVC 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 ASP.NET MVC con le cartelle, i modelli di elemento e le voci di 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 di ASP.NET per impostazione predefinita usa un approccio "convenzione sulla configurazione" e effettua alcune ipotesi predefinite basate sulle convenzioni di denominazione delle cartelle.
Dopo aver creato il progetto, esaminare la struttura di cartelle creata nel Esplora soluzioni sul lato destro:
ASP.NET struttura della cartella MVC 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 i nomi di tutti i controller da terminare 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 il codice che definisce gli oggetti e la logica per l'interazione con l'archivio dati. Gli oggetti dei modelli effettivi si troveranno in genere 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.
Viste. Questa cartella è la posizione consigliata per le visualizzazioni, i componenti responsabili della visualizzazione dell'interfaccia utente dell'applicazione. Le visualizzazioni usano file con estensione aspx, ascx, cshtml e master, oltre a qualsiasi altro file correlato alle visualizzazioni di rendering. La cartella Visualizzazioni contiene una cartella per ogni controller; la cartella è 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 con estensione aspx con il nome di visualizzazione richiesto nella cartella Views\controllerName (Views[ControllerName][Action].aspx) o (Views[ControllerName][Action].cshtml) per Razor Views.
Nota
Oltre alle cartelle elencate in precedenza, un'applicazione Web MVC usa il file Global.asax per impostare le impostazioni predefinite di routing degli URL globali e usa il file Web.config per configurare l'applicazione.
Attività 3 - Aggiunta di un homeController
Nelle applicazioni ASP.NET che non usano il framework MVC, l'interazione utente è organizzata intorno alle pagine e intorno alla generazione e alla gestione degli eventi da tali pagine. Al contrario, l'interazione utente con ASP.NET applicazioni MVC è organizzata intorno 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 utente e le interazioni, eseguono la logica dell'applicazione appropriata e determinano la risposta per l'invio al client (visualizzare HTML, scaricare un file, reindirizzare a un URL diverso e così via). Nel caso della visualizzazione di 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 di Music Store.
Fare clic con il pulsante destro del mouse sulla cartella Controller all'interno del Esplora soluzioni, selezionare Aggiungi e quindi comando Controller:
Aggiungi comando controller
Viene visualizzata la finestra di dialogo Aggiungi controller . Assegnare un nome al controller HomeController e premere Aggiungi.
Finestra di dialogo Aggiungi controller
Il file HomeController.cs viene creato nella cartella Controller . Per avere homeController restituire una stringa sull'azione Index, sostituire il metodo Index con il codice seguente:
(Frammento di codice - ASP.NET nozioni fondamentali MVC 4 - Indice HomeController ex1)
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 gratuito 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:
- Pagina di presentazione dei generi musicali nel Music Store
- Pagina sfoglia che elenca tutti gli album musicali per un genere specifico
- Pagina dei dettagli che mostra informazioni su un album musicale specifico
Per l'ambito di questo esercizio, queste 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.
Nel menu File scegliere Apri progetto. Nella finestra di dialogo Apri progetto passare a Source\Ex02-CreateAController\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se si apre 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 pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare 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 Controller 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 di nuovo al browser o all'utente che ha richiamato l'URL.
La classe StoreController ha già un metodo Index . Verrà usato più avanti in questo Lab per implementare la pagina che elenca tutti i generi dello store musicale. Per il momento, sostituire il metodo Index con il codice seguente che restituisce una stringa "Hello from Store.Index()":
(Frammento di codice - ASP.NET concetti fondamentali MVC 4 - Indice Ex2 StoreController)
public string Index() { return "Hello from Store.Index()"; }Aggiungere metodi Sfoglia e Dettagli . A tale scopo, aggiungere il codice seguente a StoreController:
(Frammento di codice - ASP.NET concetti fondamentali MVC 4 - 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/Sfoglia. Verrà visualizzato "Hello from Store.Browse()".
/Store/Dettagli. Verrà visualizzato "Hello from Store.Details()".
Navigazione /Store/Sfoglia
Chiudere il browser.
Esercizio 3: Passaggio di parametri a un controller
Fino a questo momento, si sono restituite stringhe costanti dai controller. In questo esercizio si apprenderà come passare i parametri a un controller usando l'URL e la querystring e quindi rendere le azioni del metodo rispondono con il testo al browser.
Attività 1 - Aggiunta di parametri di genere a StoreController
In questa attività si userà querystring per inviare parametri al metodo di azione Browse in StoreController.
Se non è già aperto, avviare VS Express per Web.
Nel menu File scegliere Apri progetto. 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 si apre 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 pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare 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 genere 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 Concetti fondamentali - 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 nella visualizzazione con un collegamento come /Store/Browse? Genere=<finestra script.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 di genere .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Sfoglia? Genre=Disco per verificare che l'azione riceva il parametro di genere.
Navigazione /Store/Sfoglia? Genere=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 Dettagli 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 action ha il parametro id, ASP.NET MVC passerà automaticamente il segmento URL come parametro. Nell'URL Store/Dettagli/5l'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 concetti fondamentali MVC 4 - Dettagli di Ex3 StoreControllerMethod)
// 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.
Navigazione /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 forniscono un approccio migliore per la generazione di HTML nel browser con l'uso di file di modello.
In questo esercizio si apprenderà come aggiungere una pagina master di layout per configurare un modello per il contenuto HTML comune, un foglio stile per migliorare l'aspetto e 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 per Web.
Nel menu File scegliere Apri progetto. Nella finestra di dialogo Apri progetto passare a Source\Ex04-CreateAView\Begin, selezionare Begin.sln e fare clic su Apri. In alternativa, è possibile continuare con la soluzione ottenuta dopo aver completato l'esercizio precedente.
Se si apre 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 pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare 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 <corpo> . @RenderBody() all'interno del corpo HTML identificare le aree che visualizzano i modelli potranno 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 corpo 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 di foglio di stile CSS
Il modello di progetto vuoto include un file CSS molto semplificato che include solo stili usati per visualizzare i messaggi di base e convalida. Si useranno immagini e CSS aggiuntive (potenzialmente fornite da una finestra di progettazione) per migliorare l'aspetto e 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 windows nella Esplora soluzioni in Visual Studio Express per Web, come illustrato di seguito:
Trascinamento del contenuto dello stile
Verrà visualizzata una finestra di dialogo di avviso, chiedendo la conferma di sostituire il file Site.css 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à verrà aggiunto un modello di visualizzazione per generare la risposta HTML che userà la pagina master del layout e il CSS aggiunti in questo esercizio.
Per usare un modello Di visualizzazione durante l'esplorazione della home page del sito, sarà prima necessario indicare che invece di restituire una stringa, il metodo HomeController Index restituirà una visualizzazione. Aprire la classe HomeController e modificare il metodo Index per restituire un Oggetto ActionResult e renderlo view ().
(Frammento di codice - ASP.NET nozioni fondamentali MVC 4 - Indice HomeController ex4)
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 azione Index e selezionare Aggiungi visualizzazione. Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione .
Aggiunta di una visualizzazione 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 pre-popola 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 Index all'interno di HomeController, la finestra di dialogo Aggiungi visualizzazione include Index come nome di visualizzazione predefinito. Scegliere 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.
creatoVisualizzazione indice home creata
Nota
nome e percorso del file Index.cshtml è pertinente e segue le convenzioni di denominazione di MVC predefinite ASP.NET.
La cartella \Views*Home* corrisponde al nome del controller (Home Controller). Il nome del modello View (Indice) corrisponde al metodo di azione del controller che verrà visualizzato nella visualizzazione della visualizzazione.
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 di visualizzazione 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, si noti che:
Il metodo di azione Index di HomeController trovato e visualizzato il modello di visualizzazione \Views\Home\Index.cshtml , anche se il codice denominato View (), perché il modello View ha seguito la convenzione di denominazione standard.
La Home Page visualizza il messaggio di benvenuto definito all'interno del 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.
Visualizzazione indice home usando layoutPage e stile definiti
Esercizio 5: Creazione di un modello di visualizzazione
Finora, le visualizzazioni visualizzano il codice HTML hardcoded, ma, per creare applicazioni Web dinamiche, il modello Di visualizzazione deve ricevere informazioni dal controller. Una tecnica comune da usare per 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. Si aggiornerà anche StoreController per usare ViewModel creato e infine si creerà 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 dello Store.
Se non è già aperto, avviare VS Express per Web.
Nel menu File scegliere Apri progetto. 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 si apre 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 pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare 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, selezionare Aggiungi e quindi Nuova cartella.
Aggiunta di una nuova cartella
Assegnare un nome alla cartella 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 assegnare al file StoreIndexViewModel.cs il nome e 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 Di visualizzazione per generare la risposta HTML prevista: il numero di generi nello store e un elenco di tali generi.
In questa attività si aggiungeranno queste 2 proprietà alla classe StoreIndexViewModel : NumberOfGenres (un intero) e Genere (elenco di stringhe).
Aggiungere le proprietà NumberOfGenres e Genres alla classe StoreIndexViewModel . A tale scopo, aggiungere le seguenti 2 righe alla definizione della classe:
(Frammento di codice - ASP.NET nozioni fondamentali MVC 4 - 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à di proprietà implementata automaticamente da C#. Offre i vantaggi di una proprietà senza richiedere di dichiarare un campo di backup.
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à si aggiornerà 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 MVC 4 - Ex5 StoreIndexViewModel con ViewModels)
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 Di visualizzazione per generare una risposta HTML con esso.
Nota
In Lab "ASP.NET modelli MVC e accesso ai dati" 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 . Questo indica che il modello Di visualizzazione userà tale oggetto per generare una risposta HTML con esso.
Sostituire il metodo Index con il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Concetti fondamentali - 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. Non è corretto: il compilatore C# usa l'inferenza dei tipi in base a ciò che si assegna alla variabile per determinare che viewModel è di tipo StoreIndexViewModel. Compilare anche la variabile viewModel locale come tipo StoreIndexViewModel per ottenere 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 selezionare Aggiungi visualizzazione.
Aggiunta di una visualizzazione
Poiché la finestra di dialogo Aggiungi visualizzazione è stata richiamata da StoreController, il modello di visualizzazione 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 inoltre che il motore di visualizzazione selezionato sia Razor. Scegliere Aggiungi.
Finestra di dialogo Aggiungi visualizzazione
Il file di modello \Views\Store\Index.cshtml View viene creato e aperto. In base alle informazioni fornite alla finestra di dialogo Aggiungi visualizzazione nell'ultimo passaggio, il modello Di visualizzazione 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>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
Si userà la sintassi @ (spesso denominata "nuggets di codice") per eseguire il codice all'interno del modello Di visualizzazione.
- Nel file Index.cshtml , all'interno della cartella Store , sostituire il codice con quanto segue:
@model MvcMusicStore.ViewModels.StoreIndexViewModel
@{
ViewBag.Title = "Browse Genres";
}
<h2>Browse Genres</h2>
<p>Select from @Model.NumberOfGenres genres</p>
- Eseguire il ciclo sull'elenco dei generi in StoreIndexViewModel e creare un elenco ul> HTML< 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 esplorare /Store. Verrà visualizzato l'elenco dei generi passati nell'oggetto StoreIndexViewModel dal modello StoreController al modello View.
Visualizzazione di un elenco di generi
- Chiudere il browser.
Esercizio 6: Uso di parametri nella visualizzazione
In 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, verrà introdotto prima di tutto alle classi Model che consentono di gestire i dati e la logica di dominio. Si apprenderà anche come creare collegamenti alle pagine all'interno dell'applicazione ASP.NET MVC senza preoccuparsi di cose come la codifica dei percorsi URL.
Attività 1 - Aggiunta di classi di modello
A differenza di ViewModels, che vengono creati solo per passare informazioni dal controller alla visualizzazione, le classi modello vengono compilate per contenere e gestire la logica di dati e dominio. In questa attività verranno aggiunte due classi di modello per rappresentare questi concetti: Genere e Album.
Se non è già aperto, avviare VS Express per Web
Nel menu File scegliere Apri progetto. 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 si apre 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 pacchetti mancanti.
Compilare infine la soluzione facendo clic su Compila | soluzione.
Nota
Uno dei vantaggi dell'uso di NuGet è che non è necessario inviare 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 assegnare al file Genere.cs il nome e quindi fare clic su Aggiungi.
Aggiunta di un nuovo elemento
Aggiungi classe Del modello di genere
Aggiungere una proprietà Name alla classe Genre. A tale scopo, aggiungere il codice seguente:
(Frammento di codice - ASP.NET MVC 4 Concetti fondamentali - Ex6 Genere)
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 di prima, 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 assegnare al file Album.cs il nome e quindi fare clic su Aggiungi.
Aggiungere due proprietà alla classe Album: Genere e Titolo. 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 StoreBrowseViewModel per visualizzare gli album che corrispondono a un genere selezionato. In questa attività si creerà questa classe e 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, selezionare Aggiungi e quindi l'opzione Nuovo elemento. In Codice scegliere l'elemento Classe e assegnare al file StoreBrowseViewModel.cs il nome e quindi fare clic su Aggiungi.
Aggiungere un riferimento alla classe Models in StoreBrowseViewModel . A tale scopo, aggiungere gli spazi dei nomi seguenti:
(Frammento di codice - ASP.NET concetti fondamentali MVC 4 - 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 : Genere e Album. A tale scopo, aggiungere il codice seguente:
(Frammento di codice - ASP.NET nozioni fondamentali MVC 4 - 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>limita 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 rinviino 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.
Elenco<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 prestare attenzione alle operazioni di controllo dei tipi, ad esempio il cast degli elementi in Album come si farebbe con un ArrayList.
Attività 3 - Uso del nuovo modello di visualizzazione in StoreController
In questa attività verranno modificati 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 Controller nella Esplora soluzioni e aprire la classe StoreController. Aggiungere quindi il codice seguente:
(Frammento di codice - ASP.NET concetti fondamentali 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 creerà un oggetto Genere e due nuovi oggetti Album con dati fittizi (nel lab pratico successivo 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 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 MVC 4 - Ex6 DetailsMethod)
// // 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à si aggiungerà 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 sappia della 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 Sfoglia azione di StoreController e scegliere Aggiungi visualizzazione.
Nella finestra di dialogo Aggiungi visualizzazione verificare che il nome di visualizzazione sia Sfoglia. Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e selezionare StoreBrowseViewModel nell'elenco a discesa Classe Modello . Lasciare 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 Genere, 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à verrà testato che il metodo Browse recupera Gli album dall'azione Del metodo Browse .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store/Sfoglia? Genre=Disco per verificare che l'azione restituisca due album.
Esplora album disco dello Store
Attività 6 - Visualizzazione di informazioni su un album specifico
In questa attività si implementerà la visualizzazione Store/Dettagli per visualizzare informazioni su un album specifico. In questo lab pratico tutti gli elementi visualizzati sull'album sono già contenuti nel modello Di visualizzazione . Quindi, invece di creare una classe StoreDetailsViewModel , si userà 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 Details 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 di visualizzazione sia Dettagli. Selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata e selezionare Album nell'elenco a discesa Classe Modello . Lasciare 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à verrà testato 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 di Dettagli dell'album di esplorazione
Attività 8 - Aggiunta di collegamenti tra pagine
In questa attività si aggiungerà un collegamento nella visualizzazione Store per avere un collegamento in ogni nome genere all'URL appropriato /Store/Sfoglia . In questo modo, quando si fa clic su un genere, ad esempio Disco, si passa 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 nei <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 sarebbe collegare direttamente alla pagina, con un codice simile al seguente:
<href="/Store/Browse?genre=@genreName">@genreName</a>
Anche se questo approccio funziona, dipende da una stringa hardcoded. Se successivamente si rinomina il controller, sarà necessario modificare manualmente questa istruzione. 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 ha diversi overload. In questo esercizio si userà una che accetta tre parametri:
- Testo del collegamento, che visualizzerà il nome Genere
- Nome azione controller (Sfoglia)
- Valori dei parametri di route, specificando sia il nome (Genere) che il valore (Nome genere)
Attività 9 - Esecuzione dell'applicazione
In questa attività verrà testato che ogni genere viene visualizzato con un collegamento all'URL appropriato /Store/Sfoglia .
Premere F5 per eseguire l'applicazione.
Il progetto inizia nella home page. Modificare l'URL in /Store per verificare che ogni genere si collega all'URL /Store/Sfoglia appropriato.
generi 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 nel modello. ASP.NET MVC 4 fornisce anche la raccolta "ViewModel", che può essere assegnata a qualsiasi valore dinamico e accessibile anche all'interno di controller e visualizzazioni.
Verrà ora usata l'insieme dinamico ViewBag per passare un elenco di "Generi con protagonista" dal controller alla visualizzazione. La visualizzazione Indice dello Store 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 stellati nell'insieme 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 star "starred.png" è inclusa nella cartella Source\Assets\Images di questo lab. Per aggiungerlo all'applicazione, trascinare il contenuto da una finestra di Esplora risorse di Windows nella Esplora soluzioni in Visual Web Developer Express, come illustrato di seguito:
di Aggiunta di star immagine alla soluzione
Aprire la visualizzazione Store/Index.cshtml e modificare il contenuto. Si leggerà la proprietà "stared" nell'insieme ViewBag e si chiederà se il nome del genere corrente è nell'elenco. In questo caso verrà visualizzata un'icona star destra al 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 star.
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:
con elementi 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 modello di applicazione Internet MVC 4 ASP.NET
Se non è già aperto, avviare VS Express per 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. Assegnare un nome al progetto MusicStore e aggiornare il nome della soluzione a Begin, quindi selezionare un percorso (o lasciare il valore predefinito) e fare clic su OK.
Creazione di un nuovo progetto MVC 4 ASP.NET
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, consentendo un flusso di lavoro di codifica veloce e fluido. Razor sfrutta le competenze del linguaggio C#/VB esistenti e offre una sintassi di markup 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 in stile moderno
I modelli sono stati rinnovati, fornendo stili più moderni.
modelli ASP.NET MVC 4
Rendering adattivo
Controllare il ridimensionamento della finestra del browser e notare come il layout della pagina si adatta 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 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.
Il modello di 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 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, anche le librerie dell'interfaccia utente jQuery e jQuery sono incluse 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. Include 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 Inclusa nella soluzione
Nota
Altre informazioni su OAuthWebSecurity sono disponibili in MSDN.
Nota
È anche possibile distribuire questa applicazione nei siti Web di Windows Azure seguendo l'Appendice B: Pubblicazione di un'applicazione ASP.NET MVC 4 tramite Distribuzione Web.
Riepilogo
Completando questo lab Hands-On 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 il contenuto HTML comune, un foglio stile 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 Il 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 [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?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 per Il Web con Windows Azure SDK".
Fare clic su Installa adesso. Se non si dispone di Installazione guidata 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 Il programma di installazione della piattaforma Web.
Per aprire Visual Studio Express per Il 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 ASP.NET MVC 4 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 aumenta il traffico. È 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
Indietro 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 sezione riepilogo rapido della pagina Dashboard fare clic sul collegamento 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. Nel profilo di pubblicazione sono contenuti gli URL, le credenziali utente e le stringhe di database necessari per la connessione e l'autenticazione in 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. In questo esercizio verrà illustrato come usare questo file per pubblicare un'applicazione Web in un sito Web di Windows Azure da Visual Studio.
di Salvataggio del file del profilo di pubblicazione
Attività 2 - Configurazione del server di database
Se l'applicazione usa database SQL Server, è necessario creare un server di database SQL. Se si vuole distribuire un'applicazione semplice che non usa SQL Server è possibile ignorare questa attività.
È necessario un server database SQL per archiviare il database dell'applicazione. È possibile visualizzare i server di database SQL dalla sottoscrizione nel portale di gestione di Windows Azure neldashboard diSql Database | Server | . 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 e della password dell'amministratore, come si userà nelle attività successive. Non creare ancora il database, perché verrà creato in una fase successiva.
Dashboard del server database SQL
Nell'attività successiva si testerà 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 del client corrente e incollarlo nelle caselle di testo IndirizzoIP iniziale e Indirizzo IP finale e fare clic sul
.
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.
Confermare le modifiche
Attività 3 - Pubblicazione di un'applicazione MVC 4 ASP.NET tramite distribuzione Web
Indietro alla soluzione MVC 4 ASP.NET. 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à.
di 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 del 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.
di Configurazione della stringa di connessione di destinazione
Fare quindi clic su OK. Quando viene richiesto di creare il database, fare clic su Sì.
Creazione del database
La stringa di connessione che si userà per connettersi a database SQL in Windows Azure viene visualizzata nella casella di testo Connessione predefinita. Quindi 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, è necessario tutto il codice necessario a portata di mano. Il documento lab illustra esattamente quando è possibile usarli, come illustrato nella figura seguente.
frammenti di codice
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 vuole inserire il codice.
- Iniziare a digitare il nome del frammento di codice (senza spazi o trattini).
- Guarda come IntelliSense visualizza i nomi dei frammenti di codice corrispondenti.
- Selezionare il frammento di codice corretto (o continuare a digitare finché 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 di codice
Premere Tab per selezionare il frammento di codice evidenziato
Premere di nuovo tabulazioni 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.
del mouse su
Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento di codice
su
Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per