Delen via

Basisprincipes van ASP.NET Core Blazor

  • Artikel

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Fundamentals artikelen bieden richtlijnen voor fundamentele Blazor concepten. Sommige concepten zijn verbonden met een basisbegrip van Razor onderdelen, die verder worden beschreven in de volgende sectie van dit artikel en die in de artikelen Onderdelen worden beschreven.

Statische en interactieve renderingconcepten

Razor onderdelen worden statisch weergegeven of interactief weergegeven.

Statische of statische rendering is een scenario aan de serverzijde dat betekent dat het onderdeel wordt weergegeven zonder de capaciteit voor interactie tussen de gebruiker en .NET/C#-code. JavaScript- en HTML DOM-gebeurtenissen blijven ongewijzigd, maar er kunnen geen gebruikersgebeurtenissen op de client worden verwerkt met .NET die op de server wordt uitgevoerd.

Interactieve ofwel interactieve rendering betekent dat het onderdeel over de capaciteit beschikt om .NET-gebeurtenissen te verwerken via C#-code. De .NET-gebeurtenissen worden verwerkt op de server door de ASP.NET Core-runtime of in de browser op de client door de Blazor runtime op basis van WebAssembly.

Belangrijk

Wanneer u een Blazor Web Appgebruikt, moeten de meeste van de Blazor voorbeeldonderdelen van documentatie interactiviteit functioneren en de concepten laten zien die in de artikelen worden behandeld. Wanneer u een voorbeeldonderdeel test dat wordt geleverd door een artikel, moet u ervoor zorgen dat de app gebruikmaakt van wereldwijde interactiviteit of dat het onderdeel een interactieve rendermodus gebruikt.

Meer informatie over deze concepten en het beheren van statische en interactieve rendering vindt u in de ASP.NET Core Blazor-weergavemodi artikel verderop in de documentatie van Blazor.

Concepten voor client- en serverweergave

In de Blazor-documentatie wordt vermeld dat de activiteit die op het systeem van de gebruiker plaatsvindt, gebeurt aan de client- of aan de clientzijde. Activiteit die plaatsvindt op een server wordt gezegd op de server of serverzijde.

De term rendering betekent het produceren van de HTML-opmaak die door browsers wordt weergegeven.

  • Client-side rendering (CSR) betekent dat de uiteindelijke HTML-opmaak door de .NET WebAssembly-runtime op de client wordt gegenereerd. Er wordt geen HTML voor de door de client gegenereerde gebruikersinterface van de app naar de client verzonden voor dit type rendering. Er wordt aangenomen dat gebruikers interactie hebben met de pagina. Er bestaat geen concept van statische client-side rendering. CSR wordt verondersteld interactief te zijn, dus 'interactieve client-side rendering' en 'interactieve CSR' worden niet gebruikt door de branche of in de Blazor documentatie.

  • SSR(Server Side Rendering) betekent dat de uiteindelijke HTML-opmaak wordt gegenereerd door de ASP.NET Core-runtime op de server. De HTML wordt via een netwerk naar de client verzonden voor weergave door de browser van de client. Er wordt geen HTML voor de door de server gegenereerde gebruikersinterface van de app gemaakt door de client voor dit type rendering. SSR kan van twee soorten zijn:

    • Statische SSR-: de server produceert statische HTML die niet voorziet in gebruikersinteractiviteit of het handhaven van de status van het Razor-onderdeel.
    • Interactive SSR-: Blazor gebeurtenissen staan gebruikersinteractiviteit toe en de Razor onderdeelstatus wordt onderhouden door het Blazor raamwerk.

  • Prerendering is het proces van het in eerste instantie weergeven van pagina-inhoud op de server 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. Prerendering kan ook SEO- (Search Engine Optimization) verbeteren door inhoud weer te geven voor het eerste HTTP-antwoord dat zoekmachines gebruiken om de paginarang te berekenen. Prerendering wordt altijd gevolgd door definitieve rendering, hetzij op de server of op de client.

Razor onderdelen

Blazor apps zijn gebaseerd op Razor onderdelen, ook wel onderdelengenoemd. Een onderdeel is een element van de gebruikersinterface, zoals een pagina, dialoogvenster of gegevensinvoerformulier. Onderdelen zijn .NET C#-klassen die zijn opgenomen in .NET-assemblages.

Razor verwijst naar de wijze waarop onderdelen meestal worden geschreven in de vorm van een Razor opmaakpagina voor ui-logica en -samenstelling aan de clientzijde. Razor is een syntaxis voor het combineren van HTML-markeringen met C#-code die is ontworpen voor de productiviteit van ontwikkelaars. Razor bestanden gebruiken de bestandsextensie .razor.

Hoewel sommige Blazor ontwikkelaars en onlinebronnen de term 'Blazor onderdelen' gebruiken, vermijdt de documentatie die term en universeel gebruikmaakt van 'Razor onderdelen' of 'onderdelen'.

Blazor documentatie neemt verschillende conventies over voor het weergeven en bespreken van onderdelen:

  • Over het algemeen voldoen voorbeelden aan ASP.NET Core/C#-coderingsconventies en technische richtlijnen. Zie de volgende bronnen voor meer informatie:
  • Projectcode, bestandspaden en -namen, projectsjabloonnamen en andere gespecialiseerde termen zijn in Amerikaans Engels en meestal in codeblokken.
  • Onderdelen worden meestal aangeduid met de C#-klassenaam (Pascal case), gevolgd door het woord 'component'. Een typisch onderdeel voor het uploaden van bestanden wordt bijvoorbeeld het onderdeel 'FileUpload' genoemd.
  • Meestal is de C#-klassenaam van een onderdeel hetzelfde als de bestandsnaam.
  • Routeerbare componenten stellen meestal hun relatieve URL's in op de klassenaam van de component in kebab-case. Een FileUpload-onderdeel bevat bijvoorbeeld routeringsconfiguratie om het gerenderde onderdeel te bereiken op de relatieve URL /file-upload. Routering en navigatie wordt behandeld in ASP.NET Core Blazor routering en navigatie.
  • Wanneer meerdere versies van een onderdeel worden gebruikt, worden ze opeenvolgend genummerd. Het FileUpload3 onderdeel wordt bijvoorbeeld bereikt op /file-upload-3.
  • Razor richtlijnen aan de bovenkant van een onderdeeldefinitie (.razor file) worden in de volgende volgorde geplaatst: @page, @rendermode (.NET 8 of hoger), @using richtlijnen, andere richtlijnen in alfabetische volgorde.
  • Hoewel dit niet vereist is voor private leden, worden toegangsaanpassingen gebruikt in artikelvoorbeelden en voorbeeld-apps. private wordt bijvoorbeeld vermeld voor het declareren van een veld met de naam maxAllowedFiles als private int maxAllowedFiles = 3;.
  • componentparameter waarden beginnen met een Razor gereserveerd @ symbool, maar dat is niet vereist. Letterlijke waarden (bijvoorbeeld booleaanse waarden), trefwoorden (bijvoorbeeld this) en null als onderdeelparameterwaarden worden niet voorafgegaan door @, maar dit is ook slechts een documentatieconventie. Uw eigen code kan letterlijke waarden voorafgaan met @ als u dat wilt.
  • C#-klassen maken gebruik van het this trefwoord en vermijd voorvoegselvelden met een onderstrepingsteken (_) die zijn toegewezen in constructors, die verschillen van de richtlijnen voor ASP.NET Core Framework Engineering.
  • In voorbeelden die gebruikmaken van primaire constructors (C# 12 of hoger), worden primaire constructorparameters doorgaans rechtstreeks door klasseleden gebruikt. In artikelvoorbeelden worden coderegels gesplitst om horizontaal schuiven te verminderen. Deze onderbrekingen zijn niet van invloed op de uitvoering, maar kunnen worden verwijderd bij het plakken in uw project.

Aanvullende informatie over de syntaxis van Razor onderdelen vindt u in de Razor syntaxis sectie van ASP.NET Core Razor-onderdelen.

Hier volgt een voorbeeld van een telleronderdeel en een deel van een app die is gemaakt op basis van een Blazor projectsjabloon. Gedetailleerde onderdelendekking vindt u in de Onderdelen artikelen verderop in de documentatie. In het volgende voorbeeld ziet u de concepten van onderdelen in de Fundamentals artikelen voordat u de artikelen Components verderop in de documentatie bereikt.

Counter.razor:

Bij het onderdeel wordt ervan uitgegaan dat een interactieve weergavemodus wordt overgenomen van een bovenliggend onderdeel of globaal wordt toegepast op de app.

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

Bij het onderdeel wordt ervan uitgegaan dat een interactieve weergavemodus wordt overgenomen van een bovenliggend onderdeel of globaal wordt toegepast op de app.

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

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

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

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Het voorgaande Counter onderdeel:

  • De route wordt ingesteld met de richtlijn @page in de eerste regel.
  • Hiermee stelt u de paginatitel en kop in.
  • Geeft het huidige aantal weer met @currentCount. currentCount is een geheel getalvariabele die is gedefinieerd in de C#-code van het @code blok.
  • Geeft een knop weer om de IncrementCount methode te activeren, die ook in het @code blok wordt gevonden en verhoogt de waarde van de currentCount variabele.

Rendermodi

In de artikelen in de Fundamentals node wordt verwezen naar het concept van weergavemodi. Dit onderwerp wordt uitgebreid besproken in het ASP.NET Core Blazor weergavemodi artikel in de node Onderdelen, dat wordt weergegeven na de node Basisprincipes van artikelen.

Voor de vroege verwijzingen in dit knooppunt van artikelen om modusconcepten weer te geven, moet u op dit moment alleen het volgende noteren:

nl-NL: Elk onderdeel in een Blazor Web App adopteert een rendermodus om het hostingmodel te bepalen dat het gebruikt, waar het wordt weergegeven en of het statisch wordt weergegeven op de server, wordt weergegeven met gebruikersinteractiviteit op de server of wordt weergegeven voor gebruikersinteractiviteit op de client (meestal met prerendering op de server).

Blazor Server- en Blazor WebAssembly-apps voor ASP.NET Core-releases vóór .NET 8 blijven gericht op -hostingmodel-principes, niet op rendermodi. Rendermodi worden conceptueel toegepast op Blazor Web Apps in .NET 8 of hoger.

In de volgende tabel ziet u de beschikbare rendermodi voor het weergeven van Razor onderdelen in een Blazor Web App. Rendermodi worden toegepast op onderdelen met de @rendermode instructie op het onderdeelexemplaar of op de onderdeeldefinitie. Het is ook mogelijk om een rendermodus in te stellen voor de hele app.

Naam Beschrijving Locatie weergeven Interactief
Statische server Statische rendering aan serverzijde (statische SSR) Server
Interactieve server Interactieve server-side rendering (interactieve SSR) met behulp van Blazor Server Server ✔️
Interactieve WebAssembly CSR (Client Side Rendering) met behulp van Blazor WebAssembly† Klant ✔️
Interactieve auto Interactieve SSR met behulp van Blazor Server en vervolgens CSR bij volgende bezoeken nadat de Blazor bundel is gedownload Server en vervolgens client ✔️

†Client-side rendering (CSR) wordt verondersteld interactief te zijn. "Interactive client-side rendering" en "interactive CSR" worden niet gebruikt door de branche of in de documentatie van Blazor.

De voorgaande informatie over rendermodi is alles wat u moet weten om inzicht te hebben in de artikelen over Basisprincipes knooppunten. Als u niet eerder Blazor en Blazor artikelen leest om de inhoudsopgave omlaag te zetten, kunt u het verbruik van uitgebreide informatie over de weergavemodi vertragen totdat u de ASP.NET Core Blazor-weergavemodi bereikt artikel in het knooppunt Onderdelen.

Document Object Model (DOM)

Verwijzingen naar het documentobjectmodel maken gebruik van de afkorting DOM.

Zie de volgende bronnen voor meer informatie:

Subset van .NET-API's voor Blazor WebAssembly-apps

Een gecureerde lijst van specifieke .NET-API's die in de browser worden ondersteund voor Blazor WebAssembly is niet beschikbaar. U kunt echter handmatig zoeken naar een lijst met .NET-API's die zijn geannoteerd met [UnsupportedOSPlatform("browser")] om .NET-API's te detecteren die niet worden ondersteund in WebAssembly.

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Zie de volgende bronnen voor meer informatie:

Voorbeeld-apps

Voorbeeld-apps voor documentatie zijn beschikbaar voor inspectie en download:

Blazor GitHub-opslagplaats (dotnet/blazor-samples)

Zoek een voorbeeld-app door eerst de versiemap te selecteren die overeenkomt met de versie van .NET waarmee u werkt.

Voorbeelden van apps in de opslagplaats:

Voorbeelden van apps in de opslagplaats:

De voorbeeldopslagplaats bevat twee soorten voorbeelden:

  • Voorbeeld-apps met codefragmenten leveren de codevoorbeelden zoals weergegeven in artikelen. Deze apps compileren, maar zijn niet noodzakelijkerwijs uitvoerbare apps. Deze apps zijn handig voor het verkrijgen van voorbeeldcode die wordt weergegeven in artikelen.
  • Voorbeelden van apps die bij Blazor artikelen worden gecompileerd en uitgevoerd voor de volgende scenario's:
    • Blazor Server en Blazor WebAssembly met SignalR
    • Blazor WebAssembly loggen met scopes ingeschakeld

Zie het README-bestand van de GitHub-opslagplaats Blazor voorbeeldenvoor meer informatie, een lijst met voorbeelden in de opslagplaats en downloadinstructies.

De basic test-app van de ASP.NET Core-opslagplaats is ook een handige set voorbeelden voor verschillende Blazor scenario's:

BasicTestApp in ASP.NET Core-verwijzingsbron (dotnet/aspnetcore)

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Byte veelvouden

.NET-bytegrootten maken gebruik van metrische voorvoegsels voor niet-decimale veelvouden van bytes op basis van bevoegdheden van 1024.

Naam (afkorting) Grootte Voorbeeld
Kilobyte (KB) 1024 bytes 1 KB = 1024 bytes
Megabyte (MB) 10242 bytes 1 MB = 1.048.576 bytes
Gigabyte (GB) 10243 bytes 1 GB = 1.073.741.824 bytes

Ondersteuningsaanvragen

Alleen problemen met betrekking tot documentatie zijn geschikt voor de dotnet/AspNetCore.Docs opslagplaats. Open geen documentatieprobleem voor productondersteuning. Hulp zoeken via een of meer van de volgende ondersteuningskanalen:

Voor een mogelijke fout in het framework of productfeedback kunt u een issue openen voor de ASP.NET Core-producteenheid op dotnet/aspnetcore issues. Foutrapporten vereisen meestal het volgende:

  • Uitleg van het probleem: volg de instructies in de GitHub-probleemsjabloon die door de producteenheid wordt geleverd bij het openen van het probleem.
  • Minimale reproductieproject: Zet een project op GitHub voor de engineers van de producteenheid om te downloaden en uit te voeren. Koppel het project aan de openingscommentaar van het probleem.

Maak een documentatie-issue aan voor een mogelijk probleem met een Blazor-artikel. Als u een documentatiekwestie wilt openen, gebruikt u de Open een documentatiekwestie feedbacklink onderaan het artikel. Metagegevens die aan uw probleem zijn toegevoegd, bieden traceringsgegevens en pingen automatisch de auteur van het artikel. Als het onderwerp met de producteenheid is besproken voordat u het documentatieprobleem opent, plaatst u een kruiskoppeling naar het technische probleem in de openingscommentaar van het documentatieprobleem.

Voor problemen of feedback over Visual Studio gebruikt u de Een probleem melden of Een functie voorstellen bewegingen vanuit Visual Studio, waarmee interne problemen voor Visual Studio worden geopend. Zie Visual Studio Feedbackvoor meer informatie.

Voor problemen met Visual Studio Code vraagt u om ondersteuning op communityondersteuningsforums. Voor foutrapporten en productfeedback opent u een probleem in de microsoft/vscode GitHub-opslagplaats.

GitHub-problemen voor Blazor documentatie worden automatisch gemarkeerd voor sortering in het Blazor.Docs-project (dotnet/AspNetCore.Docs GitHub-opslagplaats). Een ogenblik geduld voor een reactie, met name in het weekend en op feestdagen. Meestal reageren auteurs van documentatie binnen 24 uur op weekdagen.

Ga naar Blazorvoor een verzameling koppelingen naar Blazor resources die door de community worden onderhouden.

Notitie

Microsoft bezit, onderhoudt of biedt geen ondersteuning voor Awesome Blazor en de meeste communityproducten en -services die daar worden beschreven en gekoppeld.