Databindning och händelser
Nu ska vi utforska hur du definierar logik för komponentrendering och hanterar användargränssnittshändelser.
Rendera C#-uttrycksvärden
När du vill återge värdet för ett C#-uttryck i Razor använder du ett inledande @ tecken. En komponent kan till exempel Counter återge värdet för sitt currentCount fält så här:
<p role="status">Current count: @currentCount</p>
Razor kan vanligtvis ta reda på när ett C#-uttryck slutar och du övergår till att skriva HTML. Men du kan också vara tydlig med början och slutet av uttrycket med hjälp av parens.
<p role="status">Current count: @(currentCount)</p>
Lägg till kontrollflöde
Du kan lägga till kontrollflöde i komponentrenderingslogik med hjälp av vanliga C#-instruktioner. Du kan till exempel villkorligt återge innehåll med hjälp av en C#-if-instruktion, så här:
@if (currentCount > 3)
{
<p>You win!</p>
}
Du kan också använda C# för att loopa över data och återge en lista med objekt:
<ul>
@foreach (var item in items)
{
<li>@item.Name</li>
}
</ul>
Hantera händelser
Blazor-komponenter hanterar ofta användargränssnittshändelser. Om du vill ange ett händelseåteranrop för en händelse från ett användargränssnittselement använder du ett attribut som börjar med @on och slutar med händelsenamnet. Du kan till exempel ange IncrementCount metoden som hanterare för en knappklickshändelse med hjälp av @onclick attributet så här:
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Du kan också ange C#-händelsehanterare för andra HTML-händelser, till exempel @onchange, @oninputoch så vidare. Händelsehanteringsmetoder kan vara synkrona eller asynkrona. Du kan också definiera händelsehanterare infogade med hjälp av C# lambda-uttryck:
<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>
Händelsehanterarmetoder kan också ta ett händelseargument med information om händelsen. Du kan till exempel komma åt värdet för ett indataelement som har ändrats, så här:
<input @onchange="InputChanged" />
<p>@message</p>
@code {
string message = "";
void InputChanged(ChangeEventArgs e)
{
message = (string)e.Value;
}
}
När en händelsehanterare har körts återger Blazor komponenten automatiskt med sitt nya tillstånd, så meddelandet visas när indata har ändrats.
Databindning
Ofta vill du att värdet för ett gränssnittselement ska bindas till ett visst värde i koden. När värdet för användargränssnittselementet ändras bör kodvärdet ändras och när kodvärdet ändras ska användargränssnittselementet visa det nya värdet. Blazors stöd för databindning gör det enkelt att konfigurera den här typen av dubbelriktad databindning.
Du binder ett gränssnittselement till ett visst värde i koden med hjälp av attributet @bind . Till exempel:
<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>
@code {
string text = "";
}
När du ändrar värdet för indata uppdateras fältet text med det nya värdet. Och när du ändrar värdet för text fältet genom att klicka på knappen Rensa rensas även värdet för indata.
Razor-direktiv
Razor-direktiv är reserverade nyckelord i Razor-syntax som påverkar hur en Razor-fil kompileras. Razor-direktiv börjar alltid med @ tecknet. Vissa Razor-direktiv visas i början av en ny rad, till exempel @page och @code, medan andra är attribut som kan tillämpas på element som attribut, till exempel @bind. Du hittar en fullständig lista över Razor-direktiven i Razor-syntaxreferensen.
Aktivera interaktivitet
Om du vill hantera användargränssnittshändelser från en komponent och använda databindning måste komponenten vara interaktiv. Som standard renderas Blazor-komponenter statiskt från servern, vilket innebär att de genererar HTML som svar på begäranden och annars inte kan hantera användargränssnittshändelser. Du gör en komponent interaktiv genom att använda ett interaktivt återgivningsläge med hjälp av @rendermode direktivet.
Du kan tillämpa direktivet på @rendermode en komponentdefinition:
@rendermode InteractiveServer
Eller till en komponentinstans:
<Counter @rendermode="InteractiveServer" />
Komponenten Counter är för närvarande den enda interaktiva komponenten i vår app och använder interaktiv serverrendering. Interaktiv serverrendering hanterar användargränssnittshändelser från servern via en WebSocket-anslutning med webbläsaren. Blazor skickar användargränssnittshändelser till servern via den här anslutningen så att appens komponenter kan hantera dem. Blazor hanterar sedan uppdatering av webbläsarens DOM med de renderade uppdateringarna.
Alternativt kan Blazor-komponenter använda återgivningsläget InteractiveWebAssembly för att återge interaktivt från klienten. I det här läget laddas komponentkoden ned till webbläsaren och kör klientsidan med hjälp av en WebAssembly-baserad .NET-körning.
Vilket interaktivt återgivningsläge du väljer att använda beror på appens krav. För närvarande är vårt Blazor-projekt bara konfigurerat för serverbaserad rendering, så för den här modulen håller vi oss till statisk och interaktiv serverrendering.