Inledning

Blazor är ett kraftfullt och flexibelt ramverk inom .NET som gör det möjligt för utvecklare att bygga webbapplikationer med C# istället för att använda JavaScript-ramverk som Angular eller React. Med Blazor kan du skapa både klientbaserade och serverbaserade applikationer med en och samma kodbas, vilket gör det till ett attraktivt alternativ för många utvecklare. I denna artikel kommer vi att fokusera på hur du kommer igång med Blazor i .NET 8, med Visual Studio som din primära utvecklingsmiljö, och utforska skillnaderna i templates mellan olika versioner av .NET.

Läs gärna vår inledande artikel om Blazor. Den är skriven i C# .NET 6.

Förberedelser

Innan du börjar utveckla med Blazor i .NET 8 behöver du ha Visual Studio installerat på din dator, tillsammans med .NET SDK. Här är vad du behöver göra:

1. Ladda ner och installera Visual Studio 2022 (eller senare) från Visual Studio’s officiella hemsida. Under installationen, välj ”ASP.NET och webbutveckling” arbetsbelastningen.
2. (Installera .NET 8 SDK om det inte redan är installerat. Detta kan göras via Visual Studio Installer eller genom att ladda ner det direkt från dotnet.microsoft.com. )

Steg #2 behöver du endast göra om du inte vill använda Visual Studio utan istället föredrar t.ex. Visual Studio Code.

Skapa ditt första Blazor-projekt

När du har allt installerat är det dags att skapa ditt första Blazor-projekt.

1. Starta Visual Studio och välj ”Skapa ett nytt projekt”.
2. Sök efter ”Blazor” i sökrutan, där du kommer att se flera olika projektmallar. I .NET 8 finns två huvudsakliga Blazor-mallar:
   • Blazor WebAssembly App: Skapar en klientbaserad Blazor-app där all logik körs i webbläsaren.
   • Blazor Server App: Skapar en serverbaserad Blazor-app där logiken körs på servern och endast UI-uppdateringar skickas till klienten.
3. Välj Blazor Server App. I våra exempel kommer vi utgå från Blazor Server App då det är ett bra val för att undvika komplexiteten med klientsidig kodkörning i början.
4. Namnge ditt projekt och välj rätt plats att spara det på. Klicka sedan på ”Skapa”.
5. I nästa steg får du välja .NET-version. Välj ”.NET 8.0 (LTS)” från listan. Detta säkerställer att ditt projekt använder den senaste versionen av .NET med långsiktigt stöd.
6. När ditt projekt är skapat, kan du börja utforska strukturen. Du kommer att märka att Blazor-projekt är uppdelade i flera delar, där huvuddelen av din kod kommer att finnas i Pages-mappen.

Kommentarer

1. Framework. Välj vanligtvis den senaste .NET versionen. LTS = ”Long Term Service”, vilket betyder att patchar och underhåll för denna .NET version sträcker sig längre fram i tiden än dem utan LTS.
2. Authentication Type. Här kan man välja om din applikation behöver autentisering, d.v.s. någon slags inloggning. Det finns flera alternativ men kräver djupare kunskap för att kunna utnyttja fullt ut. Vi väljer därför ”none” just nu.
   Det finns färdiga klasser o lösningar för att hantera användare (login/registrering etc) själv eller via externa leverantörer.
3. Interactive render mode. Här låter vi ”server” vara kvar. Det finns annars numera möjlighet att låta vissa delar av applikationen vara Webassembly, dvs. skötas helt hos klienten, eller i Server-fallet att vi hanterar mycket på server-sidan.
4. Interactivity location. Detta är en ny inställning i .NET 8 som kan orsaka lite bekymmer. Standard är ”Per page/component” och kräver då en inställning på varje sida/komponent om man vill att allt ska fungera som tidigare. Alternativet är ”Global”. Vi kan låta inställningen vara för att förstå den bättre längre fram.
5. Include sample pages. Kan vi ha kvar. Vi får då det vanliga exemplet med en ”Counter”.

Skillnader i Templates mellan .NET-versioner

Det är också viktigt att förstå hur mallarna har utvecklats över tid:

• .NET 6: Introducerade Blazor Hybrid, vilket gör det möjligt att skapa Blazor-applikationer som körs på desktop med hjälp av .NET MAUI. Startup.cs fanns fortfarande kvar men började ersättas med direkt konfiguration i Program.cs.
• .NET 7: Borttagningen av Startup.cs slutfördes, och ytterligare förbättringar för prestanda introducerades, som t.ex. streaming-rendering. Blazor-mallarna uppdaterades för att reflektera den nya strukturen med endast Program.cs.
• .NET 8: Förutom borttagningen av Startup.cs har även interaktivitetsinställningen introducerats för att ge utvecklare mer kontroll över hur applikationens användarinteraktioner hanteras. Mallarna är mer modulära och kan enklare anpassas till olika behov.