Introduzione ad ASP.NET MVC 4

di Rick Anderson

Una versione aggiornata di questa esercitazione è disponibile qui usando Visual Studio 2013. La nuova esercitazione usa ASP.NET MVC 5, che offre molti miglioramenti in questa esercitazione.

Questa esercitazione illustra le nozioni di base per la creazione di un'applicazione Web ASP.NET MVC 4 usando Microsoft Visual Studio Express 2012 o Visual Web Developer 2010 Express Service Pack 1. Visual Studio 2012 è consigliato, non è necessario installare nulla per completare l'esercitazione. Se si usa Visual Studio 2010, è necessario installare i componenti seguenti. È possibile installarli facendo clic sui collegamenti seguenti:

Se si usa Visual Studio 2010 anziché Visual Web Developer 2010, installare il programma di installazione WPI per ASP.NET MVC 4 e i prerequisiti di Visual Studio 2010

Un progetto Visual Web Developer con codice sorgente C# è disponibile per accompagnare questo argomento. Scaricare la versione C#.

Nell'esercitazione si esegue l'applicazione in Visual Studio. È anche possibile rendere disponibile l'applicazione tramite Internet distribuendola in un provider di hosting. Microsoft offre un hosting Web gratuito per un massimo di 10 siti Web in un account di valutazione gratuito di Windows Azure. Per informazioni su come distribuire un progetto Web di Visual Studio in un sito Web di Windows Azure, vedere Creare e distribuire un sito Web ASP.NET e database SQL con Visual Studio. Questa esercitazione illustra anche come usare Migrazioni Code First di Entity Framework per distribuire il database di SQL Server in Database di Windows Azure SQL (in precedenza SQL Azure).

Questa esercitazione è stata scritta da Rick Anderson ( @RickAndMSFT ).

Scopo dell'esercitazione

Nota

Versione aggiornata se questa esercitazione è disponibile qui usando Visual Studio 2013. La nuova esercitazione usa ASP.NET MVC 5, che offre molti miglioramenti in questa esercitazione.

Si implementerà una semplice applicazione di elenco di film che supporta la creazione, la modifica, la ricerca e l'inserimento di film da un database. Di seguito sono riportati due screenshot dell'applicazione che verrà compilata. Include una pagina che visualizza un elenco di film da un database:

Screenshot che mostra la pagina Indice di ricerca dell'app Movie M V C. Ghost viene immesso nella barra di ricerca titolo.

L'applicazione consente anche di aggiungere, modificare ed eliminare film, oltre a visualizzare i dettagli sui singoli film. Tutti gli scenari di immissione dati includono la convalida per assicurarsi che i dati archiviati nel database siano corretti.

Screenshot che mostra la pagina modifica dell'app Film M V C. Vengono evidenziati due campi di testo, Data di rilascio e Prezzo, che richiedono all'utente di immettere i valori corretti.

Introduzione

Per iniziare, eseguire Visual Studio Express 2012 o Visual Web Developer 2010 Express. La maggior parte degli screenshot di questa serie usa Visual Studio Express 2012, ma è possibile completare questa esercitazione con Visual Studio 2010/SP1, Visual Studio 2012, Visual Studio Express 2012 o Visual Web Developer 2010 Express. Selezionare Nuovo progetto nella pagina Iniziale .

Visual Studio è un ambiente di sviluppo integrato o IDE. Proprio come si usa Microsoft Word per scrivere documenti, si userà un IDE per creare applicazioni. In Visual Studio è disponibile una barra degli strumenti nella parte superiore che mostra varie opzioni disponibili. È disponibile anche un menu che consente di eseguire attività nell'IDE. Ad esempio, invece di selezionare Nuovo progetto dalla pagina Iniziale , è possibile usare il menu e selezionare File>Nuovo progetto.

Screenshot che mostra la pagina iniziale Visual Studio Express. L'opzione Nuovo progetto è evidenziata.

Creazione della prima applicazione

È possibile creare applicazioni usando Visual Basic o Visual C# come linguaggio di programmazione. Selezionare Visual C# a sinistra e quindi ASP.NET'applicazione Web MVC 4. Assegnare al progetto il nome "MvcMovie" e quindi fare clic su OK.

Screenshot che mostra la finestra Nuovo progetto. È selezionata un'applicazione Web S P dot NET M V 4.

Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare Applicazione Internet. Lasciare Razor come motore di visualizzazione predefinito.

Screenshot che mostra la finestra New A S P dot NET M V 4 Project .Screenshot che mostra la finestra New A S P dot NET M V 4 Project . Il modello Applicazione Internet è selezionato.

Fare clic su OK. Visual Studio ha usato un modello predefinito per il progetto MVC ASP.NET appena creato, quindi è disponibile un'applicazione funzionante al momento senza eseguire alcuna operazione. Si tratta di un semplice progetto "Hello World!" ed è un buon punto di partenza per avviare l'applicazione.

Screenshot che mostra le schede A S P dot NET M V V Project Home Controller c e Esplora soluzioni aperte.

Scegliere Avvia debug dal menu Debug.

Screenshot che mostra il menu a discesa DEBUG progetto A S P dot NET M V C. L'opzione Avvia debug è selezionata.

Si noti che la scelta rapida da tastiera per avviare il debug è F5.

F5 fa sì che Visual Studio avvii IIS Express ed esegua l'applicazione Web. Visual Studio avvia quindi un browser e apre la home page dell'applicazione. Si noti che la barra degli indirizzi del browser indica localhost e non è simile example.coma . Questo perché localhost punta sempre al proprio computer locale, che in questo caso esegue l'applicazione appena compilata. Quando Visual Studio esegue un progetto Web, viene usata una porta casuale per il server Web. Nell'immagine seguente il numero di porta è 41788. Quando si esegue l'applicazione, probabilmente verrà visualizzato un numero di porta diverso.

Screenshot che mostra la home page del film M V C.

Per impostazione predefinita, questo modello predefinito offre le pagine Home, Contatto e Informazioni. Fornisce inoltre il supporto per registrare e accedere e collegamenti a Facebook e Twitter. Il passaggio successivo consiste nel modificare il funzionamento di questa applicazione e apprendere un po' di ASP.NET MVC. Chiudere il browser e modificare il codice.