Blazor är ett nytt webbramverk som låter dig skapa fullt interaktiva webbappar med C#. Med hjälp av magin i en .NET -körning som har sammanställts för WebAssemble kan du till och med köra Blazor helt på klienten — du behöver inte använda JavaScript -ramverk för att skapa dina applikationer längre.
Innehållsförteckning
Vad är Blazor?
Hybridläge
Konfigurera Blazor
En rundtur i Blazormiljön
Fixa Microsofts hemska färgval
Servera dynamiskt innehåll
Hur fungerar styling?
Blazor Component Lifecycle
Hur fungerar Blazor med JavaScript? < br/> Navigera användaren runt
Blazor Libraries
Blazors framtid
Vad är Blazor?
Blazor är den senaste funktionen i ASP.NET Core, Microsofts 20 år gamla webbramverk. Trots att den är gammal behåller Microsoft den fortfarande, och ASP.NET har konsekvent förbättrats tillsammans med C# och .NET -körtiden som helhet.
Razor -sidor och ASP.NET: s gamla MVC -modell , båda låter dig generera datadrivna HTML-sidor med C#. Det har funnits för alltid, men det som det alltid saknade är interaktivitet. Det är ganska svårt att skapa en webbapp när du måste ladda om sidan för att se ändringar.
Så, Blazor löser det genom att direkt länka servern och klienten till ett bibliotek som kan modifiera DOM vid körning, och tar in många av komponentens livscykelmetoder och uppdateringshanterare som du förväntar dig av ett ramverk avsett att konkurrera med React.
Och med Razor -sidans minimalistiska syntax gör det kodning i Blazor till en lek:
Annonsering
Blazor har två huvudsakliga driftsätt, de coolaste varav Blazor Client , som paketerar .NET själv till ett ramverk som helt kan köras på WebAssemble. WASM är i grunden MSIL för webben; det är ett lätt binärt instruktionsformat som alla språk kan kompilera till, även “ desktop ” språk som C ++ och Rust.
Så hur är prestanda med detta? Tja, för närvarande använder den en tolk, eftersom inbyggd AOT -sammanställning för .NET fortfarande jobbar på. Men det kommer att förbättras så småningom; den största nackdelen med Blazor Client är längre nedladdningstider — DLL -filer kan vara stora filer enligt webbstandarder, och de måste alla laddas för att få programmet igång. Stora JS-ramar har dock också detta problem och är en stor anledning till att renderingen på serversidan är populär.
Det kompenserar för den nedladdningstiden genom att vara mycket snabb med att uppdatera sidor och navigera runt i appen, med tanke på att det inte behöver vänta på att servern ska göra det.
< /p>
Om du vill använda en mer traditionell värdmodell som liknar React's Server Side Rendering (SSR), är det alternativet också tillgängligt för dig. Den är mer effektiv och har fördelen av att köra kod på en pålitlig server.
För att uppnå detta, Blazor Server kan ansluta till klienten med en SignalR -anslutning, som bara är en snygg omslag över WebSockets som också kan falla tillbaka till HTTP om det behövs. Detta lägger mer stress på ASP.NET-servern än traditionellt webbhotell, eftersom den måste återreendera och skicka varje HTML-ändring till alla anslutna klienter. Om du har tusentals människor anslutna kan detta vara ett problem när du skalar upp.
< /p>
Medan Blazor för närvarande är ett webbramverk, gör Microsoft också Blazor Desktop, som fungerar mycket som Electron gör genom att paketera webbgränssnitt i skrivbordsprogram, liksom Blazor Native, som kommer att kunna återge inbyggda användargränssnitt på mobila operativsystem. Microsoft verkar tänka på det som deras nästa applikationsprogrammeringsmodell för att göra interaktiva frontends på vilken plattform som helst.
Hybrid Mode
Blazor can också användas i ett “ hybridläge ” med förprogrammering. Blazor WASM kan visa rå HTML medan ramverket laddas, vanligtvis används för en laddningsstång eller ett snurrhjul. Men om du är värd för appen från ASP.NET kan du återge Razor -sidorna från servern innan du ens skickar appen till klienten.
Annonsering
Detta fungerar perfekt, med den fångsten att sidan inte blir interaktiv förrän Blazor faktiskt laddas. Det brukar dock bara ta en sekund så det här är verkligen inget problem, förutom några besynnerligheter med att ladda om data två gånger.
Med den här inställningen får du det bästa av två världar — din app laddas snabbt, utan laddningsskärm, och det är blixtsnabbt att navigera runt. Den här funktionen arbetar fortfarande på och kommer med många finurligheter, men från .NET 6 förhandsgranskning 6 fungerar den och du kan läsa mer i Jon Hilton: s guider, del ett och två.
En av egendomarna är att WASM-appar som förlitar sig på ett API måste ha två implementeringar av varje tjänst, på klienten och servern, så att servern kan prata med sig själv för att hämta informationen när den görs på förhand. Detta resulterar i viss blinkning när WASM laddar in och gör sin egen datahämtning, men detta kan åtgärdas i .NET 6 — den här guiden visar hur du fortsätter komponentstatus så att din app sömlöst övergår från den falska “ laddningen sida ” till den verkliga applikationen.
Konfigurera Blazor
Lyckligtvis tillhandahåller Visual Studio generatorer och du behöver inte ställa in det här själv. Öppna Visual Studio och skapa ett nytt projekt. Sök efter “ Blazor ” och välj antingen Blazor WebAssemble eller Blazor Server.
Vi går med Blazor WebAssemble här, eftersom Blazor Server är enklare och bara inkluderar både klienten och servern i samma projekt.
Annonsering
Ge den ett namn och välj din ram. En sak att notera är att Blazor WebAssemble tekniskt sett inte ens behöver en server alls; du kan bara vara värd för den som en statisk webbplats på NGINX eller till och med en AWS S3 -hink. Men om du ansluter till ett API för att prata med en databas, kan du lika gärna göra det API: et tillsammans med klienten, eftersom du kan dela kod mellan dem och naturligtvis använda samma språk.
< p>
Din lösning kommer att konfigureras med tre projekt, en klientapplikation, en ASP.NET server -API och webbhotell för klienten och ett delat bibliotek mellan dem.
Om du klickar på start kommer du att se ASP.NET starta upp och visa webbsidan. Om du använder Blazor Server ansluter den till ASP.NET över SignalR för att hantera interaktioner.
Naturligtvis skickar Blazor WebAssemble endast förfrågningar till servern när det uttryckligen görs av applikationen .
En rundtur i Blazor-miljön
Låt oss ta en rundtur i applikationen. Från och med klienten är den viktigaste ingångspunkten Program.cs, som skapar WebAssembleHost, lägger till roten App.razor -komponenten, sedan bygger och kör appen.
Tekniskt sett är ingången wwwroot/index.html, som laddar Blazor ’ s JavaScript -fil, visar en laddningssida medan Blazor initierar och visar ett felmeddelande om den inte gör det.
Annonsering
App.razor hanterar routning av sidor med en routerkomponent. Detta tar i sammansättningen och laddar alla sidor som är markerade med attributet @page name. Du kan lära dig mer om routning på Razor -sidor här.
Routern laddar MainLayout.razor -komponenten, som utökar LayoutComponentBase. Det laddar NavMenu.razor -komponenten bredvid kroppen och visar din applikation.
Bra! När det gäller servern är det en standard ASP.NET -applikation. Det skapar en värdbyggare och lägger till tjänster som är konfigurerade i Startup.cs. I synnerhet konfigurerar den den för WASM -felsökning, serverar Blazor Framework -filer och konfigurerar egna Razor -sidor och kontroller för att visa JSON -innehåll.
Om detta bara var en Blazor Server -app skulle det inte behöva detta separata API och kunde bara hämta data från en intern tjänst. Men eftersom det inte är nödvändigt måste den exponera tjänsten över kabeln, i form av en ASP.NET ApiController som specificerar hanteringsmetoder för olika HTTP -åtgärder.
Modellerna för detta delas mellan klient och server i det delade projektet.
Åtgärda Microsofts fantastiska färgval
Innan vi sätter oss ner för att koda måste vi fixa något. Av någon anledning använder Microsofts standardfärgval för C#HTML -direktiv på rakbladssidor den som kanske är den sämsta färgkombination man kan tänka sig ljuslila text på en ljusbrun bakgrund.
Som tur är du kan ändra det från Verktyg & gt; Alternativ:
Annonsering
Under Miljö & gt; Teckensnitt och färger, välj “ Razor Directive ” och ändra bakgrundsfärgen till något mer rimligt. Du vill nog fortfarande att det ska sticka ut, så jag valde bara rent svart, vilket kommer att märkas men inte påträngande.
Du måste också ändra “ HTML Server-Side Script, ” (som tekniskt sett nu är ett föråldrat namn med tanke på Blazor WebAssemblings existens).
Och med den enkla lösningen kan du spara dina ögonbollar timmar med smärta.
Visar dynamiskt innehåll
Den sista filen du vill checka ut finns på klienten, FetchData.razor. Det är här klienten faktiskt förbrukar serversidan API, med följande datadrivna sida:
Det här är en ganska komplex rakbladssida, så det är ett bra exempel för oss att bryta ner här.
För att starta anger den en manuell åsidosättning för sidvägen med @page “/fetchdata”. Den importerar sedan de delade modellerna från det delade projektet och använder också beroendeinjektion för att ge den en HttpClient, som skapades i Program.cs.
Annonsering
Vi hoppar ner till botten för att förklara detta första &# 8212; @code -blocket innehåller den faktiska C# -koden för den här sidan. I den finns en privat variabel som heter prognoser. Detta är inledningsvis noll, men när sidan initieras gör det en webbförfrågan för att hämta data från API: et och deserialisera det.
När variabeln uppdateras upptäcker Blazor ändringen och gör om sidan igen. Själva sidan är allt däremellan, som börjar med en rubrik och beskrivning, men sedan innehåller en @if -sats. Detta är C# villkorad HTML och används i detta fall för att visa laddningstext medan Blazor gör begäran till API: et. När prognoserna är klara och återupprepade kommer inte prognoserna att vara ogiltiga och tabellen som kommer att göra @foreach-elementet i listan och göra en tabellrad.
Med detta kan du återge dynamiskt innehåll från dina modeller. För att stödja mer avancerade CRUD -operationer och mer dynamiska användargränssnitt måste du använda knappar och ingångar. Du kan använda & lt; button & gt; taggar med ett @onclick -attribut, som tar en metodreferens.
< p> Du kan använda EventCallbacks för att överföra händelsen till överordnade komponenter. Du kan också använda Lambda -uttryck för att hantera händelser inline, om metoden är kort:
& lt; button @onclick = ” @(e = & gt; heading =” Ny rubrik !!! “)” & gt; Uppdatera rubrik & lt;/button & gt;
Det finns flera ytterligare händelseargument som du kan skicka till dessa hanteringsfunktioner, inklusive musplats, tangentbordshändelser och pekhändelser.
Om du vill implementera en sökruta har Blazor bindningar för det. Men om du vill att den ska söka automatiskt när du trycker på enter, och inte på varje knapptryckning, måste du binda @onkeydown -händelsen till en funktion som tar ett KeyboardEventArgs -objekt och manuellt kontrollera om Enter har tryckts in.
Annons
Du kan dock inte få inmatningsvärdet från KeyboardEventArgs, så det resulterar i denna röriga inmatningsruta där du måste binda onkeydown och oninput, ställa in ett strängvärde och sedan använda den strängen i onkeydown.
& lt; input type = “text” @onkeydown = ” @Enter” @oninput = ” @(ui = & gt; {searchValue = (string) ui.Value;})” /& gt; @code {public void Enter (KeyboardEventArgs e) {if (e.Code == “Enter” || e.Code == “NumpadEnter”) {//do stuff}}}
Hur fungerar styling?
Extremt enkelt. Det finns en site.css -huvudfil, men för komponentnivåutformning skapar du bara en .razor.css -fil för varje rakbladssida:
index.razor index.razor.css
Blazor skapar automatiskt en omfattande CSS -fil som tillämpar inställningarna från varje rakbladssida på endast den rakbladssidan:
& lt; link href = “BlazorWebAssemblyTest.Client.styles.css” rel = “stylesheet” /& gt;/* /Pages/Counter.razor.rz.scp.css */h1 [b-3xxtam6d07] {färg: brun; }
Att få förprocessorer som SASS att fungera är lite mer komplicerat, men helt genomförbart.
Blazor Component Lifecycle
Like React, Blazor har också bindningar för livscykelkomponenter. Enligt detta diagram från Blazor University, en fantastisk resurs för att lära sig Blazor, kallar Blazor -körtiden dem i följande ordning:
SetParametersAsync och OnParametersSet anropas när komponentens överordnade renderas. OnInitializedAsync kallas också här om det är första gången. Händelsen kan sedan ringa StateHasChanged för varje användarinteraktion, som kontrollerar om den ska återges och utlöser den här uppdateringsprocessen igen.
Annonsering
Det finns för många detaljer att lista här, så du bör läsa guiden från Blazor University, som förklarar dem alla, samt konstiga interaktioner med asynk/vänta -metoder. För att göra så mycket innehåll så snabbt som möjligt kan Blazor köra StateHasChanged och återge två gånger, en gång precis när objektet för uppgiftsväntare returneras och en gång när det är klart.
Hur fungerar Blazor med JavaScript?
Oavsett om du använder Blazor Server eller Blazor Desktop har du fullständig JavaScript -kompatibilitet, till exempel att ringa JS -funktioner från hanterad kod:
private async Task ConvertArray () {text = new (inväntar JS.InvokeAsync & lt; string & gt; (“convertArray”, quoteArray)); }
Och ringer .NET från JS:
DotNet.invokeMethodAsync ('{MONTERINGSNAMN}', '{.NET METHOD ID}', {ARGUMENTS});
Du kan faktiskt använda alla NPM-paket med Blazor, även om du föredrar ett NuGet-paket för det mesta om det är ett alternativ.
Navigera runt användaren
Ett av de viktigaste problemen med webbappar, särskilt webbsidor på en sida (SPWA), är routing. Varje Razor -sida har en standardrutt enligt sitt namn, men du kan åsidosätta detta och du kan också lägga till flera sidrutter till varje Razor -sida. Routern matchar var och en för sig och serverar fortfarande samma fil.
Men om du vill visa olika innehåll beroende på vilken webbadress du använder, blir det lite komplicerat. Den enklaste lösningen skulle bara vara att definiera en @page -rutt för varje sträng du vill lägga till. Detta fungerar första gången, men på grund av hur Blazor hanterar uppdateringar kommer den inte att uppdatera sidan när du navigerar till en ny webbadress eftersom parametrarna inte har ändrats. Du kan fortfarande använda detta för att definiera flera stavningar på samma sida, så länge dessa sidor inte länkar till varandra.
Lösningen på SPWA -problemet är att använda parameterbaserade rutter när du än vill fånga flera alternativ och länka mellan dem. Parametrar kan definieras inom parentes:
Annonsering
Denna speciella inställning är för rotsidan. Om du är orolig för att det kommer att matcha andra sidor som /fel eftersom det är konfigurerat för att matcha någonting efter root, oroa dig inte, Blazor matchar andra sidor som är strikt definierade innan du går tillbaka till att använda parameterbaserade rutter. Du kan dock inte ha flera parametervägar på samma rotväg utan att få ett tvetydigt ruttfel.
I mitt fall ville jag navigera användaren till en ny sida med ett argument. Du kan göra detta genom att öppna NavigationManager och ringa NavigateTo:
NavManager.NavigateTo (“/search/” + searchValue);
Om du vill ha mer avancerad routing måste du titta på frågeparametrar.
Manuell uppdatering av sidan vid URL -ändring
En av Blazors särdrag är att den inte utlöser en uppdatering när din webbadress ändras, även om du har en statlig kod som är beroende av den, så du behöver uppdatera manuellt. Lyckligtvis har NavigationManager en delegat för när platsen ändras, och du kan binda en funktion till det.
NavigationManager.LocationChanged += HandleLocationChanged;
Du vill använda InvokeAsync med en funktion som uppdaterar vilket tillståndsobjekt din app är beroende av. Sedan måste du ringa StateHasChanged efteråt för att utlösa en uppdatering.
< /p>
Du kan också ringa OnParametersSetAsync härifrån om din kod också beror på andra URL-parametrar och du inte vill kopiera/klistra in.
Blazor Bibliotek
En av fördelarna med Blazor är att det inte är en helt ny sak, det är byggt på den 20 -åriga ryggraden i ASP.NET, och det har redan ett mångsidigt ekosystem av bibliotek. Vi kommer inte in på en lista över dem här, för det finns redan den fantastiska blazor-listan på GitHub som täcker allt.
Annonsering
Men en sak bör du definitivt be using är ett färdigt komponentbibliotek. Det finns ett par gratis, men RadZen är en av de mest populära, och det är helt öppen källkod. Blazorise är en annan bra produkt, även om den bara är gratis för icke-kommersiella produkter.
I båda fallen möjliggör snabb prototypering och påskyndar din utvecklingstid drastiskt genom att använda färdiga komponentlayouter och handstil dem senare. Vi rekommenderar dem starkt.
Blazors framtid
Blazor är ett verkligt unikt ramverk bland ett hav av JavaScript-baserade React-kloner, och med Microsoft bakom sig har det en ljus framtid. Vi nämnde tidigare att Microsoft hade planer på Blazor Desktop, som kommer i slutet av 2021.
Blazor Desktop kommer att fungera mycket som Electron gör, där det startar din app i en Chromium -behållare med några bindningar för skrivbordsfunktioner . Förutom att istället för att använda Chromium kommer Blazor Desktop att använda native -baserade WebViews och köra .NET -koden direkt på maskinen.
Under tiden kan du faktiskt få Blazor på skrivbordet nu med Electron .NET, och det fungerar förvånansvärt bra. Allt du behöver göra är att installera det och lägga till Electron som en ASP.NET -tjänst. Du kan också ringa till elektroniska funktioner från C#.