Lärarguide · Lektion 4 av 8

Routing & layouts

Halvvägs i kursen. Mål: studenten kan skapa en flersidig app med navigering, route-parametrar och en egen layout.

V4
Vecka
2,5 h
Total tid
~50 min
Teori
~70 min
Workshop
Studentmaterial 04-routing-layout.html
Kompletterande resurser

Lektionens mål

Agenda (150 min)

0:00
Check-in.
0:10
Teori: @page, route-parametrar, constraints, query-strings.
0:35
Teori: NavigationManager, NavLink, NavLinkMatch.
0:50
Teori: Layouter — MainLayout, @Body, @layout-direktiv.
1:05
Paus 15 min
1:20
Workshop: produktlista → detalj-sida med id-parameter, custom layout.
2:20
Avrundning + hemuppgift.
2:30
Slut

Talartips per sektion

Route-constraints: visa skillnaden mellan /products/{id} och /products/{id:int}. Vid felaktig URL får man 404 istället för run-time exception. Mycket bättre UX.
NavLinkMatch: standardvärdet Prefix gör att "/"-länken alltid är aktiv. För Home-länken behöver du NavLinkMatch.All. Detta är ett vanligt missförstånd.
Layouter: säg att MainLayout är "ramen runt sidan". @Body är hålet där sidan dyker upp. Använd whiteboard.

Workshop — guide för läraren

  1. Skapa Pages/Products/Index.razor med @page "/products" som listar fem hårdkodade produkter.
  2. Skapa Pages/Products/Details.razor med @page "/products/{Id:int}" som visar en produkt.
  3. I lista: använd NavLink href="@($"/products/{p.Id}")" för varje rad.
  4. Lägg till en AdminLayout.razor med annan färg och en "Admin"-banner. Använd den på en ny @page "/admin".
  5. Visa NavigationManager.NavigateTo i en handler — t.ex. efter en simulerad "spara"-knapp.
@page "/products/{Id:int}"
@inject NavigationManager Nav

<h1>Produkt @Id</h1>
<button @onclick="GoBack">Tillbaka</button>

@code {
  [Parameter] public int Id { get; set; }
  private void GoBack() => Nav.NavigateTo("/products");
}

För snabba

  • Lägg till query-string-paginering: /products?page=2 via [SupplyParameterFromQuery].
  • Catch-all route för 404-sida: @page "/{*path}".

För dem som behöver stöd

  • Förbered en simpel Product-klass och en hårdkodad lista.
  • Hjälp med Imports.razor — många glömmer namespace för NavigationManager.

Vanliga frågor

Varför fungerar inte min route-parameter?
Tre vanliga orsaker: 1) parameter-namnet matchar inte (case-känsligt), 2) saknar [Parameter], 3) saknar constraint så typen blir string.
Hur skickar jag komplex data mellan sidor?
Inte via URL. Använd en service (DI) som båda sidorna kan läsa från. Det är L6:s ämne.
Min Home-länk är alltid markerad som aktiv — varför?
Default NavLinkMatch.Prefix matchar "/" mot allt. Sätt Match="NavLinkMatch.All" på Home-länken.
Min <NotFound> i Routes.razor renderas inte!
I .NET 10 är <NotFound>-render fragmentet borttaget. Använd Router NotFoundPage="typeof(NotFound)" som pekar på en hel komponent i stället. Se studentsidans 404-sektion.
Hemuppgift Övningar 1–4. Soloprojekt: bygg en mini-blog med lista och detalj-sida via id-parameter.
Förberedelse till nästa lektion L5 är start för examinationen. Säkerställ att examinationsbeskrivningen är delad i LMS innan nästa gång.

← L3 L5 — Formulär →