Esercizio: personalizzare il progetto

  • 12 minuti

Il team si è diviso il lavoro per quanto riguarda l'app di gestione dell'inventario delle pizze. Il team ha creato l'app Web ASP.NET Core. In aggiunta, ha implementato un servizio che permette di leggere e scrivere i dati relativi alle pizze in un database. All'utente è stato assegnato il compito di lavorare nella pagina Pizza List, che mostrerà un elenco di pizze e consentirà di aggiungere nuove pizze al database. Inizieremo con un tour del progetto per capire come è organizzato.

Nota

In questo modulo vengono usati l'interfaccia della riga di comando di.NET e Visual Studio Code per lo sviluppo locale. Dopo aver completato il modulo, puoi applicare i concetti usando Visual Studio (Windows) o lo sviluppo continuo tramite Visual Studio Code (Windows, Linux e macOS).

Ottenere i file di progetto

Se si usa GitHub Codespaces, aprire il repository nel browser, selezionare Code e quindi creare un nuovo spazio di codice nel ramo main.

Se non si usa GitHub Codespaces, è possibile ottenere i file di progetto e aprirli in Visual Studio Code tramite la seguente procedura:

  1. Aprire una shell dei comandi e clonare il progetto da GitHub usando la riga di comando:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Passare alla directory mslearn-create-razor-pages-aspnet-core e aprire il progetto in Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Suggerimento

Se è installato un runtime di contenitori compatibile, è possibile usare l'estensione Dev Containers per aprire il repository in un contenitore con gli strumenti preinstallati.

Esaminare il lavoro del team

È possibile acquisire familiarità con il codice esistente nella cartella ContosoPizza. Il progetto è un'app Web ASP.NET Core creata usando il comando dotnet new webapp. Le modifiche apportate dal team sono descritte di seguito.

Suggerimento

Non dedicare troppo tempo alla revisione di queste modifiche. Il team ha già implementato un servizio e un database che permette di leggere e scrivere le informazioni relative alle pizze in un database. Tuttavia, non ha apportato modifiche all’interfaccia utente. L’utente creerà un'interfaccia utente che utilizza il servizio nell'unità successiva.

  • È stata aggiunta la cartella Models al progetto.
    • La cartella Models contiene la classe Pizza che rappresenta una pizza.
  • È stata aggiunta la cartella Data al progetto.
    • La cartella Data contiene la classe PizzaContext che rappresenta il contesto del database. Eredita dalla classe DbContext in Entity Framework Core. Entity Framework Core è un mapper relazionale a oggetti (ORM) che semplifica l'uso dei database.
  • È stata aggiunta la cartella Services al progetto.
    • La cartella servizi contiene la classe PizzaService che espone i metodi per elencare e aggiungere pizza.
    • La classe PizzaService usa la classe PizzaContext per leggere e scrivere le informazioni relative alle pizze nel database.
    • La classe è registrata per l'inserimento delle dipendenze in Program.cs (riga 10).

Entity Framework Core ha generato anche:

  • È stata generata la cartella Migrations.
    • La cartella Migrations contiene codice per creare lo schema del database.
  • È stato generato il file di database SQLite ContosoPizza.db.
    • Se è installata l’estensione SQLite (o si usa GitHub Codespaces), è possibile visualizzare il database facendo clic con il pulsante destro del mouse sul file e quindi selezionando Apri database. Lo schema del database viene visualizzato nella scheda SQLite Explorer del riquadro Explorer.

Esaminare la struttura del progetto Razor Pages

Tutto il resto nel progetto non è cambiato da quando il progetto è stato creato. La tabella seguente descrive la struttura del progetto generata dal comando dotnet new webapp.

Nome Descrizione
Pages/ Contiene le pagine Razor e i file di supporto. Ogni pagina Razor ha un file .cshtml e un file di classe .cshtml.cs PageModel.
wwwroot/ Contiene file di asset statici, ad esempio HTML, JavaScript e CSS.
ContosoPizza.csproj Contiene i metadati di configurazione del progetto, ad esempio le dipendenze.
Program.cs Funge da punto di ingresso dell'app e configura il comportamento dell'app, ad esempio il routing.

Altre osservazioni importanti:

  • File delle pagine Razor e file di classe PageModel associato

    Le pagine Razor vengono archiviate nella directory Pages. Come indicato in precedenza, ogni pagina Razor ha un file .cshtml e un file di classe .cshtml.cs PageModel. La classe PageModel facilita la separazione tra logica e presentazione di una pagina Razor, definisce i gestori di pagine per le richieste, incapsulando contemporaneamente le proprietà dei dati e la logica, assicurando che siano specifici e contenuti nell'ambito della relativa pagina Razor.

  • Struttura della directory Pages e routing delle richieste

    Razor Pages usa la struttura della directory Pages come convenzione per il routing delle richieste. La tabella seguente mostra come gli URL vengono mappati ai nomi dei file:

    URL Mappato alla pagina Razor
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Le sottocartelle nella directory Pages vengono usate per organizzare le pagine Razor. Ad esempio, se ci fosse una directory Pages/Products, gli URL rifletterebbero quella struttura:

    URL Mappato alla pagina Razor
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Layout e altri file condivisi

    Ci sono diversi file condivisi tra più pagine. Questi file determinano gli elementi di layout comuni e le importazioni delle pagine. La tabella seguente descrive lo scopo di ciascun file.

    File Descrizione
    _ViewImports.cshtml Importa spazi dei nomi e classi usati in più pagine.
    _ViewStart.cshtml Specifica il layout predefinito per tutte le pagine Razor.
    Pages/Shared/_Layout.cshtml Questo è il layout specificato dal file _ViewStart.cshtml. Implementa elementi di layout comuni in più pagine.
    Pages/Shared/_ValidationScriptsPartial.cshtml Fornisce funzionalità di convalida a tutte le pagine.

Eseguire il progetto per la prima volta

Eseguiamo il progetto in modo da poterlo vedere in azione.

  1. Fare clic con il pulsante destro del mouse sulla cartella ContosoPizza in Explorer e scegliere Apri nel terminale integrato. Verrà aperta una finestra del terminale nel contesto della cartella del progetto.

  2. Nella finestra del terminale immettere il seguente comando:

    dotnet watch

    Questo comando:

    • Compila il progetto.
    • Avvia l’app.
    • Controlla le modifiche del file e riavvia l'app quando rileva una modifica.

  3. L’ambiente di sviluppo integrato richiede di aprire l’app in un browser. Fare clic su Open in Browser (Apri nel browser).

    Suggerimento

    È anche possibile aprire l'app trovando l'URL nella finestra del terminale. Tenere premuto CTRL e fare clic sull'URL per aprirlo in un browser.

  4. Confrontare la home page sottoposta a rendering in Pages/Index.cshtml nell'ambiente di sviluppo integrato:

    • Osservare la combinazione di codice HTML, sintassi Razor e C# nel file.
      • La sintassi Razor è caratterizzata dai caratteri @.
      • Il codice C# è racchiuso tra blocchi @{ }. Prendere nota delle direttive nella parte superiore del file:
      • La direttiva @page specifica che questo file è una pagina Razor.
      • La direttiva @model specifica il tipo di modello per la pagina, in questo caso IndexModel, definito in Pages/Index.cshtml.cs.
    • Esaminare il blocco di codice C#.
      • Il codice imposta il valore dell'elemento Title all'interno del dizionario ViewData su "Home page".
      • Il dizionario ViewData viene usato per passare i dati tra la pagina Razor e la classe IndexModel.
      • In fase di esecuzione, il valore Title viene usato per impostare l'elemento <title> della pagina.

Lasciare l'app in esecuzione nella finestra del terminale. La useremo nelle prossime unità. Lasciare in esecuzione anche la scheda del browser con l'app Contoso Pizza. Si potranno apportare modifiche all'app e il browser si aggiornerà automaticamente per mostrare le modifiche.

Personalizzare la pagina di destinazione

Apportiamo alcune modifiche alla pagina di destinazione per renderla più adatta e pertinente all'app dedicata alle pizze.

  1. In Pages/Index.cshtml sostituire il codice nel blocco di codice C# con il seguente codice:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Il codice precedente:

    • Imposta il valore dell'elemento Title all'interno del dizionario ViewData su "The Home for Pizza Lovers".
    • Calcola la quantità di tempo trascorsa dall'apertura dell'azienda.

  2. Modificare il codice HTML come indicato di seguito:

    • Sostituire l'elemento <h1> con il codice seguente:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Sostituire l'elemento <p> con il codice seguente:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Il codice precedente:

    • Modifica l'intestazione in "Welcome to Contoso Pizza".
    • Mostra il numero di giorni trascorsi dall'apertura dell'azienda.
      • Il carattere @ viene usato per passare dal codice HTML alla sintassi Razor.
      • Il metodo Convert.ToInt32 viene usato per convertire la proprietà TotalDays della variabile timeInBusiness in un intero.
      • La classe Convert fa parte dello spazio dei nomi System, che viene importato automaticamente dall'elemento <ImplicitUsings> nel file ContosoPizza.csproj.

  3. Salvare il file. La scheda del browser con l'app viene aggiornata automaticamente per mostrare le modifiche. Se si usa GitHub Codespaces, il file viene salvato automaticamente, ma sarà necessario aggiornare manualmente la scheda del browser.

Importante

Tenere d'occhio la finestra del terminale con dotnet watch ogni volta che si salva il file. A volte il codice potrebbe contenere quello che viene definito una modifica rude. Ciò significa che il codice modificato non può essere ricompilato senza riavviare l'applicazione. Se viene richiesto di riavviare l'app, premere y (sì) o a (sempre). È sempre possibile arrestare l'applicazione premendo CTRL+C due volte nella finestra del terminale e quindi riavviarla eseguendo di nuovo dotnet watch.

Le prime modifiche a una pagina Razor sono state apportate! Nella prossima unità, verrà aggiunta una nuova pagina all'app per mostrare un elenco di pizze.