Webbserverprogrammering 1 · område 3 · lektion 18
Routing
Sex övningar om adressen som data. Ruttparametrar,
begränsningen :int, frågesträngen och en 404 som är en riktig 404 –
inte bara en text som säger att något inte finns.
Lektion 18 var genomgången. Så här tar du igen den, räkna med drygt två timmar:
- Läs guidens steg 9 till 11 och skriv av koden. Det är genomgången i sin helhet.
- Din modellklass behöver ett
Idoch ett längre beskrivningsfält. Utan beskrivningsfältet blir din detaljsida en kopia av ditt kort, och då finns ingen anledning att klicka. - Bygg din egen detaljsida innan du gör övningarna. Den är ett krav i inlämningen, övningarna är det inte.
- Lös övning 41 till 46 nedan, i ordning.
Öppna webbläsarens nätverksflik (F12) innan du börjar. Tre av övningarna handlar om statuskoder, och de syns inte på skärmen.
Två sätt att få data ur adressen
De liknar varandra och används till helt olika saker. Ha tabellen framme medan du gör övningarna.
| Ruttparameter | Frågesträng | |
|---|---|---|
| Ser ut som | /filmer/3 | /filmer?sok=cykel |
| Deklareras med | {id:int} i @page och [Parameter] | [SupplyParameterFromQuery] |
| Måste finnas | Ja, annars matchar inte rutten | Nej |
| Används till | Vilken sak som visas | Hur den visas: sökning, filter, sortering |
Blazor sätter varje parameter vid varje rendering. Den som inte finns i
adressen sätts till typens tomma värde – 0 för
int, null för string och
int?. Skriver du
public int Sida { get; set; } = 1; visar sidan utan tal
Sida 0, inte Sida 1.
Behöver du skilja "saknas" från "noll": använd int? och
?? 1. Det gäller övning 44 och 45.
41. En egen adress
Lätt · tränar: @page
Gör Components/Pages/Ovningar/Ovning41.razor med adressen
/ovningar/41, som visar en rubrik och en länk tillbaka till
/ovningar/omrade-3.
Klart när: adressen fungerar när du skriver den, och länken tillbaka fungerar.
42. Ett ord ur adressen
Lätt · tränar: ruttparameter som text
Gör Ovning42.razor på /ovningar/42/{namn} som skriver
Hej, Anna! när adressen är /ovningar/42/Anna.
Klart när: tre olika namn i adressen ger tre olika hälsningar.
43. Ett tal ur adressen
Medel · tränar: ruttbegränsningen :int
Gör Ovning43.razor på /ovningar/43/{tal:int} som visar
talet, dess kvadrat och om det är jämnt eller udda.
Prova sedan /ovningar/43/abc.
Klart när: /ovningar/43/7 visar 7,
49 och udda, och /ovningar/43/abc ger sidan
"finns inte" – inte en krasch.
44. Två adresser, en sida
Medel · tränar: flera @page på samma komponent
Gör Ovning44.razor som svarar på både
/ovningar/44 och /ovningar/44/{sida:int}. Utan tal ska
den visa Sida 1, med tal Sida N.
Klart när: båda adresserna fungerar och visar rätt sidnummer. Läs notisen längst upp om du får Sida 0.
45. Ett värde efter frågetecknet
Medel · tränar: [SupplyParameterFromQuery]
Gör Ovning45.razor på /ovningar/45 som läser
?antal= ur adressen och skriver ut lika många punkter i en lista.
Saknas värdet ska den visa tre.
Lägg till ett <form method="get"> med ett
<input name="antal"> så att man kan ändra utan att skriva i
adressfältet.
Klart när: /ovningar/45?antal=6 ger sex punkter,
/ovningar/45 ger tre, och formuläret ändrar adressen när man skickar
det.
@onclick
Vid statisk serverrendering händer ingenting alls när man klickar på en knapp
med @onclick – ingen krasch, inget felmeddelande, ingen effekt. Ett
<form method="get"> är ren HTML och gör jobbet: webbläsaren
bygger adressen åt dig och servern får en ny förfrågan.
46. Rätt svar på fel fråga
Svår · tränar: NavigationManager.NotFound() och statuskoder
Gör Ovning46.razor på /ovningar/46/{tal:int} som bara
accepterar tal mellan 1 och 10. Utanför intervallet ska sidan svara 404,
inte visa ett felmeddelande med status 200.
Klart när: /ovningar/46/5 ger 200 och
/ovningar/46/50 ger 404, kontrollerat i nätverksfliken (F12).
En sida som skriver "finns inte" men svarar 200 OK ljuger för
allt som läser statuskoder i stället för text: sökmotorer, övervakning, andra
program. Det är därför kravet i uppgiften handlar om koden och inte om texten
– och därför du måste öppna nätverksfliken för att veta att du klarat det.
Avprickning
Kryssen sparas i din webbläsare.
Lösta övningar i det här temat
Övning 43, 45 och 46 är de tre som återkommer direkt i inlämningen: ruttbegränsningen, sökningen och 404:an. Gör du bara tre, gör de tre.