ASP.NET Core Blazor

Welkom bij Blazor!

Blazor is een .NET- front-endwebframework dat ondersteuning biedt voor zowel rendering aan serverzijde als client-interactiviteit in één programmeermodel:

• Maak uitgebreide interactieve gebruikersinterfaces met behulp van C#.
• Server- en clientzijde applicatielogica in .NET delen.
• Geef de gebruikersinterface weer als HTML en CSS voor brede browserondersteuning, inclusief mobiele browsers.
• Hybride desktop- en mobiele apps bouwen met .NET en Blazor.

Het gebruik van .NET voor webontwikkeling aan de clientzijde biedt de volgende voordelen:

• Schrijf code in C#, waardoor de productiviteit in app-ontwikkeling en -onderhoud kan worden verbeterd.
• Maak gebruik van het bestaande .NET-ecosysteem van .NET-bibliotheken.
• Profiteer van de prestaties, betrouwbaarheid en beveiliging van .NET.
• Blijf productief in Windows, Linux of macOS met een ontwikkelomgeving, zoals Visual Studio of Visual Studio Code. Integreer met moderne hostingplatforms, zoals Docker-.
• Bouw voort op een algemene set talen, frameworks en hulpprogramma's die stabiel, uitgebreid en gebruiksvriendelijk zijn.

Notitie

Zie Bouw uw eerste Blazor-appvoor een snelstart zelfstudie Blazor.

Onderdelen

Blazor apps zijn gebaseerd op onderdelen. Een onderdeel in Blazor is een element van de gebruikersinterface, zoals een pagina, dialoogvenster of gegevensinvoerformulier.

Onderdelen zijn .NET C#-klassen die zijn ingebouwd in .NET-assembly's die:

• Definieer flexibele UI-renderinglogica.
• Gebruikersevenementen verwerken.
• Kan worden genest en hergebruikt.
• Kan worden gedeeld en gedistribueerd als Razor klassebibliotheken of NuGet-pakketten.

De onderdeelklasse wordt meestal geschreven in de vorm van een Razor opmaakpagina met een .razor bestandsextensie. Onderdelen in Blazor worden formeel aangeduid als Razor onderdelen, informeel als Blazor onderdelen. Razor is een syntaxis voor het combineren van HTML-markeringen met C#-code die is ontworpen voor de productiviteit van ontwikkelaars. Razor kunt u schakelen tussen HTML-markup en C# in hetzelfde document met IntelliSense programmaondersteuning in Visual Studio.

Blazor maakt gebruik van natuurlijke HTML-tags voor de samenstelling van de gebruikersinterface. In de volgende Razor markering wordt een onderdeel gedemonstreert waarmee een teller wordt verhoogd wanneer de gebruiker een knop selecteert.

<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++;
    }
}

Onderdelen worden weergegeven in een in-memory weergave van de DOM (Document Object Model) van de browser een weergavestructuurgenoemd, die wordt gebruikt om de gebruikersinterface op een flexibele en efficiënte manier bij te werken.

Een volledige stack-web-app bouwen met Blazor

Blazor Web Appbieden een architectuur op basis van onderdelen met rendering aan serverzijde en volledige interactiviteit aan de clientzijde in één oplossing, waar u kunt schakelen tussen renderingmodi aan de serverzijde en clientzijde en zelfs op dezelfde pagina kunt combineren.

Blazor Web Apps kan de gebruikersinterface snel aan de browser leveren door html-inhoud van de server statisch weer te geven als reactie op aanvragen. De pagina wordt snel geladen omdat ui-rendering snel wordt uitgevoerd op de server zonder dat u een grote JavaScript-bundel hoeft te downloaden. Blazor kan ook de gebruikerservaring verder verbeteren met verschillende progressieve verbeteringen in serverweergave, zoals verbeterde navigatie met formulierberichten en streamingweergave van asynchroon gegenereerde inhoud.

Blazor ondersteunt interactieve server-side rendering (interactieve SSR), waarbij interacties van de gebruikersinterface worden verwerkt vanaf de server via een realtime verbinding met de browser. Interactieve SSR maakt een uitgebreide gebruikerservaring mogelijk, zoals u zou verwachten van een client-app, maar zonder dat u API-eindpunten hoeft te maken voor toegang tot serverresources. Pagina-inhoud voor interactieve pagina's wordt vooraf gegenereerd, waarbij inhoud op de server in eerste instantie wordt gegenereerd en naar de client wordt verzonden zonder gebeurtenis-handlers in te schakelen voor gerenderde besturingselementen. De server voert de HTML-gebruikersinterface van de pagina zo snel mogelijk uit als reactie op de eerste aanvraag, waardoor de app sneller reageert op gebruikers.

Blazor Web Appbiedt ondersteuning voor interactiviteit met CSR (Client Side Rendering) die afhankelijk is van een .NET-runtime die is gebouwd met WebAssembly- die u met uw app kunt downloaden. Wanneer u Blazor uitvoert op WebAssembly, heeft uw .NET-code toegang tot de volledige functionaliteit van de browser en interop met JavaScript. Uw .NET-code wordt uitgevoerd in de beveiligings sandbox van de browser met de beveiligingen die de sandbox biedt tegen schadelijke acties op de clientcomputer.

Blazor apps kunnen volledig gericht zijn op uitvoering op WebAssembly in de browser zonder de betrokkenheid van een server. Voor een zelfstandige Blazor WebAssembly-app-worden assets geïmplementeerd als statische bestanden op een webserver of service die statische inhoud aan clients kan leveren. Na het downloaden kunnen zelfstandige Blazor WebAssembly apps in de cache worden opgeslagen en offline worden uitgevoerd als een Progressive Web App (PWA).

Een systeemeigen client-app bouwen met Blazor Hybrid

Blazor Hybrid maakt het gebruik van Razor onderdelen in een systeemeigen client-app mogelijk met een combinatie van systeemeigen en webtechnologieën voor web-, mobiele en desktopplatforms. Code wordt native uitgevoerd in het .NET-proces en rendert web-UI op een ingesloten Web View-besturingselement met behulp van een lokaal interopkanaal. WebAssembly wordt niet gebruikt in hybride apps. Hybride apps zijn gebouwd met .NET Multi-platform App UI (.NET MAUI), een platformoverschrijdend framework voor het maken van systeemeigen mobiele apps en desktop-apps met C# en XAML.

De Blazor Hybrid ondersteunt WPF- (Windows Presentation Foundation) en Windows Forms om apps van eerdere technologie over te schakelen naar .NET MAUI.

Volgende stappen

Blazor Zelfstudie: uw eerste Blazor-app bouwenASP.NET Core Blazor ondersteunde platforms