Razor-onderdelen

Nu u uw ontwikkelomgeving hebt ingesteld, gaan we de structuur van een Blazor-project verkennen en leren hoe Blazor-onderdelen werken.

De startpagina

De startpagina van de app wordt gedefinieerd door het Home.razor-bestand in de map Onderdelen/Pagina's . Home.razor bevat de volgende code:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

De @page instructie bovenaan geeft de route voor deze pagina op, zodat het Home onderdeel wordt weergegeven wanneer de gebruiker naar de hoofdmap van de app navigeert. De PageTitle tag is een Blazor-onderdeel waarmee de titel voor de huidige pagina wordt ingesteld, zodat deze wordt weergegeven op het browsertabblad. De rest van het bestand is normale HTML waarmee de inhoud voor de pagina wordt gedefinieerd.

Wat is Razor?

Razor is een syntaxis voor markeringen op basis van HTML en C#. Een Razor-bestand (.razor) bevat gewone HTML en vervolgens C# om eventuele renderinglogica te definiëren, zoals voor voorwaardelijk, controlestroom en expressie-evaluatie. Razor-bestanden worden vervolgens gecompileerd in C#-klassen die de renderinglogica van het onderdeel inkapselen.

Wat zijn Razor-onderdelen?

Als u de bestanden in het Blazor-project verkent, ziet u dat de meeste bestanden waaruit het project bestaat.razor-bestanden zijn. In Blazor definieert een Razor-bestand een herbruikbaar onderdeel waaruit een deel van de gebruikersinterface van de app bestaat. Onderdelen definiëren welke HTML moet worden weergegeven en hoe gebruikersevenementen moeten worden verwerkt.

Tijdens het compileren wordt elk Razor-onderdeel ingebouwd in een C#-klasse. De klasse kan algemene UI-elementen bevatten, zoals status, renderinglogica, levenscyclusmethoden en gebeurtenis-handlers. Omdat Blazor-onderdelen die zijn geschreven in Razor slechts C#-klassen zijn, kunt u willekeurige .NET-code van uw onderdelen gebruiken.

Onderdelen gebruiken

Als u een onderdeel van een ander onderdeel wilt gebruiken, voegt u een HTML-stijltag toe met een naam die overeenkomt met de naam van het onderdeel. Als u bijvoorbeeld een onderdeel hebt met de naam MyButton.razor, kunt u een MyButton onderdeel toevoegen aan een ander onderdeel door een <MyButton /> tag toe te voegen.

Onderdeelparameters

Onderdelen kunnen ook parameters hebben, waarmee u gegevens kunt doorgeven aan het onderdeel wanneer het wordt gebruikt. Onderdeelparameters worden gedefinieerd door een openbare C#-eigenschap toe te voegen aan het onderdeel dat ook een [Parameter] kenmerk heeft. Vervolgens kunt u een waarde opgeven voor een onderdeelparameter met behulp van een HTML-stijlkenmerk dat overeenkomt met de naam van de eigenschap. De waarde van de parameter kan elke C#-expressie zijn.

Het @code blok

Het @code blok in een Razor-bestand wordt gebruikt om C#-klasseleden (velden, eigenschappen en methoden) toe te voegen aan een onderdeel. U kunt de @code gebruiken om de status van onderdelen bij te houden, onderdeelparameters toe te voegen, levenscyclus-gebeurtenissen voor onderdelen te implementeren en gebeurtenis-handlers te definiëren.

Probeer de teller

Navigeer in de actieve app naar de pagina Teller 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 een pagina te vernieuwen. Voor het verhogen van een teller op een webpagina moet normaal gesproken JavaScript worden geschreven, maar met Blazor kunt u C# gebruiken.

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

@page "/counter"
@rendermode InteractiveServer

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

Een aanvraag voor /counter in de browser, zoals is opgegeven door de @page instructie bovenaan, zorgt ervoor dat het Counter onderdeel de inhoud weergeeft. De @rendermode-instructie maakt interactieve serverweergave mogelijk voor het onderdeel, zodat het gebeurtenissen van de gebruikersinterface vanuit de browser kan verwerken.

Telkens wanneer u de knop Klik hier selecteert:

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