Razor-onderdelen in Blazor Hybrid

Nu u uw ontwikkelomgeving hebt ingesteld, gaan we de structuur van een Blazor Hybrid-project verkennen en leren hoe u nieuwe pagina's toevoegt.

Wat is Razor?

Razor is een markeringssyntaxis voor het insluiten van op .NET gebaseerde code in webpagina's. De Razor-syntaxis bestaat uit HTML-, C#- en Razor-specifieke syntaxis die meestal begint met een @ teken. Bestanden met Razor hebben over het algemeen een .cshtml bestandsextensie (gebruikt in ontwikkeling aan de serverzijde met Razor Pages en MVC) of een .razor extensie wanneer ze worden gebruikt in Razor-onderdelenbestanden . Razor-syntaxis is vergelijkbaar met de sjablonen van verschillende JavaScript SPA-frameworks (Single Page Application), zoals Angular, React, VueJs en Svelte.

Wat zijn Razor-onderdelen?

Een Razor-onderdeel definieert een herbruikbaar stukje webgebruikersinterface. Blazor-onderdelen zijn vergelijkbaar met React- en Angular-onderdelen in SPA-frameworks.

Als u het project verkent, ziet u verschillende Razor-onderdelen die zijn gedefinieerd in .razor-bestanden.

Tijdens het compileren wordt elk onderdeel ingebouwd in een .NET-klasse. De klasse bevat algemene gebruikersinterface-elementen, zoals status, renderinglogica, levenscyclusmethoden en gebeurtenis-handlers.

Probeer de teller

Navigeer in de actieve app naar de tellerpagina door het tabblad Teller in de zijbalk aan de linkerkant te selecteren. De volgende pagina moet vervolgens worden weergegeven:

Selecteer de knop Klik op mij om het aantal te verhogen zonder paginavernieuwing. Het verhogen van een teller op een webpagina vereist normaal gesproken het schrijven van JavaScript, maar met Blazor kunt u C# gebruiken.

U vindt de implementatie van het Counter onderdeel op Components/Pages/Counter.razor.

@page "/counter"

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

Een aanvraag voor /counter in de browser, zoals is opgegeven door de @page instructie bovenaan, zorgt ervoor dat het Counter onderdeel de inhoud weergeeft.

Telkens wanneer u de knop Klik op mij selecteert:

• De onclick gebeurtenis wordt geactiveerd.
• De IncrementCount methode wordt aangeroepen.
• De currentCount variabele wordt verhoogd.
• Het onderdeel wordt weergegeven om het bijgewerkte aantal weer te geven.