Webbserverprogrammering 1 · område 3 · lektion 16–17

Komponenter och parametrar

Tolv övningar om [Parameter], typade parametrar, komponenter i lager och markup som skickas in utifrån. Numreringen fortsätter från område 2, som slutade på 28.

Missade du passet?

Lektion 16 var genomgången och lektion 17 eget arbete. Så här tar du igen det, räkna med drygt tre timmar:

Välj din domän om du inte gjort det. Kriterierna står här – det tar femton minuter och allt annat hänger på det.
Läs guidens steg 3 till 7 och skriv av koden. Det är genomgången från lektion 16, i sin helhet.
Se till att du har en modellklass med Id och en hårdkodad lista med minst sex poster. Utan den går övningarna 33–36 inte att göra.
Lös övning 29 till 40 nedan, i ordning. De är sorterade efter svårighet.
Fastnar du på 36: läs steg 5 igen. Det är samma idé – en komponent som använder en annan.

Facit delas ut efter övningspasset, inte före. Kör din kod och kontrollera mot Klart när i stället – det är samma sak, fast du gör kontrollen själv.

Så lägger du upp dem

Varje övning blir en egen fil. Komponenterna i Components/Ovningar/, sidorna i Components/Pages/Ovningar/.

Gör en sida som visar komponentövningarna, till exempel /ovningar/omrade-3, och använd dem där:

@page "/ovningar/omrade-3"

<h1>Övningar, område 3</h1>

<h2>29</h2>
<Ovning29 />

<h2>30</h2>
<Ovning30 Text="Utlånad" />

Ingen prefixning behövs längre

I område 2 låg allt i @code-block på fyra sidor, och du fick prefixa varje variabel med övningsnumret för att slippa CS0102. Här behövs inget prefix: varje komponent är sin egen klass. Det är inte administration – det är en av de saker komponenter köper, och den märks direkt.

Bygg och öppna sidan

Nästan alla fel i det här området är körfel. En glömd [Parameter] ger noll fel i terminalen och 500 när du öppnar sidan. dotnet build bevisar ingenting här.

29. Komponenten utan parametrar

Lätt · tränar: skillnaden mellan en sida och en komponent

Gör en komponent Ovning29.razor som visar texten Filmarkivet – ett skolprojekt i en <p>. Använd den två gånger på din övningssida.

Klart när: texten syns två gånger, och det bara finns ett ställe att ändra den på.

30. Den första parametern

Lätt · tränar: [Parameter] med en string

Gör Ovning30.razor som visar en text du skickar in, inuti en <span> med klassen etikett.

<Ovning30 Text="Tillgänglig" />
<Ovning30 Text="Utlånad" />

Klart när: samma fil ger två olika texter på sidan.

31. En parameter som inte är text

Lätt · tränar: typad parameter och uträkning i komponenten

Gör Ovning31.razor som tar emot ett pris i ören som int och visar det i kronor med två decimaler. 12950 ska bli 129,50 kr.

<Ovning31 Ore="12950" />

Klart när: sidan visar 129,50 kr. Prova också 500 – det ska bli 5,00 kr, inte 5 kr.

32. Ett ja eller nej

Lätt · tränar: bool som parameter, villkor i markupen

Gör Ovning32.razor som tar en bool Klar och visar ✔ Klar eller ✘ Kvar. Sätt olika CSS-klass i de två fallen.

Klart när: <Ovning32 Klar="true" /> och <Ovning32 Klar="false" /> ger olika text och olika färg.

33. Ett helt objekt som parameter

Medel · tränar: att skicka in ett objekt i stället för lösa fält

Given kod, lägg i Models/Person.cs:

namespace DittProjekt.Models;

public class Person
{
    public string Namn { get; set; } = "";
    public int Alder { get; set; }
    public string Ort { get; set; } = "";
}

Gör Ovning33.razor som tar emot en Person och visar alla tre fälten. Skapa två personer på övningssidan och visa båda.

Klart när: två olika personer visas av samma komponent, och komponenten har en parameter – inte tre.

34. En lista som parameter

Medel · tränar: List<T> som parameter, det tomma fallet

Gör Ovning34.razor som tar emot en List<string> och visar den som en <ul>. Är listan tom ska komponenten i stället skriva Listan är tom – ingen tom <ul>.

Klart när: en lista med tre namn ger tre punkter, och en tom lista ger texten. Prova båda.

35. Parametern man kan strunta i

Medel · tränar: förvalt värde

Bygg vidare på övning 34. Lägg till en parameter Rubrik med förvalet "Lista", och visa den i en <h3> ovanför punkterna.

Klart när: <Ovning34 Namn="namnen" /> visar rubriken Lista, och <Ovning34 Namn="namnen" Rubrik="Skådespelare" /> visar Skådespelare. Båda fungerar utan att komponenten ändras däremellan.

36. Komponent inuti komponent

Svår · tränar: att bygga i lager

Gör två komponenter.

Ovning36Stapel.razor tar int Varde och int Max och ritar en stapel: Varde fyllda tecken och resten tomma, upp till Max.

Ovning36.razor tar en List<int> med betyg och visar en stapel per betyg, med Max satt till 5.

Klart när: <Ovning36 Betyg="new List<int> { 5, 3, 4 }" /> ger tre staplar av olika längd, och Ovning36 innehåller ingen kod som ritar tecken.

37. `ChildContent`

Lätt · tränar: RenderFragment

Gör Ovning37.razor som ramar in vad som helst i en <div class="varning">.

<Ovning37>
    <p>Filmen är utlånad till och med fredag.</p>
</Ovning37>

Klart när: stycket syns inuti ramen. Byt ut stycket mot en <ul> med två punkter och kontrollera att det också fungerar.

38. Rubrik och innehåll

Medel · tränar: en vanlig parameter och en RenderFragment i samma komponent

Gör Ovning38.razor med en string Etikett och en ChildContent. Etiketten visas i en <h3>, innehållet under.

Klart när: samma komponent används två gånger på sidan med olika etikett och helt olika innehåll.

39. Två hål i samma komponent

Medel · tränar: namngiven RenderFragment

Gör Ovning39.razor med två RenderFragment-parametrar: Huvud och ChildContent. Huvudet renderas i en <header>, innehållet i en <div>.

Så här ska den användas:

<Ovning39>
    <Huvud><strong>Sju samurajer</strong> (1954)</Huvud>
    <ChildContent><p>Kurosawas mest kopierade film.</p></ChildContent>
</Ovning39>

Lägg märke till att <ChildContent> står utskriven. Så fort en namngiven RenderFragment används måste alla skrivas ut – lös markup bredvid <Huvud> ger kompileringsfelet RZ9996. Prova gärna, felmeddelandet är ovanligt tydligt.

Klart när: både huvudet och innehållet syns, på rätt plats.

40. Hålet som får vara tomt

Svår · tränar: frivillig RenderFragment och is not null

Bygg vidare på övning 39. Gör så att <header>-taggen inte skapas alls när Huvud utelämnas.

Kontrollera i webbläsarens elementinspektör, inte bara på skärmen.

Klart när: <Ovning39><p>Text</p></Ovning39> ger HTML utan <header>, och inget felmeddelande.

Avprickning

Kryssen sparas i din webbläsare. De är inte inlämningen – de är till för att du ska veta hur många du har kvar när du sitter hemma i november.

Övningarna är träning, inte inlämning. Det som bedöms är din egen applikation – men den som gjort de här tolv har redan skrivit fyra komponenter med parametrar och en RenderFragment, och därmed halva E-kravet.