Hvordan man bygger webkomponenter med Blazor WebAssembly

Blazor WebAssembly gør det muligt at opbygge interaktive webapplikationer ved hjælp af C# og .NET, hvilket giver udviklere mulighed for at udnytte deres eksisterende færdigheder i C# til at bygge komponenter og logik til browseren. Et af de væsentlige elementer i Blazor er komponenter, som udgør byggestenene i Blazor-applikationer.

En Blazor-komponent er en C#-klasse, der definerer et stykke UI og logik, som kan bruges og genbruges i applikationen. Den kan implementere forskellige livscyklusmetoder, som giver udviklerne mulighed for at tilpasse komponentens adfærd på forskellige stadier af sin eksistens. Den mest grundlæggende komponent nedarves fra ComponentBase, en klasse, der giver de nødvendige funktioner for at interagere med Blazors rendering-system.

Når komponenten er oprettet, skal den muligvis vise noget UI. I Blazor bruges .razor-filer til at definere komponenternes visuelle struktur. For at organisere komponenter kan udviklere benytte sig af layouts, som fungerer på samme måde som i MVC- eller Razor Pages-applikationer. Dette gør det muligt at opretholde en ensartet struktur på tværs af flere sider i en Blazor-applikation.

Blazor understøtter også navigering mellem sider i applikationen. Dette kan gøres ved hjælp af NavigationManager, der håndterer navigationen i applikationen. En vigtig komponent i navigering er NavLink, som fungerer som en hyperlink, men med den ekstra funktionalitet at markere den som aktiv, når URL'en matcher den aktuelle placering. Dette gør det lettere at implementere navigationssystemer, hvor den aktuelle side er tydeligt markeret.

For at få en dybere forståelse af Blazor WebAssembly og byggekomponenter er det nødvendigt at forstå, hvordan Blazor arbejder med routing og komponenter. Når man arbejder med Blazor, er det vigtigt at forstå, at Blazor-komponenter kan kommunikere med hinanden ved at videregive data og modtage parametre. Dette giver udvikleren mulighed for at bygge komplekse og dynamiske brugergrænseflader, hvor hver komponent kan være ansvarlig for en bestemt funktionalitet.

En vigtig god praksis, når man arbejder med Blazor, er at sikre, at URL'er og ruteparametre bruger et invariant kulturformat. Dette sikrer, at applikationen fungerer korrekt på tværs af forskellige lokaliteter og kulturer. For eksempel bør dato- og tidsparametre altid være i et format, der er universelt forståeligt, uanset brugerens lokalitet.

For at komme i gang med at bygge en Blazor WebAssembly-applikation, skal man først oprette et nyt Blazor WebAssembly-projekt. Dette kan gøres ved at vælge den relevante projektmal i Visual Studio eller Visual Studio Code. Derefter kan man tilføje komponenter til applikationen og definere deres opførsel og udseende. En god forståelse af, hvordan Blazor arbejder med routing, komponenter og layouts, er nøglen til at bygge velstrukturerede og vedligeholdelsesvenlige applikationer.

Når du bygger webkomponenter i Blazor, skal du være opmærksom på, at der kan være situationer, hvor det er nødvendigt at interagere med serveren, for eksempel ved at hente data fra en API. Blazor WebAssembly understøtter dette ved at bruge HTTP-klienter, som kan gøre asynkrone kald til serveren, og dataene kan derefter bruges til at opdatere brugergrænsefladen i realtid. Denne integration mellem klient og server er en af de største styrker ved Blazor WebAssembly, da det giver mulighed for at bygge moderne, interaktive webapplikationer, der er både hurtige og skalerbare.

Hvordan man bruger åbne kildeblazor-komponenter til at tilføje emojis og billeder i en Blazor-applikation

I en moderne webapplikation er det vigtigt at kunne skabe en engagerende og visuel brugeroplevelse. Dette kan gøres på mange måder, men en populær metode er ved at anvende emojis og billeder, som ofte kan tilføje farve og personlighed til en applikation. Når vi arbejder med Blazor, en framework fra Microsoft, er det muligt at integrere emojis fra åbne kilder som Fluent Emoji, hvilket gør applikationen både mere visuelt tiltalende og lettere at bruge.

Microsoft har åbnet kildekoden til sin Fluent Emoji-samling, en samling af moderne og venlige emojis, som man kan bruge i sine projekter. Disse emojis kan findes og downloades via GitHub-repositoryet FluentUI Emoji. I denne proces ser vi på, hvordan man kan tilføje billeder til forskellige kategorier af produkter i en Blazor-applikation.

I denne artikel vil vi gennemgå, hvordan man opretter en metode til at konvertere et billede til Base64, som kan bruges som en kilde til en billedelement (<img>), og hvordan man opretter komponenter, der viser emojis for hver kategori i applikationen.

Implementering af en Base64-konvertering

Når vi arbejder med billeder i en webapplikation, er det ofte nødvendigt at konvertere billeder til Base64-format. Dette gør det muligt at inkludere billeder direkte i koden som en streng, hvilket kan være nyttigt for at forbedre ydeevnen og reducere serveranmodninger. I Blazor kan vi oprette en hjælpefunktion, som konverterer billeder, der er gemt som byte arrays, til Base64-strenge. Denne funktion vil blive anvendt til at vise et billede for hver kategori, som bliver hentet fra en database.

csharp
Copy code
namespace Packt.Shared;

public static class NorthwindExtensionMethods

{
    public static string ConvertToBase64Jpeg(this byte[] picture)
    {
        return string.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(picture));
    }
}

Hentning af kategoridata og emojis

I Blazor-komponenterne skal vi hente data om produktkategorier og derefter vise relevante billeder og emojis for hver kategori. Vi definerer en ConvertToEmoji-metode, som returnerer en filsti til et billede baseret på kategoriens navn. Dette billede kan derefter bruges som kilde til et billedelement:

csharp
Copy code
private string ConvertToEmoji(string categoryName)

{
    return categoryName switch
    {
        "Beverages" => "assets/Hot beverage/3D/hot_beverage_3d.png",
        "Condiments" => "assets/Honey pot/3D/honey_pot_3d.png",
        "Confections" => "assets/Lollipop/3D/lollipop_3d.png",
        "Dairy Products" => "assets/Cheese wedge/3D/cheese_wedge_3d.png",
        "Grains/Cereals" => "assets/Bread/3D/bread_3d.png",
        "Meat/Poultry" => "assets/Cut of meat/3D/cut_of_meat_3d.png",
        "Produce" => "assets/Leafy green/3D/leafy_green_3d.png",
        "Seafood" => "assets/Lobster/3D/lobster_3d.png",
        _ => "assets/Pot of food/3D/pot_of_food_3d.png"
    };
}

Denne metode returnerer en relativ sti til det billede, som skal vises, afhængigt af hvilken kategori der er valgt. Hver kategori får sin egen 3D-billedfil fra Fluent Emoji-samlingen, og vi kan bruge denne filsti til at vise et billede ved hjælp af Blazor.

Håndtering af kategoridata

Når vi henter kategoridata fra en API, kan vi bruge Blazors HttpClient til at få disse data og vise dem på en side. Vi opretter en Razor-komponent, der henter kategorierne og viser dem i tabs, hvor hver tab viser produkterne for en given kategori:

csharp
Copy code
@page "/categories"
@inject IHttpClientFactory httpClientFactory
Categories
@if (categories is null)
{
    <p>No category found.</p>
}
else
{
    @foreach (Category category in categories)
    {
        <div>@category.CategoryName</div>
        @foreach (Product product in category.Products)
        {
            // Display product info here
        }
        @if (category.Picture is not null)
        {
            <img src="@category.Picture.ConvertToBase64Jpeg()" alt="Category Image" />
        }
    }
}
@code {
    private IQueryable<Category>? categories;

    protected override async Task OnParametersSetAsync()

    {
        Category[]? categoriesArray = null;
        JsonSerializerOptions jsonOptions = new() { ReferenceHandler = ReferenceHandler.Preserve, PropertyNameCaseInsensitive = true };
        HttpClient client = httpClientFactory.CreateClient("Northwind.BlazorLibraries.ServerAPI");
        string path = "api/categories";
        try
        {
            categoriesArray = (await client.GetFromJsonAsync(path, jsonOptions));
        }
        catch (Exception ex)
        {
            Console.WriteLine($"{ex.GetType()}: {ex.Message}");
        }
        if (categoriesArray is not null)
        {
            categories = categoriesArray.AsQueryable();
        }
    }
}

Integration af emojis i projektet

Når du har hentet emojis og billederne til dit projekt, skal du placere dem i en passende mappe i din wwwroot-mappe. I dette tilfælde opretter vi en assets-mappe, hvor alle emoji-billeder gemmes. Når billederne er på plads, kan de bruges i Blazor-komponenterne som vi har beskrevet tidligere. De relative stier til disse billeder vil være baseret på den struktur, du har oprettet i wwwroot:

bash
Copy code
wwwroot/assets/Hot beverage/3D/hot_beverage_3d.png
wwwroot/assets/Honey pot/3D/honey_pot_3d.png
wwwroot/assets/Lollipop/3D/lollipop_3d.png
wwwroot/assets/Cheese wedge/3D/cheese_wedge_3d.png

Vigtige overvejelser

Når man arbejder med emojis og billeder i Blazor, er der nogle vigtige aspekter, som bør tages i betragtning:

1. Ydeevne: Brug af Base64-kodning kan øge størrelsen af den oprindelige kode. Det er derfor en god idé at bruge denne metode kun til mindre billeder, eller når det er nødvendigt at minimere antallet af serveranmodninger.

2. Skalerbarhed: For store applikationer med mange kategorier og billeder bør man overveje alternative metoder som dynamisk billedhåndtering og cachelagring af billeder for at undgå ydeevneproblemer.

3. Brugervenlighed: Emojis og billeder skal være i overensstemmelse med applikationens design og formål. For eksempel skal du sikre dig, at billederne ikke overbelaster brugergrænsefladen, men snarere tilføjer værdi og visuel appel.