16476 · 16475 · Blazor · OpgaverAPI · 13 lektioner

Teori

Ikke en tjekliste — et pensum I kan arbejde med. Hver lektion har labs, quizzes og mini-opgaver mod rigtige endpoints. Målpindene er taggede, så dokumentationen skriver næsten sig selv.

0 / 13 lektioner besøgt

01

Læs + afspil

Start labben før I kopierer kode. Forståelsen sidder bedre, når I har set requesten flyve.

02

Besvar quizzen

Tre spørgsmål pr. lektion. Forkert svar er OK — den grønne mulighed forklarer hvorfor.

03

Mini-opgave

Byg det lille flow i jeres Blazor-app mod OpgaverAPI — så er målpinden dokumenteret med bevis.

Client ↔ Server

Afspil en HTTP-runde. Samme model jeres Blazor-app bruger via HttpClient.

KlientBrowser / Blazor
ServerOpgaverAPI
# Vælg scenarie og tryk Afspil

16476 · H1/H2

Clientsideprogrammering

HTML/CSS i Razor, EditForm, komponenter, HttpClient og sikker clientside — jQuery kun som historisk kontekst.

16475 · H2/H3

GUI-programmering

SPA med Blazor: layout, routing, DI, livscyklus, async API-kald, auth og usability.

Læringssti

  1. Intro og hostingBlazor vs andre SPA’er · Server / WASM / Hybrid · Client↔Server-lab.
  2. Projekt-opsætningTemplate · filtræ-lab · Program.cs · Docker.
  3. Razor, HTML og CSSSemantik · box model · CSS isolation · Bootstrap.
  4. Forms med EditFormModel · DataAnnotations · live validerings-lab.
  5. Komponenter og eventsParameter · @bind-lab · EventCallback.
  6. Dependency InjectionLifetimes · factory · typed clients · DI-lab med visuelle id’er.
  7. Livscyklus og stateOnInitializedAsync · autoplay · CancellationToken.
  8. HttpClient og API-kaldCRUD · async-timeline · fejlhåndtering.
  9. Routing og SPA@page · NavLink · interaktiv SPA-shell.
  10. Layout og UI-patternsMaster/Detail · MudBlazor · async vs threads.
  11. Auth og API-nøglerPKCE · Bearer · X-Api-Key · sessionStorage.
  12. Sikkerhed og performanceXSS-lab · tokens · CORS · WASM.
  13. Debug, test og usabilityDevTools · testplan · usability-script.

Klar-quiz

Hvad er den anbefalede måde at kalde OpgaverAPI fra Blazor på?

Baseret på MAGS Blazor-wiki og Microsoft Learn. Eksempler: BlazorEksempler.