Condividi tramite


Programmazione di pagine Web ASP.NET (Razor) con Visual Studio

di Tom FitzMacken

Questo articolo illustra come usare Visual Studio o Visual Web Developer Express per programmare ASP.NET siti Web Pages (Razor).

Cosa imparerai

  • Cosa è necessario installare (se presente) per utilizzare le pagine Web ASP.NET nella tua versione di Visual Studio.
  • Come aggiungere il supporto per ASP.NET pagine Web a Visual Web Developer 2010 Express.
  • Come usare le funzionalità di Visual Studio per lavorare con le pagine Razor di ASP.NET, tra cui IntelliSense e il debugger.

Versioni software usate nell'esercitazione

  • ASP.NET Pagine Web (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

Questa esercitazione funziona anche con ASP.NET Pagine Web 2, Visual Studio 2012, Visual Studio 2010 e WebMatrix 2.

È possibile programmare ASP.NET pagine Web con la sintassi Razor usando WebMatrix o molti altri editor di codice. È anche possibile usare Microsoft Visual Studio, un ambiente di sviluppo integrato completo (IDE) che offre un potente set di strumenti per la creazione di molti tipi di applicazioni (non solo siti Web). Per usare ASP.NET pagine Razor, è possibile usare Visual Studio 2017.

Due funzionalità particolarmente utili offerte da Visual Studio per la programmazione con ASP.NET pagine Web Razor sono:

  • IntelliSense. La funzionalità IntelliSense integrata in Visual Studio è più completa di IntelliSense in WebMatrix.
  • Debugger. Il debugger consente di risolvere i problemi del codice arrestando un programma mentre è in esecuzione, esaminando le variabili e progredendo nel codice riga per riga.

Uso di Visual Studio con versioni diverse di pagine Web di ASP.NET

Per sviluppare applicazioni web ASP.NET in Visual Studio 2017, installare il workload ASP.NET e sviluppo Web.

Visual Studio 2012 e Visual Studio 2013 includono il supporto per ASP.NET pagine Web. I pacchetti necessari per supportare ASP.NET pagine Web vengono installati quando si installa Visual Studio.

Visual Studio 2010 non include il supporto per impostazione predefinita per le pagine Web di ASP.NET. Per usare ASP.NET Pagine Web con Visual Studio 2010, è necessario installare il pacchetto ASP.NET MVC. Per ottenere ASP.NET Pagine Web 2, installare ASP.NET MVC 4.

La tabella seguente riepiloga il supporto per ASP.NET pagine Web in versioni diverse di Visual Studio.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET Web Pages 2 Installare ASP.NET MVC 4 (Incluso) (Incluso)
ASP.NET pagine Web 3 Aggiornare le pagine Web di ASP.NET 3 tramite NuGet (Incluso)

Per usare Visual Studio 2010, vedere Installazione del supporto per le pagine Web ASP.NET in Visual Studio 2010.

Avvio di Visual Studio da WebMatrix

Se è stato avviato un progetto in WebMatrix e si vuole passare a Visual Studio, WebMatrix fornisce un pulsante per aprire facilmente il progetto in Visual Studio. Per abilitare questo pulsante, è necessario che Nel computer sia installato Visual Studio. L'immagine seguente mostra il pulsante in WebMatrix.

avviare Visual Studio

Quando si fa clic sul pulsante, il progetto viene aperto in Visual Studio. È possibile passare da WebMatrix a Visual Studio senza problemi. Si riceverà una notifica se i file sono stati modificati nell'altro ambiente e devono essere ricaricati per ottenere le modifiche più recenti.

Creazione di un sito Razor ASP.NET in Visual Studio

Per creare un sito Web Razor ASP.NET in Visual Studio:

  1. Apri Visual Studio.

  2. Scegliere Nuovo sito Web dal menu File.

    creare un nuovo sito Web

  3. Nella finestra di dialogo Nuovo sito Web selezionare il linguaggio da usare (Visual C# o Visual Basic).

  4. Selezionare il modello sito Web ASP.NET (Razor).

    sito Razor

  5. Fare clic su OK.

Il nuovo progetto esiste e viene popolato con alcune pagine Web predefinite per iniziare.

Uso di IntelliSense

Dopo aver creato un sito, è possibile vedere il funzionamento di IntelliSense in Visual Studio.

  1. Nel sito Web appena creato aprire la pagina Default.cshtml .

  2. Dopo i <h3> tag nella pagina, digitare @ServerInfo. (incluso il punto). Si noti che IntelliSense visualizza i metodi disponibili per l'helper ServerInfo in un elenco a discesa.

    Intellisense

  3. Selezionare il GetHtml metodo dall'elenco e quindi premere INVIO. IntelliSense compila automaticamente il metodo . Come per qualsiasi metodo in C#, è necessario aggiungere () caratteri dopo il metodo . Il codice completato per il GetHtml metodo è simile all'esempio seguente:

    @ServerInfo.GetHtml()
    
  4. Premere CTRL+F5 per eseguire la pagina. Questa è l'aspetto della pagina quando viene visualizzata in un browser:

    pagina predefinita nel browser

  5. Chiudere il browser.

Uso del debugger

  1. Nella parte superiore della pagina Default.cshtml , dopo la riga che inizia con Page.Title, aggiungere la riga di codice seguente:

    var myTime = DateTime.Now.TimeOfDay;
    
  2. Nel margine grigio dell'editor a sinistra del codice fare clic accanto a questa nuova riga per aggiungere un punto di interruzione. Un punto di interruzione è un indicatore che indica al debugger di interrompere l'esecuzione del programma a quel punto in modo da poter vedere cosa accade.

    impostare il punto di interruzione

  3. Rimuovere la chiamata al ServerInfo.GetHtml metodo e aggiungere una chiamata alla @myTime variabile al suo posto. Questa chiamata visualizza il valore dell'ora corrente restituito dalla nuova riga di codice.

  4. Premere F5 per eseguire la pagina nel debugger. La pagina si arresta nel punto di interruzione impostato. L'immagine seguente mostra l'aspetto della pagina nell'editor con il punto di interruzione (in giallo).

    punto di interruzione di debug

  5. Nella barra degli strumenti Debug, fare clic sul pulsante Passo Dentro (o premere F11) per eseguire la riga di codice successiva. Ogni volta che si fa clic su questo pulsante, si passa l'esecuzione alla riga di codice successiva.

    Pulsante Esegui istruzione

  6. Esaminare il valore della myTime variabile tenendo premuto il puntatore del mouse su di esso o controllando i valori visualizzati nelle finestre Variabili locali e Stack di chiamate . Visual Studio visualizza il valore della variabile.

    mostra valore del tempo

  7. Al termine dell'analisi della variabile e dell'esecuzione del codice, premere F5 per continuare a eseguire la pagina senza arrestarsi in ogni riga. Dopo aver completato l'esecuzione di tutto il codice, il browser visualizza la pagina.

Per altre informazioni sul debugger e su come eseguire il debug del codice in Visual Studio, vedere Procedura dettagliata: Debug di pagine Web in Visual Web Developer.

Uso di Razor nei progetti MVC ASP.NET con Visual Studio

La sintassi Razor viene usata anche ampiamente nei progetti MVC ASP.NET. MVC è un modo potente basato su modelli per creare siti Web dinamici. Se il sito di pagine Web ASP.NET diventa difficile da gestire, è consigliabile convertirlo in un'applicazione MVC ASP.NET. Per un esempio di creazione di un'applicazione MVC, vedere Introduzione a ASP.NET MVC 5.

Installazione del supporto per le pagine Web ASP.NET in Visual Studio 2010

Questa sezione illustra come installare Visual Web Developer Express 2010 e gli strumenti di pagine Web di ASP.NET per Visual Studio.

  1. Se il programma di installazione della piattaforma Web non è già disponibile, scaricarlo dall'URL seguente:

    https://www.microsoft.com/web/downloads/platform.aspx

  2. Eseguire il programma di installazione della piattaforma Web.

  3. Fare clic sulla scheda Prodotti .

    Scheda Prodotti WebPI

  4. Cercare ASP.NET MVC 4 (per ASP.NET Pagine Web 2) e quindi fare clic su Aggiungi. Questi prodotti includono gli strumenti di Visual Studio per la creazione di siti Web Razor ASP.NET.

    Opzioni di installazione webPi

  5. Fare clic su Installa per completare l'installazione.