Introduzione a ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Di Daniel Roth e Luke LathamBy Daniel Roth and Luke Latham

Benvenuti in Blazor!Welcome to Blazor!

Blazor è un Framework per la creazione di un'interfaccia utente Web interattiva sul lato client con .NET: is a framework for building interactive client-side web UI with .NET:

  • Creare interfacce utente interattive avanzate con C# invece di JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Condividere la logica dell'app scritta in .NET sul lato client e sul lato server.Share server-side and client-side app logic written in .NET.
  • Eseguire il rendering dell'interfaccia utente come HTML e CSS per un ampio supporto dei browser, inclusi i browser per dispositivi mobili.Render the UI as HTML and CSS for wide browser support, including mobile browsers.

L'uso di .NET per lo sviluppo Web lato client offre i vantaggi seguenti:Using .NET for client-side web development offers the following advantages:

  • scrivere codice in C# invece che in JavaScript.Write code in C# instead of JavaScript.
  • Permette di sfruttare l'ecosistema .NET esistente di librerie .NET.Leverage the existing .NET ecosystem of .NET libraries.
  • Permette di condividere la logica dell'app tra server e client.Share app logic across server and client.
  • Permette di ottenere le prestazioni, l'affidabilità e la sicurezza di .NET.Benefit from .NET's performance, reliability, and security.
  • produttività con Visual Studio in Windows, Linux e macOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • basato su un set comune di linguaggi, framework e strumenti che sono stabili, ricchi di funzionalità e facili da usare.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

ComponentiComponents

Blazor le app sono basate su componenti. apps are based on components. Un componente di Blazor è un elemento dell'interfaccia utente, ad esempio una pagina, una finestra di dialogo o un form di immissione dati.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

I componenti sono classi .NET compilati in assembly .NET che:Components are .NET classes built into .NET assemblies that:

  • Definiscono la logica di rendering dell'interfaccia utente flessibile.Define flexible UI rendering logic.
  • Gestiscono gli eventi utente.Handle user events.
  • Possono essere annidati e riutilizzati.Can be nested and reused.
  • Possono essere condivisi e distribuiti come librerie di classi Razor oppure pacchetti NuGet.Can be shared and distributed as Razor class libraries or NuGet packages.

La classe dei componenti viene in genere scritta sotto forma di pagina di markup di Razor con un'estensione di file razor.The component class is usually written in the form of a Razor markup page with a .razor file extension. I componenti di Blazor vengono definiti formalmente come componenti Razor.Components in Blazor are formally referred to as Razor components. Razor è una sintassi per la combinazione di markup HTML con codice C# progettata per la produttività degli sviluppatori.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor permette di passare tra markup HTML e C# nello stesso file con supporto per IntelliSense.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. Anche Razor Pages ed MVC usano Razor.Razor Pages and MVC also use Razor. Diversamente da Razor Pages ed MVC, che sono 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.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Il markup Razor seguente mostra un componente (Dialog.razor), che può essere annidato all'interno di un altro componente:The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

Il contenuto del corpo della finestra di dialogo (ChildContent) e il titolo (Title) vengono forniti dal componente che usa questo componente nella propria interfaccia utente.The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes è un metodo C# attivato dall'evento onclick del pulsante.OnYes is a C# method triggered by the button's onclick event.

Blazor USA tag HTML naturali per la composizione dell'interfaccia utente. uses natural HTML tags for UI composition. Gli elementi HTML specificano i componenti e gli attributi di un tag passano valori alle proprietà del componente.HTML elements specify components, and a tag's attributes pass values to a component's properties.

Nell'esempio seguente il componente Index usa il componente Dialog.In the following example, the Index component uses the Dialog component. ChildContent e Title vengono impostati dagli attributi e dal contenuto dell'elemento <Dialog>.ChildContent and Title are set by the attributes and content of the <Dialog> element.

Index.razor:Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

Il rendering della finestra di dialogo viene eseguito quando viene effettuato l'accesso all'elemento padre (Index.razor) in un browser:The dialog is rendered when the parent (Index.razor) is accessed in a browser:

Rendering del componente Dialog nel browser

Quando questo componente viene usato nell'app, IntelliSense in Visual Studio e Visual Studio Code accelera lo sviluppo con il completamento di sintassi e parametri.When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Il rendering dei componenti viene eseguito in una rappresentazione in memoria del modello DOM (Document Object Model) del browser denominata albero di rendering, usato per aggiornare l'interfaccia utente in modo flessibile ed efficiente.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor webassembly WebAssembly

Importante

Webassembly Blazer in anteprimaBlazor WebAssembly in preview

Il Server Blazer è supportato in ASP.NET Core 3,0.Blazor Server is supported in ASP.NET Core 3.0. Il Webassembly Blazer è in anteprima per ASP.NET Core 3,1.Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor webassembly è un Framework di app a singola pagina per la creazione di app Web interattive sul lato client con .NET. WebAssembly is a single-page app framework for building interactive client-side web apps with .NET. Blazor webassembly usa gli standard Web aperti senza plug-in o transpilazione di codice e funziona in tutti i Web browser moderni, inclusi i browser per dispositivi mobili. WebAssembly uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.

L'esecuzione di codice .NET all'interno di Web browser è resa possibile da WebAssembly (tecnologia nota anche con l'abbreviazione wasm).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly è un formato bytecode compatto ottimizzato per il download veloce e la velocità massima di esecuzione.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly è un standard Web aperto ed è supportato nei Web browser senza plug-in.WebAssembly is an open web standard and supported in web browsers without plugins.

Il codice WebAssembly può accedere a tutte le funzionalità del browser tramite l'interoperabilità JavaScript (JavaScript interop).WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript interop). 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..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

[! OP. NO-LOC (Blazer)] webassembly esegue il codice .NET nel browser con webassembly. WebAssembly runs .NET code in the browser with WebAssembly.

Quando viene compilata ed eseguita un'app webassembly Blazor in un browser:When a Blazor WebAssembly app is built and run in a browser:

  • I file di codice C# e i file Razor vengono compilati in assembly .NET.C# code files and Razor files are compiled into .NET assemblies.
  • Gli assembly e il runtime .NET vengono scaricati nel browser.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor webassembly avvia il Runtime .NET e configura il runtime per caricare gli assembly per l'app. WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Il runtime di webassembly Blazor usa l'interoperabilità JavaScript per gestire la manipolazione DOM e le chiamate API del browser.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

La dimensione dell'app pubblicata, ovvero la dimensione del payload, è un fattore cruciale per le prestazioni ai fini dell'usabilità dell'app.The size of the published app, its payload size, is a critical performance factor for an app's useability. Un'app di grandi dimensioni impiega relativamente molto tempo a essere scaricata in un browser, influendo negativamente sull'esperienza utente.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor webassembly ottimizza le dimensioni del payload per ridurre i tempi di download: WebAssembly optimizes payload size to reduce download times:

  • Il codice non usato viene rimosso dall'app quando questa viene pubblicata dal linker del linguaggio intermedio.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • Le risposte HTTP vengono compresse.HTTP responses are compressed.
  • Il runtime e gli assembly .NET vengono memorizzati nella cache nel browser.The .NET runtime and assemblies are cached in the browser.

Server BlazorBlazor Server

Blazor separa la logica di rendering dei componenti dal modo in cui vengono applicati gli aggiornamenti dell'interfaccia utente. decouples component rendering logic from how UI updates are applied. Blazor Server fornisce il supporto per l'hosting di componenti Razor sul server in un'app ASP.NET Core. Server provides support for hosting Razor components on the server in an ASP.NET Core app. Gli aggiornamenti dell'interfaccia utente vengono gestiti tramite una connessione SignalR .UI updates are handled over a SignalR connection.

Il runtime gestisce l'invio di eventi dell'interfaccia utente dal browser al server e quindi applica gli aggiornamenti dell'interfaccia utente inviati dal server di nuovo al browser dopo l'esecuzione dei componenti.The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

La connessione utilizzata dal server Blazor per comunicare con il browser viene utilizzata anche per gestire le chiamate di interoperabilità JavaScript.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

[! OP. Il server NO-LOC (Blazer)] esegue il codice .NET sul server e interagisce con il Document Object Model sul client su [! OP. Connessione NO-LOC (SignalR)] Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

Interoperabilità JavaScriptJavaScript interop

Per le app che richiedono librerie JavaScript di terze parti e l'accesso alle API del browser, i componenti supportano l'interoperabilità con JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. I componenti sono in grado di usare qualsiasi libreria o API supportata da JavaScript.Components are capable of using any library or API that JavaScript is able to use. Il codice C# può effettuare chiamate nel codice JavaScript e vice versa.C# code can call into JavaScript code, and JavaScript code can call into C# code. Per ulteriori informazioni, vedere Interoperabilità ASP.NET Core Blazor JavaScript.For more information, see Interoperabilità ASP.NET Core Blazor JavaScript.

Condivisione del codice e .NET StandardCode sharing and .NET Standard

Blazor implementa .NET Standard 2,0. implements .NET Standard 2.0. .NET Standard è una specifica formale delle API .NET comuni tra le implementazioni di .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. Le librerie di classi .NET Standard possono essere condivise tra diverse piattaforme .NET, ad esempio Blazor, .NET Framework, .NET Core, Novell, mono e Unity..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and 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.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Risorse aggiuntiveAdditional resources