ASP.NET Core Blazor

Välkommen till Blazor!

Blazor är ett .NET klientdelswebbramverk som stöder både återgivning på serversidan och klientinteraktivitet i en enda programmeringsmodell:

• Skapa omfattande interaktiva UIs med hjälp av C#.
• Dela applogik på serversidan och på klientsidan som skrivits i .NET.
• Rendera användargränssnittet som HTML och CSS för bred webbläsarsupport, inklusive mobila webbläsare.
• Skapa hybridappar för skrivbord och mobil med .NET och Blazor.

Användning av .NET för webbutveckling på klientsidan ger följande fördelar:

• Skriv kod i C#, vilket kan förbättra produktiviteten i apputveckling och underhåll.
• Utnyttja det befintliga .NET-ekosystemet för .NET-bibliotek.
• Dra nytta av . NET:s prestanda, tillförlitlighet och säkerhet.
• Håll dig produktiv i Windows, Linux eller macOS med en utvecklingsmiljö, till exempel Visual Studio eller Visual Studio Code. Integrera med moderna värdplattformar, till exempel Docker.
• Skapa en gemensam uppsättning språk, ramverk och verktyg som är stabila, funktionsrika och enkla att använda.

Not

En Blazor snabbstartsguide finns i Skapa din första Blazor app.

Komponenter

Blazor appar baseras på komponenter. En komponent i Blazor är ett element i användargränssnittet, till exempel en sida, dialogruta eller ett datainmatningsformulär.

Komponenter är .NET C#-klasser inbyggda i .NET-assembly som:

• Definiera flexibel UI-renderingslogik.
• Hantera användarhändelser.
• Kan kapslas och återanvändas.
• Kan delas och distribueras som Razor klassbibliotek eller NuGet-paket.

Komponentklassen skrivs vanligtvis i form av en Razor markeringssida med ett .razor filnamnstillägg. Komponenter i Blazor kallas formellt Razor komponenter, informellt som Blazor komponenter. Razor är en syntax för att kombinera HTML-kod med C#-kod som är utformad för utvecklares produktivitet. Razor kan du växla mellan HTML-kod och C# i samma fil med IntelliSense programmeringsstöd i Visual Studio.

Blazor använder naturliga HTML-taggar för användargränssnittssammansättning. Följande Razor-markering visar en komponent som ökar en räknare när användaren väljer en knapp.

<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++;
    }
}

Komponenter återges i en minnesintern representation av webbläsarens Document Object Model (DOM) som kallas ett renderingsträd, vilket används för att uppdatera användargränssnittet flexibelt och effektivt.

Skapa en fullstackswebbapp med Blazor

Blazor Web Appger en komponentbaserad arkitektur med återgivning på serversidan och fullständig interaktivitet på klientsidan i en enda lösning, där du kan växla mellan återgivningslägen på serversidan och klientsidan och till och med blanda dem på samma sida.

Blazor Web Apps kan snabbt leverera användargränssnittet till webbläsaren genom att statiskt återge HTML-innehåll från servern som svar på begäranden. Sidan läses in snabbt eftersom UI-rendering utförs snabbt på servern utan att du behöver ladda ned ett stort JavaScript-paket. Blazor kan också ytterligare förbättra användarupplevelsen med olika progressiva förbättringar av serverrendering, till exempel förbättrad navigering med formulärposter och strömmande återgivning av asynkront genererat innehåll.

Blazor stöder interaktiv återgivning på serversidan (interaktiv SSR), där gränssnittsinteraktioner hanteras från servern via en realtidsanslutning till webbläsaren. Interaktiv SSR möjliggör en omfattande användarupplevelse som man kan förvänta sig av en klientapp, men utan att behöva skapa API-slutpunkter för att få åtkomst till serverresurser. Sidinnehållet för interaktiva sidor är fördefinierat, där innehåll på servern skapas och skickas till klienten utan att händelsehanterare aktiveras 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.

Blazor Web Apphar stöd för interaktivitet med återgivning på klientsidan (CSR) som förlitar sig på en .NET-körtidsmiljö byggd med WebAssembly som du kan ladda ned med din app. När du kör Blazor på WebAssembly kan din .NET-kod komma åt alla funktioner i webbläsaren och interop med JavaScript. .NET-koden körs i webbläsarens säkerhetssandlåda med det skydd som sandbox-miljön ger mot skadliga åtgärder på klientdatorn.

Blazor appar kan helt rikta in sig på att köras på WebAssembly i webbläsaren utan inblandning av en server. För en fristående Blazor WebAssembly appdistribueras tillgångar som statiska filer till en webbserver eller tjänst som kan hantera statiskt innehåll till klienter. När de har laddats ned kan fristående Blazor WebAssembly appar cachelagras och köras offline som en progressiv webbapp (PWA).

Skapa en intern klientapp med Blazor Hybrid

Blazor Hybrid möjliggör användning av Razor komponenter i en intern klientapp med en blandning av interna tekniker och webbtekniker för webb-, mobil- och skrivbordsplattformar. Koden körs internt i .NET-processen och renderar webbgränssnittet till en inbäddad Web View kontroll med hjälp av en lokal interop-kanal. WebAssembly används inte i Hybrid-appar. Hybridappar skapas med .NET Multi-platform App UI (.NET MAUI), som är ett plattformsoberoende ramverk för att skapa interna mobil- och skrivbordsappar med C# och XAML.

Blazor Hybrid stöder Windows Presentation Foundation (WPF) och Windows Forms för att överföra appar från tidigare teknik till .NET MAUI.

Nästa steg

Blazor Självstudie – Skapa din första Blazor appASP.NET Core Blazor plattformar som stöds