Lärarguide · Lektion 2 av 8

Razor-komponenter

Andra lektionen handlar om komponenten som byggsten. Mål: studenten kan bryta ned ett UI i återanvändbara komponenter med parametrar och child content.

V2

Vecka

2,5 h

Total tid

~55 min

Teori

~65 min

Workshop

Studentmaterial 02-razor-komponenter.html

Kompletterande resurser

MS Learn: aspnet/core/blazor/components
Pluralsight: Blazor Fundamentals (Roland Guijt) — modulen om komponenter

Lektionens mål

Studenten kan skapa en komponent med [Parameter] och använda den från en annan komponent.
Studenten förstår skillnaden mellan OnInitialized, OnParametersSet och OnAfterRender.
Studenten kan använda ChildContent och RenderFragment.

Agenda (150 min)

0:00

Check-in: hur gick L1 + soloprojektet?

0:10

Teori: Razor-syntax på 10 min. @-uttryck, @if, @foreach, @code.

0:25

Teori: Komponentanatomi. [Parameter], namngivning, naming-konventioner.

0:45

Teori: Lifecycle. Whiteboard sekvensen Init → ParametersSet → Render → AfterRender.

1:05

Paus 15 min

1:20

Workshop: Bryt ned Home.razor i en Card-komponent med ChildContent.

2:20

Avrundning + hemuppgift.

2:30

Slut

Talartips per sektion

Razor-syntax: de flesta överlever om du säger "C# på direkten — använd @ för att hoppa ut ur HTML och in i kod". Gå inte vilse i edge cases (eskapering, @@).

Lifecycle: rita en tidslinje. Markera vilka som körs en gång (Init) och vilka som körs varje gång parametrar ändras (ParametersSet). Det är förvirringsmoment nr 1.

Code-behind: visa båda varianterna (@code blok vs partial class). Säg att du själv föredrar X, men att båda är legitima.

Workshop — guide för läraren

Bygg en Card.razor med två parametrar (Title, Icon) och ChildContent:

<div class="card">
  <h3>@Icon @Title</h3>
  <div>@ChildContent</div>
</div>

@code {
  [Parameter] public string Title { get; set; } = "";
  [Parameter] public string Icon { get; set; } = "";
  [Parameter] public RenderFragment? ChildContent { get; set; }
}

Använd den i Home.razor flera gånger med olika innehåll.
Lägg till en OnParametersSet som loggar till Console — visa när den körs.
Flytta koden till en partial class och visa code-behind-mönstret.

För snabba

Lägg till en HeaderTemplate och FooterTemplate som RenderFragment.
Bygg en Modal-komponent med ChildContent.

För dem som behöver stöd

Förbered tomma Card.razor-skelett som de fyller i.
Fokusera på att se komponentens återanvändning innan ni introducerar ChildContent.

Vanliga frågor

Varför är min parameter alltid null?

Glömt [Parameter]-attributet, eller skiver fel namn. Eller mappat värdet som ett HTML-attribut istället för C#-attribut (saknat @).

När ska jag använda OnInitialized vs OnParametersSet?

Init: data som inte beror på parametrar (t.ex. starta en timer). ParametersSet: omladda data när en parameter ändras (t.ex. ny ProductId).

Måste jag använda code-behind?

Nej. Många team använder @code-blocket även för stora komponenter. Code-behind är ett stilval, inte ett krav.

Hemuppgift att kommunicera Övningar 1–4. Soloprojekt 1: bygg en återanvändbar StatCard som används på 3 olika platser i kursportföljen.

Förberedelse till nästa lektion Be studenterna ha ett enkelt formulär (input + knapp) skissat i sin app. Det blir utgångspunkt för data binding-workshopen.

← L1 L3 — Data binding →