Webbserverprogrammering 1 · område 3 · lektion 19

Layout och livscykel

Fyra övningar om ramen runt sidan och om ordningen saker händer i. Den sista är områdets enda övning där rätt svar inte syns på skärmen – koden fungerar likadant oavsett, och ändå finns det ett svar som är rätt.

Missade du passet?

Lektion 19 var den sista genomgången i området, och höstlovet låg direkt efter. Så här tar du igen den, räkna med en och en halv timme:

Läs guidens steg 13 till 15 och skriv av koden.
Lägg Livscykel.razor ur referensprojektet i ditt eget projekt och gå till /livscykel. Ladda om fem gånger och titta på räknaren. Den sidan är hela momentet.
Lös övning 47 till 50.

Efter det här passet kommer ingenting nytt i området. Allt som återstår är att bygga färdigt till den 9 november.

Tre metoder, och nollan

Metod	När	Till för
`OnInitialized`	En gång, när objektet skapats	Sådant som inte beror på parametrarna
`OnParametersSet`	Varje gång parametrarna sätts	Sådant som beror på parametrarna
`OnAfterRender`	När sidan finns i webbläsaren	Kod som behöver en färdig sida att prata med

Vid statisk serverrendering körs de två första exakt en gång var, i den ordningen, per förfrågan. Den tredje körs inte alls: servern bygger HTML, skickar i väg den, och komponenten är borta. Det finns inget "efter renderingen" här.

Varför valet ändå spelar roll

Om båda körs en gång var kunde man tro att det är likgiltigt var koden ligger. Två skäl att ändå välja rätt:

Koden säger vad den beror på. Läser någon OnParametersSet vet hen att det som står där hänger på en parameter. Det är dokumentation som inte kan bli inaktuell.
Det är rätt när komponenten inte skapas om. Ett interaktivt renderingsläge kan ge en komponent nya parametrar utan att bygga den på nytt. Då körs OnParametersSet igen och OnInitialized inte. Kod på fel plats slutar då uppdateras.

Regeln: beror koden på en parameter går den i OnParametersSet, annars i OnInitialized.

47. Menyn som vet var man är

Lätt · tränar: NavLink och Match

Lägg till dina övningssidor i NavMenu.razor med NavLink. Kontrollera att exakt en post är markerad åt gången, också på /ovningar/43/7.

Klart när: startsidans länk inte är markerad när du står på en övningssida.

48. En egen ram

Medel · tränar: layout och @Body

Gör Components/Layout/OvningsLayout.razor som ärver LayoutComponentBase, visar rubriken Övning överst och @Body under. Sätt den på en av dina övningssidor med @layout OvningsLayout.

Klart när: den sidan har rubriken och de andra inte, utan att du ändrat i någon annan sida.

49. Ordningen på metoderna

Medel · tränar: OnInitialized och OnParametersSet

Gör Ovning49.razor på /ovningar/49/{tal:int} som samlar en rad text i en lista i vardera metoden och visar listan.

Gå mellan /ovningar/49/1 och /ovningar/49/2.

Klart när: du kan svara på hur många rader listan har, i vilken ordning de står, och varför det blir likadant varje gång.

50. Rätt metod för rätt sak

Svår · tränar: att välja livscykelmetod och kunna motivera valet

Given kod, med ett fel som inte syns:

@page "/ovningar/50/{id:int}"

<h1>@titel</h1>

@code {
    [Parameter]
    public int Id { get; set; }

    private string titel = "";
    private string startadKl = "";

    protected override void OnInitialized()
    {
        titel = $"Post nummer {Id}";
        startadKl = DateTime.Now.ToString("HH:mm:ss");
    }
}

Två saker sker i OnInitialized. Bara den ena hör hemma där.

Flytta det som ska flyttas och skriv en kommentar på en rad om varför. Visa också startadKl på sidan.

Klart när: koden ligger rätt och kommentaren säger vad valet beror på, inte vad metoden heter.

En kommentar som bara upprepar namnet är ingen motivering

"OnParametersSet körs när parametrarna sätts" är metodens namn omskrivet. Kommentaren ska svara på varför just den här raden hamnade här.

Avprickning

Kryssen sparas i din webbläsare.

Lösta övningar i det här temat

47. Menyn som vet var man är
48. En egen ram
49. Ordningen på metoderna
50. Rätt metod för rätt sak

Övning 50 är den enda i hela området som prövas som en förklara-fråga på provet. Kan du motivera var koden ska ligga kan du svara på den.