Skapa ett användargränssnitt med Blazor-komponenter

Slutförd

Med Blazor-komponenter kan du definiera webbsidor eller delar av HTML som innehåller dynamiskt innehåll med hjälp av .NET-kod. I Blazor kan du formulera dynamiskt innehåll med hjälp av C#, i stället för att använda JavaScript.

Anta att du arbetar för ett pizzaleveransföretag för att skapa en ny modern webbplats. Du börjar med en välkomstsida som kommer att bli landningssidan för de flesta webbplatsanvändare. Du vill visa specialerbjudanden och populära pizzor på den sidan.

I den här lektionen får du lära dig hur du skapar komponenter i Blazor och skriver kod som återger dynamiskt innehåll på dessa komponenter.

Förstå Blazor-komponenter

Blazor är ett ramverk som utvecklare kan använda för att skapa ett omfattande interaktivt användargränssnitt (UI) genom att skriva C#-kod. Med Blazor kan du använda samma språk för all kod, både på serversidan och på klientsidan. Du kan återge den för visning i många olika webbläsare, inklusive webbläsare på mobila enheter.

Note

Det finns två värdmodeller för kod i Blazor-appar:

• Blazor Server: I den här modellen körs appen på webbservern i en ASP.NET Core-app. På klientsidan skickas UI-uppdateringar, händelser och JavaScript-anrop via en SignalR-anslutning mellan klienten och servern. I den här modulen diskuterar och kodar vi för den här modellen.
• Blazor WebAssembly: I den här modellen laddas Blazor-appen, dess beroenden och .NET-körningen ned och körs i webbläsaren.

I Blazor skapar du användargränssnittet från fristående delar av koden som kallas komponenter. Varje komponent kan innehålla en blandning av HTML- och C#-kod. Komponenter skrivs med hjälp av Razor-syntax, där koden är markerad med @code direktivet. Andra direktiv kan användas för att komma åt variabler, binda till värden och uppnå andra återgivningsuppgifter. När appen kompileras kompileras HTML-koden och koden till en komponentklass. Komponenter skrivs som filer med ett .razor tillägg.

Note

Razor-syntax används för att bädda in .NET-kod på webbsidor. Du kan använda den i ASP.NET MVC-program (modell-View-Controller) där filer har ett .cshtml tillägg. Razor-syntax används i Blazor för att skriva komponenter. Dessa komponenter har .razor tillägget i stället och det finns ingen strikt uppdelning mellan kontrollanter och vyer.

Här är ett enkelt exempel på en Blazor-komponent:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

I det här exemplet anger koden värdet för en strängvariabel med namnet welcomeMessage. Variabeln återges i <p> taggar i HTML-koden. Vi undersöker mer komplexa exempel senare i den här lektionen.

Skapa Blazor-komponenter

När du skapar en Blazor-app med hjälp av mallen blazor i dotnet-kommandoradsgränssnittet (CLI) ingår flera komponenter som standard:

dotnet new blazor -o BlazingPizzaSite

Standardkomponenterna är startsidan Index.razor och demokomponenten Counter.razor . Båda dessa komponenter placeras i mappen Sidor . Du kan antingen ändra dessa vyer så att de passar dina behov eller ta bort dem och ersätta dem med nya komponenter.

Om du vill lägga till en ny komponent i en befintlig webbapp använder du det här kommandot:

dotnet new razorcomponent -n PizzaBrowser -o Pages

• Alternativet -n anger namnet på komponenten som ska läggas till. Det här exemplet lägger till en ny fil med namnet PizzaBrowser.razor.
• Alternativet -o anger den mapp som du vill innehålla den nya komponenten.

Important

Namnet på en Blazor-komponent måste börja med ett versalt tecken.

När du har skapat komponenten kan du öppna den för att redigeras med Visual Studio Code:

code Pages/PizzaBrowser

Skriva kod i en Blazor-komponent

När du skapar ett användargränssnitt i Blazor blandar du statisk HTML- och CSS-kod med C#-kod, ofta i samma fil. Om du vill särskilja dessa typer av kod använder du Razor-syntax. Razor-syntaxen innehåller direktiv, prefix med symbolen @, som avgränsar C#-kod, routningsparametrar, bundna data, importerade klasser och andra funktioner.

Nu ska vi överväga den här exempelkomponenten igen:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Du kan identifiera HTML-koden med taggarna <h1> och <p>. Den här markeringen är sidans statiska ramverk, där koden infogar dynamiskt innehåll. Razor-markeringen består av:

• Direktivet@page: Det här direktivet tillhandahåller en vägmall till Blazor. Vid körning letar Blazor upp en sida som ska visas genom att matcha den här mallen med den URL som användaren begärde. I det här fallet kan det matcha en URL för formuläret http://yourdomain.com/index.
• Direktivet@code: Det här direktivet förklarar att texten i följande block är C#-kod. Du kan placera så många kodblock som du behöver i en komponent. Du kan definiera komponentklassmedlemmar i dessa kodblock och ange deras värden från beräkning, datasökningsåtgärder eller andra källor. I det här fallet definierar koden en enskild komponentmedlem med namnet welcomeMessage och anger dess strängvärde.
• Medlemsåtkomstdirektiv: Om du vill inkludera värdet för en medlem i renderingslogik använder du symbolen @ följt av ett C#-uttryck, till exempel namnet på medlemmen. I det här fallet används @welcomeMessage-direktivet för att återge värdet för den welcomeMessage medlemmen i <p>-taggarna.