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:

• Creare un oggetto Blazor Web App.
• Avvia l'app.
• Modificare l'app.
• Chiudere definitivamente l'app.

Prerequisites

Ottenere e installare la versione più recente di .NET SDK in Scaricare .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 la barra di navigazione laterale dell'app, visitare la pagina Contatore, in cui è possibile selezionare il pulsante Click me per incrementare il contatore.

La pagina del contatore viene visualizzata quando si preme il pulsante 'Click me' una volta, mostrando il contatore incrementato a uno.

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 nel progetto. Razor è una sintassi per la combinazione di markup HTML con codice C# progettata per la produttività degli sviluppatori.

Apri il Counter.razor file in un editor di testo e prendi nota di alcune righe interessanti che eseguono il rendering del contenuto e attivano la funzione 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++;
}

Cambiamo l'incremento del contatore nel metodo IncrementCount.

Modifica la riga in modo che currentCount venga incrementato di dieci ogni volta che IncrementCount viene chiamato.

- 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.

Pagina del contatore renderizzata dopo che il pulsante 'Click me' è stato selezionato una volta, mostrando il contatore incrementato a undici.

Chiudere l'app

Segui questi passaggi:

• Chiudere la finestra del browser.
• Per arrestare l'app, premere CTRL+C nella shell dei comandi.

Congratulations! Questa esercitazione è stata completata correttamente.

Passaggi successivi

In questo tutorial, hai imparato come:

• Creare un oggetto Blazor Web App.
• Avvia l'app.
• Modificare l'app.
• Chiudere definitivamente l'app.

Per altre informazioni sui concetti fondamentali di ASP.NET Core, vedere gli argomenti seguenti:

Panoramica dei concetti fondamentali di ASP.NET Core

Tutorial aggiuntivi

Tipo di app	Scenario	Tutorials
Applicazione Web	Nuovo sviluppo web server e client con Blazor	Creare un'app Blazor Todo List e Creare un'app Blazor di Database di Film (Panoramica)
API per il Web	Elaborazione dei dati basata su server con API minime	Esercitazione: Creare un'API minima con ASP.NET Core
App Remote Procedure Call (RPC)	Servizi con contratto anzitutto usando Protocol Buffers	Creare un client e un server .NET gRPC in ASP.NET Core
App in tempo reale	Comunicazione bidirezionale server/client	Introduzione a ASP.NET Core SignalR

Risorse aggiuntive

• Introduzione a .NET
• Visual Studio
• Visual Studio Code
• Community per sviluppatori .NET
• .NET Live TV