Sådan fungerer Blazor

Fuldført

Blazor indeholder mange funktioner, der kan hjælpe dig med at komme i gang og hurtigt levere dit næste webappprojekt. Lad os få en introduktion til de vigtigste funktioner i Blazor, så du kan beslutte, om du skal bruge Blazor til din næste fantastiske webapp.

Blazor-komponenter

Blazor-apps er bygget af komponenter. En Blazor-komponent er et stykke webbrugergrænseflade, der kan genbruges. En Blazor-komponent indkapsler både gengivelses- og brugergrænsefladehændelseshåndteringslogik. Blazor indeholder forskellige indbyggede komponenter til formularhåndtering, validering af brugerinput, visning af store datasæt, godkendelse og godkendelse. Udviklere kan også bygge og dele deres egne brugerdefinerede komponenter, og mange færdigbyggede Blazor-komponenter er tilgængelige fra Blazor-økosystemet.

Brug standardwebteknologier

Du opretter Blazor-komponenter ved hjælp af Razor-syntaks, som er en praktisk blanding af HTML, CSS og C#. En Razor-fil indeholder almindelig HTML og derefter C# til at definere en gengivelseslogik, f.eks. betinget, kontrolflow og evaluering af udtryk. Razor-filer kompileres derefter til C#-klasser, der indkapsler komponentens gengivelseslogik. Da Blazor-komponenter, der er oprettet i Razor, kun er C#-klasser, kan du kalde vilkårlig .NET-kode fra dine komponenter.

Håndtering af brugergrænsefladehændelse og databinding

Interaktive Blazor-komponenter kan håndtere standardinteraktioner for brugergrænsefladen på internettet ved hjælp af C#-hændelseshandlere. Komponenter kan opdatere deres tilstand som svar på hændelser i brugergrænsefladen og justere deres gengivelse i overensstemmelse hermed. Blazor omfatter også understøttelse af tovejsdatabinding til elementer i brugergrænsefladen for at holde komponenttilstanden synkroniseret med elementer i brugergrænsefladen.

Følgende eksempel er en simpel Blazor-tællerkomponent, der er implementeret i Razor. Det meste af indholdet er HTML, mens @code-blokken indeholder C#. Hver gang der trykkes på knappen, aktiveres metoden IncrementCount C#, hvilket forøger feltet currentCount, og derefter gengiver komponenten den opdaterede værdi:

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

Gengivelse på server- og klientsiden

Blazor understøtter både server- og gengivelse på klientsiden af komponenter til håndtering af forskellige webbrugergrænsefladearkitekturer. Komponenter, der gengives fra serveren, kan få adgang til serverressourcer, f.eks. databaser og backendtjenester. Blazor-komponenter gengives som standard statisk fra serveren, hvilket genererer HTML som svar på anmodninger.

Du kan også konfigurere serverkomponenter til at være interaktive, så de kan håndtere vilkårlige hændelser i brugergrænsefladen, bevare tilstanden på tværs af interaktioner og gengive opdateringer dynamisk. Interaktive serverkomponenter håndterer interaktioner og opdateringer i brugergrænsefladen via en WebSocket-forbindelse til browseren.

Blazor-komponenter kan også gengives interaktivt fra klienten. Komponenten downloades til klienten og kører fra browseren via WebAssembly. Interaktive WebAssembly-komponenter kan få adgang til klientressourcer via webplatformen, f.eks. lokalt lager og hardware, og de kan endda fungere offline, når de er downloadet.

Du kan vælge at gengive forskellige komponenter fra serveren eller klienten i den samme app. Mange af siderne i din app kræver muligvis slet ikke nogen interaktivitet og kan gengives statisk fra serveren. Mens andre mere interaktive dele af din app kan håndteres fra serveren eller klienten. Du kan beslutte, hvilken komponentgengivelsestilstand der skal bruges på designtidspunktet eller kørselstidspunktet. Med Blazor har du fleksibiliteten til at bygge den webapparkitektur, der passer til dit scenarie.

Brug Blazor til at bygge en pizzabutik

Brugergrænsefladen i pizzabutikkens app opdeler i mange komponenter, der kan genbruges: et sidelayout med en navigationslinje, individuelle sider, et pizzakatalog og en editor, en ordrekomponent osv. Blazor leverer indbygget understøttelse af mange af disse komponenter, f.eks. komponenter til formularer og validering. Mange af siderne i appen kan håndteres fra serveren ved hjælp af statisk gengivelse på serversiden, så webstedet for det meste er tilstandsløst og klar til skalering. Hvis der er behov for mere interaktivitet, gøres komponenterne interaktive ved at anvende en interaktiv gengivelsestilstand. Hvis du vil aflaste arbejde fra serveren, gengives interaktive komponenter på klienten via WebAssembly. Ved at bygge hele appen med en enkelt webudviklingsstak samles appen hurtigt, og snart kommer pizzaordrerne ind.