ASP.NET Core Blazor

  • Articolo

Benvenuto in Blazor!

Blazor è un framework per la creazione di un'interfaccia utente Web sul lato client interattiva con .NET:

  • Creare interfacce utente interattive avanzate usando C# invece di JavaScript.
  • Condividere la logica dell'app scritta in .NET sul lato client e sul lato server.
  • Eseguire il rendering dell'interfaccia utente come HTML e CSS per un ampio supporto dei browser, inclusi i browser per dispositivi mobili.
  • Eseguire l'integrazione con le piattaforme di hosting moderne, ad esempio Docker.
  • Creare app desktop e per dispositivi mobili ibride con .NET e Blazor.
  • Creare interfacce utente interattive avanzate usando C# invece di JavaScript.
  • Condividere la logica dell'app scritta in .NET sul lato client e sul lato server.
  • Eseguire il rendering dell'interfaccia utente come HTML e CSS per un ampio supporto dei browser, inclusi i browser per dispositivi mobili.
  • Eseguire l'integrazione con le piattaforme di hosting moderne, ad esempio Docker.

L'uso di .NET per lo sviluppo Web lato client offre i vantaggi seguenti:

  • scrivere codice in C# invece che in JavaScript.
  • Sfruttare l'ecosistema .NET esistente delle librerie .NET.
  • Permette di condividere la logica dell'app tra server e client.
  • Permette di ottenere le prestazioni, l'affidabilità e la sicurezza di .NET.
  • Rimanere produttivi in Windows, Linux o macOS con un ambiente di sviluppo, ad esempio Visual Studio o Visual Studio Code.
  • basato su un set comune di linguaggi, framework e strumenti che sono stabili, ricchi di funzionalità e facili da usare.

Nota

Per un'esercitazione Blazor introduttiva, vedere Creare la prima Blazor app.

Componenti

Blazor le app sono basate sui componenti. Un componente in Blazor è un elemento dell'interfaccia utente, ad esempio una pagina, una finestra di dialogo o un modulo di immissione dati.

I componenti sono classi C# .NET incorporate in assembly .NET che:

  • Definiscono la logica di rendering dell'interfaccia utente flessibile.
  • Gestiscono gli eventi utente.
  • Possono essere annidati e riutilizzati.
  • Può essere condiviso e distribuito come Razor librerie di classi o pacchetti NuGet.

La classe componente viene in genere scritta sotto forma di pagina Razor di markup con un'estensione .razor di file. I componenti in Blazor sono formalmente definiti Razor componenti, in modo informale come Blazor componenti. Razor è una sintassi per combinare markup HTML con codice C# progettato per la produttività degli sviluppatori. Razor consente di passare dal markup HTML a C# nello stesso file con il supporto della programmazione IntelliSense in Visual Studio. Razor Le pagine e MVC usano Razoranche . A differenza di Razor Pages e MVC, basati su un modello di richiesta/risposta, i componenti vengono usati in modo specifico per la logica e la composizione dell'interfaccia utente lato client.

Blazor usa tag HTML naturali per la composizione dell'interfaccia utente. Il markup seguente Razor illustra un componente (Dialog.razor) che visualizza una finestra di dialogo ed elabora un evento quando l'utente seleziona un pulsante:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Nell'esempio OnYes precedente è un metodo C# attivato dall'evento del onclick pulsante. Il testo della finestra di dialogo (ChildContent) e il titolo (Title) vengono forniti dal componente seguente che usa questo componente nell'interfaccia utente.

Il Dialog componente viene annidato all'interno di un altro componente usando un tag HTML. Nell'esempio seguente il Index componente (Pages/Index.razor) usa il componente precedente Dialog . L'attributo del Title tag passa un valore per il titolo alla Dialog proprietà del Title componente. Il Dialog testo del componente (ChildContent) viene impostato dal contenuto dell'elemento <Dialog> . Quando il Dialog componente viene aggiunto al Index componente, IntelliSense in Visual Studio accelera lo sviluppo con la sintassi e il completamento dei parametri.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

Il rendering della finestra di dialogo viene eseguito quando si accede al Index componente in un browser. Quando il pulsante è selezionato dall'utente, la console degli strumenti di sviluppo del browser visualizza il messaggio scritto dal OnYes metodo :

Componente finestra di dialogo di cui è stato eseguito il rendering nel browser annidato all'interno del componente Index. La console degli strumenti di sviluppo del browser mostra il messaggio scritto dal codice C# quando l'utente seleziona Sì! nell'interfaccia utente.

I componenti eseguono il rendering in una rappresentazione in memoria del modello DOM (Document Object Model) del browser, denominato albero di rendering, che viene usato per aggiornare l'interfaccia utente in modo flessibile ed efficiente.

Blazor Server

Blazor Serverfornisce supporto per l'hosting Razor di componenti nel server in un'app ASP.NET Core. Gli aggiornamenti dell'interfaccia utente vengono gestiti tramite una SignalR connessione.

Il runtime rimane nel server e gestisce gli elementi seguenti:

  • Esecuzione del codice C# dell'app.
  • Invio degli eventi dell'interfaccia utente dal browser al server.
  • Applicazione di aggiornamenti dell'interfaccia utente a un componente sottoposto a rendering inviato dal server.

La connessione usata da Blazor Server per comunicare con il browser viene usata anche per gestire le chiamate di interoperabilità JavaScript.

Blazor Server esegue il codice .NET nel server e interagisce con il modello a oggetti documento nel client tramite una SignalR connessione

Blazor Serverle app eseguono il rendering del contenuto in modo diverso rispetto ai modelli tradizionali per il rendering dell'interfaccia utente in ASP.NET Core app che usano Razor visualizzazioni o Razor pagine. Entrambi i modelli usano il linguaggio per descrivere il Razor contenuto HTML per il rendering, ma differiscono in modo significativo nel modo in cui viene eseguito il rendering del markup.

Quando viene eseguito il rendering di una pagina o di una Razor vista, ogni riga di Razor codice genera codice HTML in formato testo. Dopo il rendering, il server elimina l'istanza della pagina o della visualizzazione, incluso qualsiasi stato generato. Quando si verifica un'altra richiesta per la pagina, l'intera pagina viene nuovamente inoltrata in HTML e inviata al client.

Blazor Server produce un grafico di componenti da visualizzare in modo simile a un MODELLO DOM (Document Object Model) HTML o XML. Il grafico dei componenti include lo stato contenuto in proprietà e campi. Blazor valuta il grafico dei componenti per produrre una rappresentazione binaria del markup, che viene inviata al client per il rendering. Dopo aver effettuato la connessione tra il client e il server, gli elementi prerenderati statici del componente vengono sostituiti con elementi interattivi. La prerenderazione del contenuto nel server rende l'app più reattiva sul client.

Dopo che i componenti sono interattivi nel client, gli aggiornamenti dell'interfaccia utente vengono attivati dagli eventi di interazione dell'utente e dell'app. Quando si verifica un aggiornamento, viene eseguito il ripristino del grafico dei componenti e viene calcolato un diff dell'interfaccia utente (differenza). Questa differenza è il set più piccolo di modifiche DOM necessarie per aggiornare l'interfaccia utente nel client. Il diff viene inviato al client in un formato binario e applicato dal browser.

Un componente viene eliminato dopo che l'utente si allontana dal componente.

Blazor WebAssembly

Blazor WebAssembly è un framework di app a pagina singola per la creazione di app Web interattive sul lato client con .NET. Blazor WebAssembly usa standard Web aperti senza plug-in o ricompilare il codice in altri linguaggi. Blazor WebAssembly funziona in tutti i Web browser moderni, inclusi i browser per dispositivi mobili.

L'esecuzione di codice .NET all'interno dei Web browser è resa possibile da WebAssembly (abbreviato wasm). WebAssembly è un formato bytecode compatto ottimizzato per il download veloce e la velocità massima di esecuzione. WebAssembly è un standard Web aperto ed è supportato nei Web browser senza plug-in.

Il codice WebAssembly può accedere alla funzionalità completa del browser tramite JavaScript, denominata interoperabilità JavaScript, spesso abbreviata nell'interoperabilità oJS nell'interoperabilitàJavaScript. Il codice .NET eseguito tramite WebAssembly nel browser viene eseguito nella sandbox JavaScript del browser con le misure di sicurezza offerte dalla sandbox per la protezione da azioni dannose nel computer client.

Blazor WebAssembly esegue il codice .NET nel browser con WebAssembly.

Quando un'app Blazor WebAssembly viene compilata ed eseguita in un browser:

  • I file e Razor i file di codice C# vengono compilati in assembly .NET.
  • Gli assembly e il runtime .NET vengono scaricati nel browser.
  • Blazor WebAssembly esegue il bootstrap del runtime .NET e configura il runtime per caricare gli assembly per l'app. Il Blazor WebAssembly runtime usa l'interoperabilità JavaScript per gestire la manipolazione DOM e le chiamate API del browser.

Le dimensioni dell'app pubblicata, le dimensioni del payload, sono un fattore di prestazioni fondamentale per l'usabilità di un'app. Un'app di grandi dimensioni impiega relativamente molto tempo a essere scaricata in un browser, influendo negativamente sull'esperienza utente. Blazor WebAssembly ottimizza le dimensioni del payload per ridurre i tempi di download:

  • Il codice inutilizzato viene rimosso dall'app quando viene pubblicato dal trimmer intermediate language (IL).
  • Le risposte HTTP vengono compresse.
  • Il runtime e gli assembly .NET vengono memorizzati nella cache nel browser.

Blazor Hybrid

Le app ibride usano una combinazione di tecnologie native e Web. Un'app Blazor Hybrid usa Blazor in un'app client nativa. Razor i componenti vengono eseguiti in modo nativo nel processo .NET ed esegue il rendering dell'interfaccia utente Web in un controllo incorporato Web View usando un canale di interoperabilità locale. WebAssembly non viene usato nelle app ibride. Le app ibride includono le tecnologie seguenti:

  • .NET Multi-platform App UI (.NET MAUI): framework multipiattaforma per la creazione di app native per dispositivi mobili e desktop con C# e XAML.
  • Windows Presentation Foundation (WPF): framework dell'interfaccia utente indipendente dalla risoluzione e usa un motore di rendering basato su vettore, costruito per sfruttare l'hardware grafico moderno.
  • Windows Forms: framework dell'interfaccia utente che crea app client desktop avanzate per Windows. La piattaforma di sviluppo Windows Forms supporta un ampio set di funzionalità di sviluppo di app, tra cui controlli, grafica, data binding e input utente.

Per altre informazioni sulla creazione di Blazor Hybrid app con i framework precedenti, vedere gli articoli seguenti:

Interoperabilità JavaScript

Per le app che richiedono librerie JavaScript di terze parti e l'accesso alle API del browser, i componenti supportano l'interoperabilità con JavaScript. I componenti sono in grado di usare qualsiasi libreria o API supportata da JavaScript. Il codice C# può chiamare nel codice JavaScript e il codice JavaScript può chiamare nel codice C#.

Condivisione del codice e .NET Standard

Blazor implementa .NET Standard, che consente Blazor ai progetti di fare riferimento alle librerie conformi alle specifiche .NET Standard. .NET Standard è una specifica formale delle API .NET comuni tra le implementazioni di .NET. Le librerie di classi .NET Standard possono essere condivise tra piattaforme .NET diverse, ad esempio Blazor, .NET Framework, .NET Core, Xamarin, Mono e Unity.

Le API non valide all'interno di un Web browser (ad esempio per l'accesso al file system, l'apertura di un socket e la gestione dei thread) generano un'eccezione PlatformNotSupportedException.

Risorse aggiuntive