Introduzione ad ASP.NET Core

Questa esercitazione illustra come creare, eseguire e modificare un ASP.NET Core Blazor Web App usando l'interfaccia della riga di comando di .NET. Blazor è un framework Web front-end .NET che supporta sia il rendering lato server che l'interattività client in un singolo modello di programmazione.

Si apprenderà come:

Prerequisites

Obtain and install the latest .NET SDK at Download .NET.

Creare un Blazor Web App

Aprire una shell dei comandi in un percorso appropriato per l'app di esempio e usare il comando seguente per creare un oggetto Blazor Web App. L'opzione -o|--output crea una cartella per il progetto e denomina il progetto BlazorSample:

dotnet new blazor -o BlazorSample

Eseguire l'app

Modificare la directory nella BlazorSample cartella con il comando seguente:

cd BlazorSample

Il dotnet watch comando esegue l'app e apre il browser predefinito alla pagina di destinazione dell'app:

dotnet watch

Usando lo spostamento laterale dell'app, visitare la pagina Contatore, in cui è possibile selezionare il Click me pulsante per incrementare il contatore.

Modificare l'app

Lasciare aperto il browser con la pagina Contatore caricata. Usando il dotnet watch comando per eseguire l'app, puoi apportare modifiche al markup e al codice dell'app senza dover ricompilare l'app per riflettere le modifiche nel browser.

Il CounterRazor componente che esegue il rendering della pagina Web Counter si trova Components/Pages/Counter.razor in nel progetto. Razor è una sintassi per la combinazione di markup HTML con codice C# progettata per la produttività degli sviluppatori.

Aprire il file in un editor di testo e notare alcune righe interessanti che eseguono il Counter.razor rendering del contenuto e fanno funzionare la funzionalità del contatore del componente.

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Il file inizia con una riga che indica il percorso relativo del componente (/counter):

@page "/counter"

Il titolo della pagina viene impostato dai <PageTitle> tag:

<PageTitle>Counter</PageTitle>

Viene visualizzata un'intestazione H1:

<h1>Counter</h1>

Un elemento di paragrafo (<p>) visualizza il conteggio corrente, archiviato in una variabile denominata currentCount:

<p role="status">Current count: @currentCount</p>

Un pulsante (<button>) consente all'utente di incrementare il contatore, che si verifica quando un clic sul pulsante esegue un metodo C# denominato IncrementCount:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Il @code blocco contiene codice C# eseguito dal componente:

• La variabile contatore currentCount viene stabilita con un valore iniziale pari a zero.
• Il IncrementCount metodo è definito. Il codice all'interno del metodo incrementa la currentCount variabile di una ogni volta che viene richiamato il metodo.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Modificare l'incremento del contatore nel IncrementCount metodo .

Modificare la riga in modo che venga incrementata di un valore pari a dieci ogni volta IncrementCount che currentCount viene chiamata:

- currentCount++;
+ currentCount += 10;

Salva il file.

Non appena si salva il file, l'app in esecuzione viene aggiornata automaticamente perché è stato usato il dotnet watch comando . Tornare all'app nel browser e selezionare il Click me pulsante nella pagina Contatore. Il contatore viene ora incrementato dal valore esistente di uno a un valore pari a undici. Ogni volta che il pulsante viene selezionato, il valore viene incrementato di dieci.

Arrestare l'app

Segui questi passaggi:

• Chiudere la finestra del browser.
• To shut down the app, press Ctrl+C in the command shell.

Congratulations! Questa esercitazione è stata completata correttamente.

Next steps

In questo tutorial, hai imparato come:

Questa esercitazione illustra come creare ed eseguire un'app Web ASP.NET Core usando l'interfaccia della riga di comando di .NET.

Per Blazor le esercitazioni, vedere tutorial di ASP.NET Core Blazor.

Si apprenderà come:

Prerequisites

Obtain and install the latest .NET SDK at Download .NET.

Creare Razor un'app Pages

Aprire una shell dei comandi in un percorso appropriato per l'app di esempio e usare il comando seguente per creare un'app Razor Pages. L'opzione -o|--output crea una cartella per il progetto e denomina il progetto RazorPagesSample:

dotnet new webapp -o RazorPagesSample

Eseguire l'app

Modificare la directory nella RazorPagesSample cartella con il comando seguente:

cd RazorPagesSample

Il dotnet watch comando esegue l'app e apre il browser predefinito alla pagina di destinazione dell'app:

dotnet watch

Modificare l'app

Aprire il file Pages/Index.cshtml in un editor di testo.

Dopo la riga con il messaggio di saluto "Welcome", aggiungere la riga seguente per visualizzare la data e l'ora del sistema locale:

<p>The time on the server is @DateTime.Now</p>

Salvare le modifiche.

Non appena si salva il file, l'app in esecuzione viene aggiornata automaticamente perché è stato usato il dotnet watch comando .

Aggiornare la pagina nel browser per visualizzare il risultato:

Arrestare l'app

Per arrestare l'app:

• Chiudere la finestra del browser.
• Press Ctrl+C in the command shell.

Congratulations! Questa esercitazione è stata completata correttamente.

Next steps

In questo tutorial, hai imparato come: