Webbserverprogrammering 1 · område 1 · lektion 3

Blazor Web App och renderingslägen

Sidan som svarar på vad -int None gjorde med ditt projekt. Här står vad en Razor-komponent består av, varför ingen C# hamnar i webbläsaren, och hur du avgör var en enskild rad körs.

Missade du lektionen?

Passet var en genomgång utan eget kodande, så du kan ta igen det här på sidan. Räkna med 45 minuter:

Läs avsnitt 1 till 3. Ha ditt eget projekt öppet och leta upp Components/Pages/Home.razor medan du läser avsnitt 1.
Gör de två Prova själv-rutorna på riktigt. Sidkällan i avsnitt 2 är passets kärna — den ska du ha sett med egna ögon, inte bara läst om.
Gör övningen i avsnitt 4 innan du tittar på svaren. Det var den klassen gjorde i par.

Sedan är du ikapp. Nästa pass bygger vidare härifrån utan att repetera det.

1. Komponenten

En Razor-komponent är en fil med ändelsen .razor. Den innehåller HTML och C# i samma fil, och tecknet @ är växeln mellan dem. Så här ser början av Components/Pages/Home.razor ut:

@page "/"

<h1>Vad händer när du trycker enter?</h1>

<p class="bevis">
    Sidan skapades <strong>@byggdes.ToString("HH:mm:ss")</strong>
</p>

@code {
    private DateTime byggdes = DateTime.Now;
}

Filen har tre delar, och de återkommer i varje komponent du skriver:

Del	Vad den gör
`@page "/"`	Gör filen till en sida och bestämmer på vilken adress den nås. Utan den raden är filen en byggsten som andra sidor kan använda, men den går inte att nå direkt. Sådana byggstenar gör vi i område 3.
Markupen	Vanlig HTML. Ett `@` mitt i byter över till C#, och det som C#-koden räknar ut hamnar på den platsen i sidan.
`@code { }`	C#-koden som hör till just den här sidan. Fält, variabler och metoder.

Prova själv

Öppna Components/Pages/Home.razor i ditt eget projekt och leta upp de tre delarna. Har din fil ingen @code-del än? Då finns det heller ingenting på sidan som ändras när du laddar om.

2. Vad webbläsaren får

Det här är passets viktigaste punkt: ingen av raderna du skriver i C# kommer fram till webbläsaren. Servern kör koden först och skickar bara resultatet.

Högerklicka på sidan och välj Visa sidkälla. Där finns inget @page, inget @code och ingen DateTime — bara ett klockslag:

<h1>Vad händer när du trycker enter?</h1>

<p class="bevis">
    Sidan skapades <strong>15:52:49</strong>
</p>

Sidkällan är inte samma sak som det du ser i utvecklarverktygens Elements-flik. Elements visar sidan som webbläsaren har den nu; sidkällan visar exakt vad som kom över nätverket. Det är sidkällan du ska titta i när du vill veta vad servern faktiskt skickade.

Till inlämningen

Ska-krav 7 kräver att minst en sida skapar innehåll på servern vid varje förfrågan. Sidkällan är ditt bevis: ladda om, visa sidkällan igen och kontrollera att värdet ändrats. För bör-krav 1 räcker det inte att visa beviset — du ska också skriva vad som hade varit annorlunda om texten legat i en statisk fil.

3. De två renderingslägena

Ett renderingsläge avgör var och när HTML byggs, och om servern håller kontakten efteråt. Blazor har flera lägen. Kursen använder ett av dem.

	Statisk serverrendering	Interaktiv server
Använder vi?	Ja, hela kursen	Nej
Vem bygger HTML?	Servern	Servern
Efter svaret	Servern är klar och glömmer dig	En förbindelse hålls öppen
Vid ett knapptryck	Webbläsaren måste fråga igen — sidan laddas om	Händelsen skickas dit, bara det som ändrades kommer tillbaka
Var körs din kod?	På servern, alltid	Beror på läget — det går inte att svara utan att kolla

Du valde läget redan på lektion 1, i kommandot som skapade projektet:

dotnet new blazor -o MittProjekt -int None

Växeln -int None betyder ingen interaktivitet. Den stängde av det högra alternativet i tabellen. Skälet är inte att det ena är bättre än det andra, utan att du med statisk rendering alltid kan svara på frågan var körs den här raden? — och det är den frågan hela kursen står på.

Ordet du kommer att googla

Direktivet som väljer renderingsläge heter @rendermode. Söker du på Blazor på egen hand kommer du att se det, ofta som @rendermode InteractiveServer. I den här kursen skriver vi det aldrig — vi låter det vara, vilket ger statisk serverrendering. Läs gärna på; bygg med statisk rendering.

Till inlämningen

Ska-krav 1 säger att projektet ska vara skapat med -int None. Har du redan skapat det utan växeln är det enklaste att skapa projektet på nytt och flytta över dina sidor.

4. Var körs raden?

Övningen klassen gjorde två och två. Svarskolumnerna är dolda — läs raden, svara server, webbläsare eller båda för dig själv, och klicka sedan på raden för att se om du hade rätt.

Alla svar följer samma regel: allt som är C# eller Razor körs på servern, och webbläsaren får resultatet. HTML och CSS är det enda webbläsaren själv arbetar med. Rad fyra är den som brukar dela klassen.

Sök bland raderna

10 rader

Rad	Var den körs	Varför
`<h1>Rubrik</h1>` i en `.razor`-fil	Servern bygger, webbläsaren visar	HTML:en sätts ihop på servern och skickas färdig.
`private DateTime nu = DateTime.Now;`	Servern	Ett fält i `@code`. Får sitt värde medan sidan byggs.
`@byggdes.ToString("HH:mm:ss")`	Servern	C# körs innan svaret skickas. Bara klockslaget följer med.
`@foreach (var d in delar)`	Servern	Loopen körs på servern. Webbläsaren ser bara de färdiga raderna, inte loopen.
`@page "/adressen"`	Servern	Direktivet blir en post i routingtabellen som servern slår i när en förfrågan kommer.
`border: 1px solid black;` i `app.css`	Webbläsaren	CSS skickas som en egen fil och tolkas av webbläsaren.
`app.MapRazorComponents<App>();` i `Program.cs`	Servern, en gång vid start	`Program.cs` körs när applikationen startar, inte vid varje förfrågan.
`builder.Services.AddRazorComponents();` i `Program.cs`	Servern, en gång vid start	Samma sak: uppstart. Vad raden gör reder vi ut i område 4.
`<a href="/svaret">Svaret</a>`	Båda	Länken byggs på servern. Klicket sker i webbläsaren och blir en ny förfrågan.
`<script src="...">` i `App.razor`	Båda	Taggen byggs på servern, skriptet körs i webbläsaren.

Prova själv

Bygg en sida som skriver ut fem rader ur en lista med @foreach. Titta sedan i sidkällan: loopen syns inte, bara de fem raderna. Det är samtidigt bör-krav 3 i uppgiften.

5. Orden

Orden från det här passet. De används i uppgiften utan förklaring.

Ordträning

Ord	Betyder
Razor-komponent	En fil med ändelsen `.razor` som innehåller HTML och C#.
direktiv	En rad som börjar med `@` och styr hur komponenten byggs.
@page	Direktivet som ger komponenten en adress och gör den till en sida.
@code	Blocket där komponentens egen C#-kod ligger.
markup	HTML-delen av en komponent.
rendering	Att bygga färdig HTML av en komponent.
renderingsläge	Inställningen som avgör var HTML byggs och om servern håller kontakten efteråt.
statisk serverrendering	Servern bygger HTML, skickar och är klar. Kursens läge.
interaktiv server	Servern håller en förbindelse öppen och uppdaterar delar av sidan. Används inte i kursen.
@rendermode	Direktivet som väljer renderingsläge. Vi skriver det aldrig.
-int None	Växeln i `dotnet new blazor` som stängde av de interaktiva lägena.
WebSocket	En förbindelse som står öppen mellan webbläsare och server i stället för att stängas efter svaret.
sidkälla	Den HTML webbläsaren faktiskt tog emot. Högerklick, Visa sidkälla.