Dela via

grunderna i ASP.NET Core Blazor

  • Artikel

Not

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Fundamentals artiklar ger vägledning om grundläggande Blazor begrepp. Några av begreppen är kopplade till en grundläggande förståelse av Razor komponenter, som beskrivs ytterligare i nästa avsnitt i den här artikeln och beskrivs i detalj i artiklarna Components.

Statiska och interaktiva återgivningsbegrepp

Razor-komponenter renderas antingen statiskt eller interaktivt.

Statisk eller statisk återgivning är ett scenario på serversidan som innebär att komponenten återges utan kapacitet för samspel mellan användaren och .NET/C#-koden. JavaScript- och HTML DOM-händelser påverkas inte, men inga användarhändelser på klienten kan bearbetas med .NET som körs på servern.

Interaktiv eller interaktiv återgivning innebär att komponenten har kapacitet att bearbeta .NET-händelser via C#-kod. .NET-händelserna bearbetas antingen på servern av ASP.NET Core-körningen eller i webbläsaren på klienten av den WebAssembly-baserade Blazor-körningen.

Viktig

När du använder en Blazor Web Appkräver de flesta Blazor dokumentationsexempelkomponenter interaktivitet för att fungera och demonstrera de begrepp som beskrivs i artiklarna. När du testar en exempelkomponent som tillhandahålls av en artikel kontrollerar du att appen antingen använder global interaktivitet eller att komponenten använder ett interaktivt återgivningsläge.

Mer information om dessa begrepp och hur du styr statisk och interaktiv återgivning finns i återgivningslägena ASP.NET Core Blazor senare i Blazor dokumentationen.

Begrepp för klient- och serverrendering

I hela Blazor-dokumentationen sägs det att aktivitet som äger rum på användarens system sker antingen på klienten eller på klientsidan. Aktivitet som äger rum på en server sägs ske på servern eller server-sidan.

Termen återgivning innebär att skapa den HTML-kod som visas av webbläsare.

  • Klientsidesrendering (CSR) innebär att den slutliga HTML-koden genereras av .NET WebAssembly-körtid på klienten. Ingen HTML för appens klientgenererade användargränssnitt skickas från en server till klienten för den här typen av återgivning. Användarinteraktivitet med sidan antas. Det finns inget sådant begrepp som statisk återgivning på klientsidan. CSR antas vara interaktiv, så "interaktiv återgivning på klientsidan" och "interaktiv CSR" används inte av branschen eller i Blazor dokumentationen.

  • återgivning på serversidan (SSR) innebär att den slutliga HTML-koden genereras av ASP.NET Core-körningen på servern. HTML-koden skickas till klienten via ett nätverk för visning av klientens webbläsare. Ingen HTML för appens servergenererade användargränssnitt skapas av klienten för den här typen av återgivning. SSR kan vara av två sorter:

    • Static SSR: Servern producerar statisk HTML som inte tillhandahåller användarinteraktivitet eller underhåller Razor komponenttillstånd.
    • Interaktiv SSR-: Blazor händelser tillåter användarinteraktivitet och Razor komponenttillstånd underhålls av Blazor ramverket.

  • Prerendering är processen att först återge sidinnehåll på servern utan att aktivera händelsehanterare för renderade kontroller. Servern matar ut HTML-användargränssnittet på sidan så snart som möjligt som svar på den första begäran, vilket gör att appen känns mer dynamisk för användarna. Prerendering kan också förbättra sökmotoroptimering (SEO) genom att återge innehåll för det initiala HTTP-svaret som sökmotorer använder för att beräkna sidrankning. Förrendering följs alltid av slutlig återgivning, antingen på servern eller klienten.

Razor komponenter

Blazor appar baseras på Razor komponenter, som ofta bara kallas komponenter. En komponent är ett element i användargränssnittet, till exempel en sida, dialogruta eller ett datainmatningsformulär. Komponenter är .NET C#-klasser inbyggda i .NET-sammansättningar.

Razor refererar till hur komponenter vanligtvis skrivs i form av en Razor markeringssida för logik och sammansättning för användargränssnittet på klientsidan. Razor är en syntax för att kombinera HTML-kod med C#-kod som är utformad för utvecklares produktivitet. Razor filer använder filnamnstillägget .razor.

Även om vissa Blazor utvecklare och onlineresurser använder termen "Blazor komponenter" undviker dokumentationen den termen och använder universellt "Razor komponenter" eller "komponenter".

Blazor dokumentationen antar flera konventioner för att visa och diskutera komponenter:

  • I allmänhet följer exemplen ASP.NET Core/C#-kodningskonventioner och tekniska riktlinjer. Mer information finns i följande resurser:
  • Projektkod, filsökvägar och namn, projektmallsnamn och andra specialiserade termer finns på engelska i USA och är vanligtvis kodstängslade.
  • Komponenter refereras vanligtvis till av deras C#-klassnamn (Pascal-skiftläge) följt av ordet "komponent". Till exempel kallas en typisk filuppladdningskomponent för komponenten "FileUpload".
  • Vanligtvis är en komponents C#-klassnamn samma som dess filnamn.
  • Routbara komponenter anger vanligtvis sina relativa URL:er till komponentens klassnamn i kebab-case. En FileUpload komponent innehåller till exempel routningskonfiguration för att nå den renderade komponenten på den relativa URL:en /file-upload. Routning och navigering beskrivs i ASP.NET Core Blazor routning och navigering.
  • När flera versioner av en komponent används numreras de sekventiellt. Till exempel nås komponenten FileUpload3 vid /file-upload-3.
  • Razor direktiv överst i en komponentdefinition (.razor file) placeras i följande ordning: @page, @rendermode (.NET 8 eller senare), @using-instruktioner, andra direktiv i alfabetisk ordning.
  • Även om det inte krävs för private medlemmar används åtkomstmodifierare i artikelexempel och exempelappar. Till exempel anges private för att deklarera ett fält med namnet maxAllowedFiles som private int maxAllowedFiles = 3;.
  • Komponentparameter värden börjar med en Razor reserverad @ symbol, men det är inte ett krav. Literaler (till exempel booleska värden), nyckelord (till exempel this) och null som komponentparametervärden är inte prefix med @, men detta är också bara en dokumentationskonvention. Din egen kod kan prefixa litteraler med @ om du vill.
  • C#-klasser använder this som nyckelord och undviker att prefixera fält med ett understreck (_) som tilldelas i konstruktorer, vilket skiljer sig från de tekniska riktlinjerna för ASP.NET Core framework.
  • I exempel som använder primära konstruktorer (C# 12 eller senare)används vanligtvis primära konstruktorparametrar direkt av klassmedlemmar. I artikelexempel delas kodrader upp för att minska vågrät rullning. De här pauserna påverkar inte körningen, men kan tas bort när du klistrar in i ditt projekt.

Ytterligare information om Razor komponentsyntax finns i avsnittet Razor syntax i ASP.NET Core Razor-komponenter.

Följande är en exempelräknarekomponent och en del av en app som skapats från en Blazor projektmall. Detaljerad information om komponenter finns i artiklarna Components senare i dokumentationen. I följande exempel visas komponentbegrepp som visas i artiklarna Fundamentals innan du når artiklarna Components senare i dokumentationen.

Counter.razor:

Komponenten förutsätter att ett interaktivt återgivningsläge ärvs från en överordnad komponent eller tillämpas globalt på appen.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

Komponenten förutsätter att ett interaktivt återgivningsläge ärvs från en överordnad komponent eller tillämpas globalt på appen.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Föregående Counter komponent:

  • Ställer in sin rutt med @page-direktivet på den första raden.
  • Ställer in sidtitel och rubrik.
  • Renderar det aktuella antalet med @currentCount. currentCount är en heltalsvariabel som definieras i C#-koden för @code-blocket.
  • Visar en knapp för att utlösa IncrementCount-metoden, som också finns i @code-blocket och ökar värdet för variabeln currentCount.

Återgivningslägen

Artiklar i noden Fundamentals hänvisar till begreppet återgivningslägen. Det här ämnet beskrivs i detalj i ASP.NET Core Blazor återgivningslägen artikel i noden Components, som visas efter Fundamentals-noden med artiklar.

För de tidiga referenserna i den här sektionen av artiklar som handlar om renderinglägen, bör du endast notera följande:

Varje komponent i en Blazor Web App använder ett återgivningsläge för att fastställa vilken värdmodell den använder, var den återges och om den återges statiskt på servern, renderas med för användarinteraktivitet på servern eller återges för användarinteraktivitet på klienten (vanligtvis med prerendering på servern).

Blazor Server- och Blazor WebAssembly-appar för ASP.NET Core-versioner innan .NET 8 förblir fixerade på värdmodell begrepp, inte återgivningslägen. Återgivningslägen tillämpas konceptuellt på Blazor Web Appi .NET 8 eller senare.

I följande tabell visas de tillgängliga visningslägena för rendering av komponenter i Razor i en Blazor Web App. Återgivningslägen tillämpas på komponenter med @rendermode-direktivet för komponentinstansen eller komponentdefinitionen. Det går också att ange ett återgivningsläge för hela appen.

Namn Beskrivning Renderingsplats Interaktiv
Statisk server Statisk återgivning på serversidan (statisk SSR) Server
Interaktiv server Interaktiv återgivning på serversidan (interaktiv SSR) med Blazor Server Server ✔️
Interaktiv WebAssembly Återgivning på klientsidan (CSR) med hjälp av Blazor WebAssembly† Klient ✔️
Interaktiv auto Interaktiv SSR med hjälp av Blazor Server först och sedan CSR vid efterföljande besök efter att Blazor-paketet har laddats ned Server, sedan klient ✔️

†Client-side rendering (CSR) antas vara interaktiv. "Interaktiv återgivning på klientsidan" och "interaktiv CSR" används inte av branschen eller i Blazor dokumentationen.

Den föregående informationen om renderlägen är allt du behöver veta för att förstå de grundläggande nodartiklarna. Om du är nybörjare på att Blazor och läser Blazor artiklar i innehållsförteckningens ordning, kan du fördröja att ta till dig detaljerad information om återgivningslägen tills du når ASP.NET Core Blazor återgivningslägen-artikeln i Components-noden.

Dokumentobjektmodell (DOM)

Referenser till Dokumentobjektmodell använder förkortningen DOM.

Mer information finns i följande resurser:

Delmängd av .NET-API:er för Blazor WebAssembly appar

En kuraterad lista över specifika .NET-API:er som stöds i webbläsaren för Blazor WebAssembly är inte tillgänglig. Du kan dock manuellt söka efter en lista över .NET-API:er som kommenterats med [UnsupportedOSPlatform("browser")] för att identifiera .NET-API:er som inte stöds i WebAssembly.

Not

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Växla grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Mer information finns i följande resurser:

Exempelappar

Exempelappar för dokumentation är tillgängliga för inspektion och nedladdning:

Blazor exempel på GitHub-lagringsplats (dotnet/blazor-samples)

Leta upp en exempelapp genom att först välja den versionsmapp som matchar den version av .NET som du arbetar med.

Exempelappar på lagringsplatsen:

Exempellagringsplatsen innehåller två typer av exempel:

  • Exempelappar för kodfragment innehåller kodexempel som visas i artiklar. Dessa appar kompileras men är inte nödvändigtvis körbara appar. De här apparna är användbara för att bara hämta exempelkod som visas i artiklar.
  • Exempelappar som medföljer Blazor artiklar kompileras och körs för följande scenarier:
    • Blazor Server med EF Core
    • Blazor Server och Blazor WebAssembly med SignalR
    • Blazor WebAssembly omfångsaktiverad loggning

Mer information och en lista över exemplen i arkivet finns i README.md-filen för Blazor-exemplen på GitHub-lagret.

ASP.NET Core-lagringsplatsens grundläggande testapp är också en användbar uppsättning exempel för olika Blazor scenarier:

BasicTestApp i referenskällan ASP.NET Core (dotnet/aspnetcore)

Not

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Växla grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Så här laddar du ned exempelapparna:

Byte-multipler

.NET-bytestorlekar använder måttprefix för icke-decimala multiplar av byte baserat på 1024-krafter.

Namn (förkortning) Storlek Exempel
Kilobyte (KB) 1 024 byte 1 KB = 1 024 byte
Megabyte (MB) 1 0242 bytes 1 MB = 1 048 576 byte
Gigabyte (GB) 1 0243 byte 1 GB = 1 073 741 824 byte

Supportförfrågningar

Endast dokumentationsrelaterade problem är lämpliga för dotnet/AspNetCore.Docs-repo. För produktsupport ska du inte öppna ett dokumentationsproblem. Sök hjälp via en eller flera av följande supportkanaler:

För en potentiell bugg i ramverket eller produktfeedback öppnar du ett ärende för produktenheten ASP.NET Core på dotnet/aspnetcore ärenden. Felrapporter kräver vanligtvis följande:

  • Tydlig förklaring av problemet: Följ anvisningarna i GitHub-problemmallen som tillhandahålls av produktenheten när du öppnar problemet.
  • Minimalt repro-projekt: Placera ett projekt på GitHub för ingenjörer i produktteamet att ladda ner och köra. Korslänka projektet till problemets inledande kommentar.

För ett potentiellt problem med en Blazor-artikel, öppna ett dokumentationsärende. Om du vill öppna ett dokumentationsproblem använder du länken Öppna ett dokumentationsproblem feedback längst ned i artikeln. Metadata som läggs till i ditt problem ger spårningsdata och pingar automatiskt artikelns författare. Om ämnet diskuterades med produktenheten innan du öppnade dokumentationsproblemet lägger du till en korslänk till det tekniska problemet i dokumentationsproblemets inledande kommentar.

För problem eller feedback i Visual Studio använder du Rapportera ett problem eller Föreslå en funktion gester inifrån Visual Studio, vilket öppnar interna problem för Visual Studio. Mer information finns i Visual Studio Feedback.

Om du har problem med Visual Studio Code kan du be om support i community-supportforum. För buggrapporter och produktfeedback öppnar du ett problem på microsoft/vscode GitHub-lagringsplats.

GitHub-ärenden för Blazor-dokumentation markeras automatiskt för prioritering i Blazor.Docs-projektet (dotnet/AspNetCore.Docs GitHub-förråd). Vänta en kort stund på ett svar, särskilt under helger och helgdagar. Vanligtvis svarar dokumentationsförfattare inom 24 timmar på vardagar.

För en samling länkar till Blazor-resurser som underhålls av communityn, besök Awesome Blazor.

Not

Microsoft äger, underhåller eller stöder inte Awesome Blazor och de flesta communityprodukter och tjänster som beskrivs och länkas där.