Webbserverprogrammering 1 · område 3 · v.41–46

Komponenter, routing och layout

Applikationen slutar vara sidor och blir byggstenar. Ett kort är en fil, en lista är en fil, och samma kort står på två sidor utan att skrivas två gånger. Adressen börjar bära data: /filmer/2 visar film nummer två. Här väljer du också vad ditt projekt ska handla om – resten av läsåret.

13 okt Din domän ska vara vald En mening på lektion 16. Kriterierna finns på egen sida.
9 nov Inlämning 3 – Komponentbibliotek, kl 23:59 Repots adress lämnas i itslearning.
10 nov Prov 2 – komponenter, routing och layout 80 minuter, utan dator. Papper och penna.

Guide · hela området Filmarkivet, steg för steg

Sexton steg med all kod, från kortet som bryts ut till livscykeln. Följ den här om du missat ett pass.

Lektion 15–16 · innan du bygger Välj din domän

Valet du bär till och med område 8. Sju krav att stämma av mot, och åtta förslag som klarar alla.

Inlämning 3 Komponentbibliotek

Krav för E, C och A, med kryssrutor som sparas i din webbläsare.

Övning 29–40 · lektion 16–17 Komponenter och parametrar

[Parameter], typade parametrar, komponenter i lager och RenderFragment.

Övning 41–46 · lektion 18 Routing

@page med parameter, :int, frågesträngen och en 404 som är en riktig 404.

Övning 47–50 · lektion 19 Layout och livscykel

NavLink, @Body, och när OnInitialized och OnParametersSet faktiskt körs.

Lektion 21 · parövning Sex komponenter som går sönder

Alla sex kompilerar utan varning. Alla sex ger 500. Gissa orsaken innan du läser rättningen.

Lektion 21–22 Vad provet prövar

De fyra frågetyperna, vad som inte kommer, och fjorton repetitionsfrågor att svara på innan du vänder på svaret.

1. Åtta lektioner

Tisdagarna bär det nya, onsdagarna befäster. Kolumnen längst till höger säger vad du gör om du var borta.

#	Datum	Längd	Vad vi gör	Missade du passet?
15	ons 7 okt	45 min	Komponenten som byggsten. Skillnaden mellan en sida och en komponent, och kortet som bryts ut ur sidan.	Guiden steg 1–2, och välj din domän
16	tis 13 okt	85 min	Parametrar och dataflöde. `[Parameter]`, typade parametrar, data nedåt, `ChildContent`. Områdets tyngsta pass.	Guiden steg 3–7, sedan övning 29–40
17	ons 14 okt	45 min	Övningspass. Eget arbete med handledning, inget nytt.	Övning 29–40
18	tis 20 okt	85 min	Routing. `@page` med parameter, `:int`, `NavigationManager`, frågesträngen, 404.	Guiden steg 9–11, sedan övning 41–46
19	ons 21 okt	45 min	Layout, delade komponenter och livscykel. `@Body`, `_Imports.razor`, `OnParametersSet`. Höstlov efter det här passet.	Guiden steg 13–15 och övning 47–50
20	tis 3 nov	85 min	Arbetspass. Eget projekt med handledning.	Kravlistan och checklistan
21	ons 4 nov	45 min	Sista finputs. Kamratgranskning mot uppgiftens checklista, och sex komponenter som går sönder.	De sex komponenterna och vad provet prövar
22	tis 10 nov	85 min	Prov 2. Skriftligt, 80 minuter, utan dator.	Går inte att ta igen på egen hand – anmäl frånvaron och gör uppsamlingsprovet

2. Det här ska sitta

Du kan säga vad som skiljer en sida från en komponent, och svaret är en rad.
Du kan skriva en komponent som tar emot det den ska visa som en parameter, och säga varför parametern måste vara public.
Du kan förklara vad data flödar nedåt betyder, och vad som hade gått fel om det gick åt andra hållet.
Du kan skicka in markup i en komponent, inte bara ett värde.
Du kan koppla en listsida till en detaljsida med en ruttparameter.
Du kan säga vad :int gör, och vad som händer utan det.
Du kan få en sida att svara 404 – och kontrollera det i nätverksfliken i stället för att lita på texten på skärmen.
Du kan säga när OnInitialized och OnParametersSet körs vid statisk serverrendering, och varför OnAfterRender aldrig körs.

3. Felen kommer när sidan öppnas

Det här är den enskilt viktigaste skillnaden mot område 2, och det är värt att läsa två gånger.

Kompilatorn slutar hjälpa dig

En komponenttagg är inte ett metodanrop. <FilmKort Film="film" /> är en beskrivning som slås upp på namn, när sidan renderas. Därför kan du glömma [Parameter], stava en parameter fel eller döpa din RenderFragment till något annat än ChildContent – och få 0 Warning(s), 0 Error(s) ändå.

Felet kommer i stället som 500 när någon öppnar sidan, och meddelandet står i terminalen där dotnet run körs.

Två vanor som gör hela skillnaden i det här området:

Öppna sidan efter varje ändring. Inte bara dotnet build.
Läs felmeddelandet i terminalen. Det säger nästan alltid exakt vad som är fel, med namnet på egenskapen i klartext. Sök i tabellen längre ned på en bit av det du ser.

Det finns ett undantag: RZ9996 är områdets enda fel som kommer redan vid bygget. Blandar du en namngiven RenderFragment med lös markup vägrar Razor bygga, och meddelandet räknar upp vilka namn komponenten accepterar.

4. Kom igång

Du börjar inte om. Det här området bygger vidare på projektet från område 2 – så kommer det att vara resten av kursen.

Steg	Det du gör
1	Öppna ditt projekt från område 2 och kontrollera att det startar med `dotnet run`.
2	Välj din domän. Kriterierna står på egen sida, och valet ska vara gjort till lektion 16.
3	Skriv om din modellklass till den nya domänen. Den behöver ett `Id` och ett längre beskrivningsfält.
4	Flytta listan ut ur sidan, till en egen fil i `Models/`. Minst sex poster.
5	Skapa mapparna `Components/Delade/` och en mapp för dina domänkomponenter.
6	Skriv domänvalet som en rad i projektets `README.md` – det är ett krav i inlämningen.

Committa efter varje pass. Höstlovet ligger mitt i området, och den som committar allt sista kvällen har en historik som inte visar något arbete.

5. Felsökning

Sök på felmeddelandet du fick, eller på ett ord ur det. Nästan alla rader nedan är körfel: projektet byggde, sidan svarade 500.

Sök bland felen

16 rader

Symptom	Trolig orsak	Åtgärd
`has a property matching the name 'X', but it does not have [Parameter]`	Egenskapen finns, men attributet saknas	Sätt `[Parameter]` på raden ovanför. Kontrollera också att den är `public`.
`does not have a property matching the name 'X'`	Du sätter en parameter som komponenten inte har	Stavfel, eller så glömdes parametern. Jämför taggen med `@code`-blocket.
`does not have a property matching the name 'ChildContent'`	Det står markup mellan taggarna, men komponenten har ingen `ChildContent`	Namnet måste vara exakt `ChildContent`. `Innehall` fungerar inte.
`does not have a property matching the name 'id'`	Ruttens namn och egenskapens namn skiljer sig	`{id:int}` kräver en egenskap som heter `Id`. Stavningen måste stämma.
`Unable to cast object of type 'System.String' to type 'System.Int32'`	Rutten saknar `:int`	Skriv `{id:int}`, inte `{id}`. Allt i en adress är text tills du säger annat.
`AmbiguousMatchException: The request matched multiple endpoints`	Två komponenter har samma `@page`	Sök i projektet efter adressen. Oftast en gammal sida som skulle tagits bort.
`RZ9996: Unrecognized child content inside component 'X'`	Namngiven `RenderFragment` blandad med lös markup	Skriv ut `<ChildContent>` också. Används en namngiven måste alla skrivas ut.
`RZ9988: The @page directive must specify a route template`	Rutten saknar inledande snedstreck	`@page "/ovningar/41"`, inte `@page "ovningar/41"`.
`CS0103: The name 'Body' does not exist in the current context`	Layouten saknar `@inherits`	Lägg `@inherits LayoutComponentBase` överst i layoutfilen.
`Found markup element with unexpected name 'Ruta'` (varning)	Komponenten hittades inte – taggen behandlas som HTML	`@using` saknas, eller filnamnet är felstavat. Sidan renderar tomt utan att krascha.
`CS1526: A new expression requires an argument list`	`@new` skrivet direkt i markupen	Flytta uttrycket till en metod i `@code` och anropa den.
Sidan svarar 500 men bygget gav noll fel	Nästan alla fel i det här området är körfel	Läs terminalen där `dotnet run` körs, och öppna sidan efter varje ändring.
`/filmer/99` ger tom sida med status 200	`NotFound()` saknas	`@inject NavigationManager`, anropa `NotFound()` och glöm inte `return` efter.
`NullReferenceException` efter `NotFound()`	`return` saknas – metoden fortsatte med null	Lägg `return;` direkt efter anropet.
`Sida 0` när talet saknas i adressen	Ett `int` sätts till 0. Startvärdet skrivs över	Använd `int?` och `?? 1`. Parametrar som saknas nollställs, de behåller inte startvärden.
Knappen gör ingenting när man klickar	`@onclick` vid statisk serverrendering	Använd `<form method="get">`. Klick finns inte här, och felet lämnar inga spår.

6. Orden

Orden nedan används från och med nu utan förklaring. Träna tills du kan dem – en av provets fyra frågetyper är förklara.

Ordträning

Ord	Betyder
komponent	En `.razor`-fil med markup och `@code`. Går att använda inuti andra komponenter.
sida	En komponent som har `@page` och därför en egen adress.
parameter	Ett värde som skickas in i en komponent utifrån.
[Parameter]	Attributet som gör en egenskap mottaglig utifrån. Utan det når värdet inte fram.
[EditorRequired]	Gör att editorn varnar om parametern glöms. En varning, inte ett krav – koden bygger ändå.
förvalt värde	Ett startvärde på en parameter, som gör den frivillig att sätta.
dataflöde	Att data går nedåt: sidan bestämmer, komponenten visar. Komponenten kan inte svara tillbaka.
RenderFragment	Markup som skickas in i en komponent, inte bara ett värde.
ChildContent	Namnet på den `RenderFragment` som fylls med det som står mellan taggarna. Namnet är inte fritt valt.
rutt	Mönstret i `@page` som avgör vilken adress som leder till komponenten.
ruttparameter	En del av adressen som blir en parameter: `{id:int}`.
ruttbegränsning	`:int` i `{id:int}`. Adressen matchar bara om delen är ett heltal.
statuskod	Serverns svar i siffror. 200 betyder att allt gick bra, 404 att sidan inte finns.
NavigationManager	Tjänsten som kan adresser: läsa dem, byta dem och säga att något inte finns.
layout	Ramen runt sidan. En komponent med ett hål som routern fyller.
@Body	Hålet i layouten. Här renderas den sida rutten pekade ut.
_Imports.razor	Filen med `@using` som gäller mappen och alla undermappar. Bara för `.razor`.
livscykel	De metoder Blazor kallar på i tur och ordning när en komponent byggs.
OnInitialized	Körs en gång när objektet skapats. För sådant som inte beror på parametrarna.
OnParametersSet	Körs varje gång parametrarna sätts. För sådant som beror på dem.
körfel	Ett fel som uppstår när sidan renderas, inte när projektet byggs. Områdets vanligaste sort.
dependency injection	Att be ramverket om en tjänst i stället för att skapa den själv. `@inject`. Område 4 handlar om det.