Dela via

Integrera ASP.NET Core-komponenter Razor med MVC eller Razor Pages

Anmärkning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .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. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktigt!

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.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Razor komponenter kan integreras i Razor Pages- eller MVC-appar. När sidan eller vyn återges kan komponenterna förrenderas samtidigt.

Viktigt!

Framework-ändringar i ASP.NET Core-versioner ledde till olika uppsättningar instruktioner i den här artikeln. Innan du använder den här artikelns vägledning kontrollerar du att dokumentversionsväljaren överst i den här artikeln matchar den version av ASP.NET Core som du tänker använda för din app.

Prerendering kan förbättra sökmotoroptimering (SEO) genom att återge innehåll för det första HTTP-svaret som sökmotorer kan använda för att beräkna sidrankning.

När du har konfigurerat projektet använder du vägledningen i följande avsnitt beroende på projektets krav:

Konfiguration

Använd följande vägledning för att integrera Razor komponenter i sidor eller vyer i en befintlig Razor Pages- eller MVC-app.

  1. Lägg till en importfil i rotmappen för projektet med följande innehåll. Ändra platshållaren {APP NAMESPACE} till projektets namnområde.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  2. I projektets layoutfil (Pages/Shared/_Layout.cshtml i Razor Pages-appar eller Views/Shared/_Layout.cshtml I MVC-appar):

    • Lägg till följande <base> taggen och HeadOutlet komponenttagghjälpare till <head> elementet:

      <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

      Värdet href ( appens bassökväg) i föregående exempel förutsätter att appen finns på rot-URL-sökvägen (/). Om appen är en delapplikation, se ASP.NET Core-appens bassökvägBlazor.

      Komponenten HeadOutlet används för att återge huvudinnehåll (<head>) för sidrubriker (PageTitle komponent) och andra huvudelement (HeadContent komponent) som anges av Razor komponenter. Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

    • Lägg till en <script> tagg för skriptet blazor.server.js omedelbart före återgivningsavsnittet Scripts (@await RenderSectionAsync(...)):

      <script src="_framework/blazor.server.js"></script>

      Ramverket lägger till skriptet blazor.server.js i appen. Du behöver inte lägga till en blazor.server.js skriptfil manuellt i appen.

    Anmärkning

    Typiskt sett laddas layouten via en _ViewStart.cshtml-fil.

  3. Registrera Blazor Server tjänster i Program.cs, där tjänster registreras.

    builder.Services.AddServerSideBlazor();

  4. Lägg till Blazor Hub-ändpunkten till ändpunkterna för Program.cs där rutterna är mappade. Placera följande rad efter anropet till MapRazorPages (Razor Pages) eller MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrera komponenter i valfri sida eller vy. Lägg till exempel till en Counter komponent i projektets Shared mapp.

    Pages/Shared/Counter.razor (Razor Sidor) eller Views/Shared/Counter.razor (MVC):

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

    Razor Sidor:

    På projektets Index sida i en Razor pages-app lägger du till komponentens Counter namnområde och bäddar in komponenten på sidan. När Index sidan laddas, är Counter komponenten förberenderad i sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

    MVC:

    I projektets Index vy över en MVC-app lägger du till komponentens Counter namnområde och bäddar in komponenten i vyn. När Index vyn läses in, renderas Counter komponenten i förväg på sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

Mer information finns i avsnittet Rendera komponenter från en sida eller vy .

Använda routningsbara komponenter i en Razor Pages-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i Razor Pages-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Lägg till en _Host sida i projektet med följande innehåll. Ersätt platshållaren {APP NAMESPACE} med appens namnområde.

    Pages/_Host.cshtml:

    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof(App)" render-mode="ServerPrerendered" />

    Anmärkning

    I föregående exempel förutsätts att komponenten HeadOutlet och Blazor skriptet (_framework/blazor.server.js) återges av appens layout. Mer information finns i avsnittet Konfiguration .

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. I slutpunkterna, lägg till en lågprioriterad rutt för Program.cs sidan som den sista slutpunkten.

    app.MapFallbackToPage("/_Host");

  5. Lägg till dirigerbara komponenter i projektet. Följande exempel är en RoutableCounter komponent som baseras på komponenten CounterBlazor i projektmallarna.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

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

  6. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Använda dirigerbara komponenter i en MVC-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i MVC-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Lägg till en _Host vy i projektet med följande innehåll. Ersätt platshållaren {APP NAMESPACE} med appens namnområde.

    Views/Home/_Host.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<component type="typeof(App)" render-mode="ServerPrerendered" />

    Anmärkning

    I föregående exempel förutsätts att komponenten HeadOutlet och Blazor skriptet (_framework/blazor.server.js) återges av appens layout. Mer information finns i avsnittet Konfiguration .

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. Lägg till en åtgärd i kontrollanten Home .

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. I slutpunkterna Program.cs lägger du till en lågprioriterad väg för kontrollantåtgärden _Host som returnerar vyn:

    app.MapFallbackToController("Blazor", "Home");

  6. Skapa en Pages mapp i MVC-appen och lägg till dirigerbara komponenter. Följande exempel är en RoutableCounter komponent som baseras på komponenten CounterBlazor i projektmallarna.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

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

  7. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Rendera komponenter från en sida eller vy

Det här avsnittet handlar om att lägga till komponenter till sidor eller vyer, där komponenterna inte kan dirigeras direkt från användarbegäranden.

Om du vill återge en komponent från en sida eller vy använder du hjälpverktyget för komponenttagg.

Rendera tillståndskänsliga interaktiva komponenter

Tillståndsberoende interaktiva komponenter kan läggas till på en Razor sida eller vy.

När sidan eller vyn återges:

  • Komponenten är förupprenderad med sidan eller vyn.
  • Det initiala komponenttillståndet som används för prerendering går förlorat.
  • Nytt komponenttillstånd skapas när SignalR anslutningen upprättas.

På följande Razor sida återges en Counter komponent:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Rendera icke-inaktiva komponenter

På följande Razor sida återges komponenten Counter statiskt med ett initialt värde som anges med hjälp av ett formulär. Eftersom komponenten återges statiskt är komponenten inte interaktiv:

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Komponentnamnområden

När du använder en anpassad mapp för att lagra projektets Razor komponenter lägger du till namnområdet som representerar mappen i antingen sidan/vyn eller i _ViewImports.cshtml filen. I följande exempel:

  • Komponenter lagras i Components mappen för projektet.
  • Platshållaren {APP NAMESPACE} är projektets namnrymd. Components representerar namnet på mappen.
@using {APP NAMESPACE}.Components

Filen _ViewImports.cshtml finns i mappen för Pages en Razor Pages-app eller mappen för Views en MVC-app.

Mer information finns i ASP.NET Core Razor-komponenter.

Bevara fördefinierat tillstånd

Utan att bibehålla ett förberendrat tillstånd förloras tillståndet som används under förberendringen och måste återskapas när appen är fullt laddad. Om något tillstånd konfigureras asynkront kan användargränssnittet flimra när det förinstallerade användargränssnittet ersätts med tillfälliga platshållare och sedan återges helt igen.

För att bevara tillstånd för för-renderade komponenter, använd Persist Component State Tag Helper (referenskälla). Lägg till Tag Helper-taggen, <persist-component-state />, inuti den avslutande </body>-taggen på _Host-sidan i en app som förberender komponenter.

Anmärkning

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älj bland 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).

I Pages/_Host.cshtml av Blazor appar som är ServerPrerendered i en Blazor Server app:

<body>
    ...

    <persist-component-state />
</body>

Bestäm vilket tillstånd som ska sparas med hjälp av PersistentComponentState tjänsten. Egenskapen [SupplyParameterFromPersistentComponentState] som tillämpas på en property registrerar en callback för att bevara tillståndet under förrendering och laddar det när komponenten renderas interaktivt eller tjänsten instansieras.

I följande exempel representerar platshållaren {TYPE} typen av data som ska sparas (till exempel WeatherForecast[]).

@code {
    [SupplyParameterFromPersistentComponentState]
    public {TYPE} Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data ??= await ...;
    }
}

I följande exempel bevarar WeatherForecastPreserveState-komponenten väderprognosens tillstånd under förrendering och hämtar sedan tillståndet för att initialisera komponenten. Persist Component State Tag Helper bevarar komponentens tillstånd efter alla komponentanrop.

WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (Forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in Forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [SupplyParameterFromPersistentComponentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecastService.GetForecastAsync(
            DateOnly.FromDateTime(DateTime.Now));
    }
}

Bestäm vilket tillstånd som ska sparas med hjälp av PersistentComponentState tjänsten. PersistentComponentState.RegisterOnPersisting registrerar ett återanrop för att bevara komponenttillståndet innan appen pausas. Tillståndet återhämtas när applikationen återupptas. Gör anropet i slutet av initieringskoden för att undvika ett potentiellt låsningstillstånd under appavstängningen.

I följande exempel:

  • Platshållaren {TYPE} representerar den typ av data som ska sparas (till exempel WeatherForecast[]).
  • Platshållaren {TOKEN} är en tillståndsidentifierarsträng (till exempel fetchdata).
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

I följande exempel bevarar WeatherForecastPreserveState-komponenten väderprognosens tillstånd under förrendering och hämtar sedan tillståndet för att initialisera komponenten. Persist Component State Tag Helper bevarar komponentens tillstånd efter alla komponentanrop.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(
                    DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Genom att initiera komponenter med samma tillstånd som används under förinläsningen körs eventuella dyra initieringssteg bara en gång. Det renderade användargränssnittet matchar också det förinstallerade användargränssnittet, så inget flimmer förekommer i webbläsaren.

Det beständiga förinstallerade tillståndet överförs till klienten, där det används för att återställa komponenttillståndet. ASP.NET Core Data Protection säkerställer att data överförs på ett säkert sätt i Blazor Server appar.

Förrenderad tillståndsstorlek och SignalR storleksgräns för meddelanden

En stor för-renderad tillståndsstorlek kan överskrida Blazor:s SignalR krets meddelande-storleksgräns, vilket resulterar i följande:

  • Det går inte att initiera SignalR-kretsen med ett fel på klienten: Circuit host not initialized.
  • Återanslutningsgränssnittet på klienten visas när kretsen misslyckas. Det går inte att återställa.

Lös problemet genom att använda antingen av följande metoder:

  • Minska mängden data som du lägger i det förrenderade tillståndet.
  • Öka storleksgränsen för SignalR meddelande. WARNING: Om du ökar gränsen kan risken för DoS-attacker (Denial of Service) ökas.

Ytterligare Blazor Server resurser

Prerendering kan förbättra sökmotoroptimering (SEO) genom att återge innehåll för det första HTTP-svaret som sökmotorer kan använda för att beräkna sidrankning.

När du har konfigurerat projektet använder du vägledningen i följande avsnitt beroende på projektets krav:

Konfiguration

Använd följande vägledning för att integrera Razor komponenter i sidor eller vyer i en befintlig Razor Pages- eller MVC-app.

Viktigt!

Användning av en layoutsida (_Layout.cshtml) med en komponenttagghjälp för en HeadOutlet komponent krävs för att styra <head> innehållet, till exempel sidans rubrik (PageTitle komponent) och andra huvudelement (HeadContent komponent). Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

  1. I projektets layoutfil:

    • Lägg till följande <base>-tagg och HeadOutlet komponenttaggshjälpare till <head>-elementet i Pages/Shared/_Layout.cshtml (Razor-sidor) eller Views/Shared/_Layout.cshtml (MVC):

      <base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

      Värdet href ( appens bassökväg) i föregående exempel förutsätter att appen finns på rot-URL-sökvägen (/). Om appen är en delapplikation, se ASP.NET Core-appens bassökvägBlazor.

      Komponenten HeadOutlet används för att återge huvudinnehåll (<head>) för sidrubriker (PageTitle komponent) och andra huvudelement (HeadContent komponent) som anges av Razor komponenter. Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

    • Lägg till en <script> tagg för skriptet blazor.server.js omedelbart före återgivningsavsnittet Scripts (@await RenderSectionAsync(...)) i appens layout.

      Pages/Shared/_Layout.cshtml (Razor Sidor) eller Views/Shared/_Layout.cshtml (MVC):

      <script src="_framework/blazor.server.js"></script>

      Ramverket lägger till skriptet blazor.server.js i appen. Du behöver inte lägga till en blazor.server.js skriptfil manuellt i appen.

  2. Lägg till en importfil i rotmappen för projektet med följande innehåll. Ändra platshållaren {APP NAMESPACE} till projektets namnområde.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Registrera Blazor Server tjänster i Program.cs, där tjänster registreras.

    builder.Services.AddServerSideBlazor();

  4. Lägg till Blazor Hub-ändpunkten till ändpunkterna för Program.cs där rutterna är mappade.

    Placera följande rad efter anropet till MapRazorPages (Razor Pages) eller MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrera komponenter i valfri sida eller vy. Lägg till exempel till en Counter komponent i projektets Shared mapp.

    Pages/Shared/Counter.razor (Razor Sidor) eller Views/Shared/Counter.razor (MVC):

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

    Razor Sidor:

    På projektets Index sida i en Razor pages-app lägger du till komponentens Counter namnområde och bäddar in komponenten på sidan. När Index sidan laddas, är Counter komponenten förberenderad i sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

    MVC:

    I projektets Index vy över en MVC-app lägger du till komponentens Counter namnområde och bäddar in komponenten i vyn. När Index vyn läses in, renderas Counter komponenten i förväg på sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

Mer information finns i avsnittet Rendera komponenter från en sida eller vy .

Använda routningsbara komponenter i en Razor Pages-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i Razor Pages-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Lägg till en _Host sida i projektet med följande innehåll.

    Pages/_Host.cshtml:

    @page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

    I det här scenariot använder komponenter den delade _Layout.cshtml filen för sin layout.

    Viktigt!

    Användning av en layoutsida (_Layout.cshtml) med en komponenttagghjälp för en HeadOutlet komponent krävs för att styra <head> innehållet, till exempel sidans rubrik (PageTitle komponent) och andra huvudelement (HeadContent komponent). Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. I slutpunkterna, lägg till en lågprioriterad rutt för Program.cs sidan som den sista slutpunkten.

    app.MapFallbackToPage("/_Host");

  5. Lägg till dirigerbara komponenter i projektet. Följande exempel är en RoutableCounter komponent som baseras på komponenten CounterBlazor i projektmallarna.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

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

  6. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Använda dirigerbara komponenter i en MVC-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i MVC-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Lägg till en _Host vy i projektet med följande innehåll.

    Views/Home/_Host.cshtml:

    @namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />

    Komponenter använder den delade _Layout.cshtml filen för sin layout.

    Viktigt!

    Användning av en layoutsida (_Layout.cshtml) med en komponenttagghjälp för en HeadOutlet komponent krävs för att styra <head> innehållet, till exempel sidans rubrik (PageTitle komponent) och andra huvudelement (HeadContent komponent). Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. Lägg till en åtgärd i kontrollanten Home .

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. I slutpunkterna Program.cs lägger du till en lågprioriterad väg för kontrollantåtgärden _Host som returnerar vyn:

    app.MapFallbackToController("Blazor", "Home");

  6. Skapa en Pages mapp i MVC-appen och lägg till dirigerbara komponenter. Följande exempel är en RoutableCounter komponent som baseras på komponenten CounterBlazor i projektmallarna.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

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

  7. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Rendera komponenter från en sida eller vy

Det här avsnittet handlar om att lägga till komponenter till sidor eller vyer, där komponenterna inte kan dirigeras direkt från användarbegäranden.

Om du vill återge en komponent från en sida eller vy använder du hjälpverktyget för komponenttagg.

Rendera tillståndskänsliga interaktiva komponenter

Tillståndsberoende interaktiva komponenter kan läggas till på en Razor sida eller vy.

När sidan eller vyn återges:

  • Komponenten är förupprenderad med sidan eller vyn.
  • Det initiala komponenttillståndet som används för prerendering går förlorat.
  • Nytt komponenttillstånd skapas när SignalR anslutningen upprättas.

På följande Razor sida återges en Counter komponent:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Viktigt!

Användning av en layoutsida (_Layout.cshtml) med en komponenttagghjälp för en HeadOutlet komponent krävs för att styra <head> innehållet, till exempel sidans rubrik (PageTitle komponent) och andra huvudelement (HeadContent komponent). Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

Rendera icke-inaktiva komponenter

På följande Razor sida återges komponenten Counter statiskt med ett initialt värde som anges med hjälp av ett formulär. Eftersom komponenten återges statiskt är komponenten inte interaktiv:

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Viktigt!

Användning av en layoutsida (_Layout.cshtml) med en komponenttagghjälp för en HeadOutlet komponent krävs för att styra <head> innehållet, till exempel sidans rubrik (PageTitle komponent) och andra huvudelement (HeadContent komponent). Mer information finns i Kontrollera huvudinnehåll i ASP.NET Core-apparBlazor.

Komponentnamnområden

När du använder en anpassad mapp för att lagra projektets Razor komponenter lägger du till namnområdet som representerar mappen i antingen sidan/vyn eller i _ViewImports.cshtml filen. I följande exempel:

  • Komponenter lagras i Components mappen för projektet.
  • Platshållaren {APP NAMESPACE} är projektets namnrymd. Components representerar namnet på mappen.
@using {APP NAMESPACE}.Components

Filen _ViewImports.cshtml finns i mappen för Pages en Razor Pages-app eller mappen för Views en MVC-app.

Mer information finns i ASP.NET Core Razor-komponenter.

Bevara fördefinierat tillstånd

Utan att bibehålla ett förberendrat tillstånd förloras tillståndet som används under förberendringen och måste återskapas när appen är fullt laddad. Om något tillstånd konfigureras asynkront kan användargränssnittet flimra när det förinstallerade användargränssnittet ersätts med tillfälliga platshållare och sedan återges helt igen.

För att lösa dessa problem stödjer Blazor bestående tillstånd på en förberenderad sida med hjälp av Tag Helper för att bevara komponenttillstånd. Lägg till Tag Helper-taggen <persist-component-state /> inuti den avslutande </body>-taggen.

Pages/_Layout.cshtml:

<body>
    ...

    <persist-component-state />
</body>

Bestäm vilket tillstånd som ska sparas med hjälp av PersistentComponentState tjänsten. PersistentComponentState.RegisterOnPersisting registrerar ett återanrop för att bevara komponenttillståndet innan appen pausas. Tillståndet återhämtas när applikationen återupptas. Gör anropet i slutet av initieringskoden för att undvika ett potentiellt låsningstillstånd under appavstängningen.

I följande exempel bevarar WeatherForecastPreserveState-komponenten väderprognosens tillstånd under förrendering och hämtar sedan tillståndet för att initialisera komponenten. Persist Component State Tag Helper bevarar komponentens tillstånd efter alla komponentanrop.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Genom att initiera komponenter med samma tillstånd som används under förinläsningen körs eventuella dyra initieringssteg bara en gång. Det renderade användargränssnittet matchar också det förinstallerade användargränssnittet, så inget flimmer förekommer i webbläsaren.

Det beständiga förinstallerade tillståndet överförs till klienten, där det används för att återställa komponenttillståndet. ASP.NET Core Data Protection säkerställer att data överförs på ett säkert sätt i Blazor Server appar.

Förrenderad tillståndsstorlek och SignalR storleksgräns för meddelanden

En stor för-renderad tillståndsstorlek kan överskrida Blazor:s SignalR krets meddelande-storleksgräns, vilket resulterar i följande:

  • Det går inte att initiera SignalR-kretsen med ett fel på klienten: Circuit host not initialized.
  • Återanslutningsgränssnittet på klienten visas när kretsen misslyckas. Det går inte att återställa.

Lös problemet genom att använda antingen av följande metoder:

  • Minska mängden data som du lägger i det förrenderade tillståndet.
  • Öka storleksgränsen för SignalR meddelande. WARNING: Om du ökar gränsen kan risken för DoS-attacker (Denial of Service) ökas.

Ytterligare Blazor Server resurser

Prerendering kan förbättra sökmotoroptimering (SEO) genom att återge innehåll för det första HTTP-svaret som sökmotorer kan använda för att beräkna sidrankning.

När du har konfigurerat projektet använder du vägledningen i följande avsnitt beroende på projektets krav:

Konfiguration

En befintlig Razor pages- eller MVC-app kan integrera Razor komponenter i sidor eller vyer:

  1. I projektets layoutfil:

    • Lägg till följande <base>-tagg i <head>-elementet inom Pages/Shared/_Layout.cshtml (Razor Pages) eller Views/Shared/_Layout.cshtml (MVC):

      <base href="~/" />

      Värdet href ( appens bassökväg) i föregående exempel förutsätter att appen finns på rot-URL-sökvägen (/). Om appen är en delapplikation, se ASP.NET Core-appens bassökvägBlazor.

    • Lägg till en <script> tagg för skriptet blazor.server.js omedelbart före återgivningsavsnittet Scripts .

      Pages/Shared/_Layout.cshtml (Razor Sidor) eller Views/Shared/_Layout.cshtml (MVC):

          ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Ramverket lägger till skriptet blazor.server.js i appen. Du behöver inte lägga till en blazor.server.js skriptfil manuellt i appen.

  2. Lägg till en importfil i rotmappen för projektet med följande innehåll. Ändra platshållaren {APP NAMESPACE} till projektets namnområde.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Registrera tjänsten Blazor Server i Startup.ConfigureServices.

    I Startup.cs:

    services.AddServerSideBlazor();

  4. Blazor Lägg till hubbslutpunkten till slutpunkterna (app.UseEndpoints) för Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrera komponenter i valfri sida eller vy. Lägg till exempel till en Counter komponent i projektets Shared mapp.

    Pages/Shared/Counter.razor (Razor Sidor) eller Views/Shared/Counter.razor (MVC):

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

    Razor Sidor:

    På projektets Index sida i en Razor pages-app lägger du till komponentens Counter namnområde och bäddar in komponenten på sidan. När Index sidan laddas, är Counter komponenten förberenderad i sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>

    I föregående exempel ersätter du {APP NAMESPACE} platshållaren med appens namnområde.

    MVC:

    I projektets Index vy över en MVC-app lägger du till komponentens Counter namnområde och bäddar in komponenten i vyn. När Index vyn läses in, renderas Counter komponenten i förväg på sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>

Mer information finns i avsnittet Rendera komponenter från en sida eller vy .

Använda routningsbara komponenter i en Razor Pages-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i Razor Pages-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Anmärkning

    Med versionen av .NET 5.0.1 och för ytterligare 5.x-versioner innehåller komponenten Router parametern PreferExactMatches inställd på @true. Mer information finns i Migrera från ASP.NET Core 3.1 till .NET 5.

  3. Lägg till en _Host sida i projektet med följande innehåll.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

    Komponenter använder den delade _Layout.cshtml filen för sin layout.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. I slutpunkterna av Startup.Configure i Startup.cs lägger du till en lågprioriterad rutt för _Host sidan som den sista slutpunkten:

    endpoints.MapFallbackToPage("/_Host");

    I följande exempel visas den tillagda raden i en typisk appslutpunktskonfiguration:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Lägg till dirigerbara komponenter i projektet.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  6. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Använda dirigerbara komponenter i en MVC-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i MVC-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Anmärkning

    Med versionen av .NET 5.0.1 och för ytterligare 5.x-versioner innehåller komponenten Router parametern PreferExactMatches inställd på @true. Mer information finns i Migrera från ASP.NET Core 3.1 till .NET 5.

  3. Lägg till en _Host vy i projektet med följande innehåll.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

    Komponenter använder den delade _Layout.cshtml filen för sin layout.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. Lägg till en åtgärd i kontrollanten Home .

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. I slutpunkterna av Startup.ConfigureStartup.cs lägger du till en lågprioriterad rutt för kontrolleråtgärden som returnerar vyn _Host:

    endpoints.MapFallbackToController("Blazor", "Home");

    I följande exempel visas den tillagda raden i en typisk appslutpunktskonfiguration:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Lägg till dirigerbara komponenter i projektet.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  7. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Rendera komponenter från en sida eller vy

Det här avsnittet handlar om att lägga till komponenter till sidor eller vyer, där komponenterna inte kan dirigeras direkt från användarbegäranden.

Om du vill återge en komponent från en sida eller vy använder du hjälpverktyget för komponenttagg.

Rendera tillståndskänsliga interaktiva komponenter

Tillståndsberoende interaktiva komponenter kan läggas till på en Razor sida eller vy.

När sidan eller vyn återges:

  • Komponenten är förupprenderad med sidan eller vyn.
  • Det initiala komponenttillståndet som används för prerendering går förlorat.
  • Nytt komponenttillstånd skapas när SignalR anslutningen upprättas.

På följande Razor sida återges en Counter komponent:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Rendera icke-inaktiva komponenter

På följande Razor sida återges komponenten Counter statiskt med ett initialt värde som anges med hjälp av ett formulär. Eftersom komponenten återges statiskt är komponenten inte interaktiv:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Komponentnamnområden

När du använder en anpassad mapp för att lagra projektets Razor komponenter lägger du till namnområdet som representerar mappen i antingen sidan/vyn eller i _ViewImports.cshtml filen. I följande exempel:

  • Komponenter lagras i Components mappen för projektet.
  • Platshållaren {APP NAMESPACE} är projektets namnrymd. Components representerar namnet på mappen.
@using {APP NAMESPACE}.Components

Filen _ViewImports.cshtml finns i mappen för Pages en Razor Pages-app eller mappen för Views en MVC-app.

Mer information finns i ASP.NET Core Razor-komponenter.

Förrenderad tillståndsstorlek och SignalR storleksgräns för meddelanden

En stor för-renderad tillståndsstorlek kan överskrida Blazor:s SignalR krets meddelande-storleksgräns, vilket resulterar i följande:

  • Det går inte att initiera SignalR-kretsen med ett fel på klienten: Circuit host not initialized.
  • Återanslutningsgränssnittet på klienten visas när kretsen misslyckas. Det går inte att återställa.

Lös problemet genom att använda antingen av följande metoder:

  • Minska mängden data som du lägger i det förrenderade tillståndet.
  • Öka storleksgränsen för SignalR meddelande. WARNING: Om du ökar gränsen kan risken för DoS-attacker (Denial of Service) ökas.

Ytterligare Blazor Server resurser

Razor komponenter kan integreras i Razor Pages- eller MVC-appar. När sidan eller vyn återges kan komponenterna förrenderas samtidigt.

Prerendering kan förbättra sökmotoroptimering (SEO) genom att återge innehåll för det första HTTP-svaret som sökmotorer kan använda för att beräkna sidrankning.

När du har konfigurerat projektet använder du vägledningen i följande avsnitt beroende på projektets krav:

Konfiguration

En befintlig Razor pages- eller MVC-app kan integrera Razor komponenter i sidor eller vyer:

  1. I projektets layoutfil:

    • Lägg till följande <base>-tagg i <head>-elementet inom Pages/Shared/_Layout.cshtml (Razor Pages) eller Views/Shared/_Layout.cshtml (MVC):

      + <base href="~/" />

      Värdet href ( appens bassökväg) i föregående exempel förutsätter att appen finns på rot-URL-sökvägen (/). Om appen är en delapplikation, se ASP.NET Core-appens bassökvägBlazor.

    • Lägg till en <script> tagg för skriptet blazor.server.js omedelbart före återgivningsavsnittet Scripts .

      Pages/Shared/_Layout.cshtml (Razor Sidor) eller Views/Shared/_Layout.cshtml (MVC):

          ...
    <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Ramverket lägger till skriptet blazor.server.js i appen. Du behöver inte lägga till en blazor.server.js skriptfil manuellt i appen.

  2. Lägg till en importfil i rotmappen för projektet med följande innehåll. Ändra platshållaren {APP NAMESPACE} till projektets namnområde.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Registrera tjänsten Blazor Server i Startup.ConfigureServices.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Blazor Lägg till hubbslutpunkten till slutpunkterna (app.UseEndpoints) för Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrera komponenter i valfri sida eller vy. Lägg till exempel till en Counter komponent i projektets Shared mapp.

    Pages/Shared/Counter.razor (Razor Sidor) eller Views/Shared/Counter.razor (MVC):

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

    Razor Sidor:

    På projektets Index sida i en Razor pages-app lägger du till komponentens Counter namnområde och bäddar in komponenten på sidan. När Index sidan laddas, är Counter komponenten förberenderad i sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>

    I föregående exempel ersätter du {APP NAMESPACE} platshållaren med appens namnområde.

    MVC:

    I projektets Index vy över en MVC-app lägger du till komponentens Counter namnområde och bäddar in komponenten i vyn. När Index vyn läses in, renderas Counter komponenten i förväg på sidan. I följande exempel ersätter du {APP NAMESPACE} platshållaren med projektets namnområde.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

<div>
    <component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>

Mer information finns i avsnittet Rendera komponenter från en sida eller vy .

Använda routningsbara komponenter i en Razor Pages-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i Razor Pages-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Lägg till en _Host sida i projektet med följande innehåll.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

    Komponenter använder den delade _Layout.cshtml filen för sin layout.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. I slutpunkterna av Startup.Configure i Startup.cs lägger du till en lågprioriterad rutt för _Host sidan som den sista slutpunkten:

    endpoints.MapFallbackToPage("/_Host");

    I följande exempel visas den tillagda raden i en typisk appslutpunktskonfiguration:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Lägg till dirigerbara komponenter i projektet.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  6. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Använda dirigerbara komponenter i en MVC-app

Det här avsnittet handlar om att lägga till komponenter som är direkt dirigerbara från användarbegäranden.

Så här stöder du dirigerbara Razor komponenter i MVC-appar:

  1. Följ riktlinjerna i avsnittet Konfiguration .

  2. Lägg till en App komponent i projektroten med följande innehåll.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Lägg till en _Host vy i projektet med följande innehåll.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

    Komponenter använder den delade _Layout.cshtml filen för sin layout.

    RenderMode konfigurerar om komponenten App :

    • Är förhandsrenderad på sidan.
    • Återges som statisk HTML på sidan eller om den innehåller nödvändig information för att starta en Blazor app från användaragenten.

    Mer information om komponenttagghjälpen, inklusive att skicka parametrar och RenderMode konfiguration, finns i Komponenttagghjälp i ASP.NET Core.

  4. Lägg till en åtgärd i kontrollanten Home .

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. I slutpunkterna av Startup.ConfigureStartup.cs lägger du till en lågprioriterad rutt för kontrolleråtgärden som returnerar vyn _Host:

    endpoints.MapFallbackToController("Blazor", "Home");

    I följande exempel visas den tillagda raden i en typisk appslutpunktskonfiguration:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Lägg till dirigerbara komponenter i projektet.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  7. Kör projektet och navigera till den routningsbara RoutableCounter-komponenten på /routable-counter.

Mer information om namnområden finns i avsnittet Komponentnamnområden .

Rendera komponenter från en sida eller vy

Det här avsnittet handlar om att lägga till komponenter till sidor eller vyer, där komponenterna inte kan dirigeras direkt från användarbegäranden.

Om du vill återge en komponent från en sida eller vy använder du hjälpverktyget för komponenttagg.

Rendera tillståndskänsliga interaktiva komponenter

Tillståndsberoende interaktiva komponenter kan läggas till på en Razor sida eller vy.

När sidan eller vyn återges:

  • Komponenten är förupprenderad med sidan eller vyn.
  • Det initiala komponenttillståndet som används för prerendering går förlorat.
  • Nytt komponenttillstånd skapas när SignalR anslutningen upprättas.

På följande Razor sida återges en Counter komponent:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Rendera icke-inaktiva komponenter

På följande Razor sida återges komponenten Counter statiskt med ett initialt värde som anges med hjälp av ett formulär. Eftersom komponenten återges statiskt är komponenten inte interaktiv:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Mer information finns i Komponenttagghjälp i ASP.NET Core.

Komponentnamnområden

När du använder en anpassad mapp för att lagra projektets Razor komponenter lägger du till namnområdet som representerar mappen i antingen sidan/vyn eller i _ViewImports.cshtml filen. I följande exempel:

  • Komponenter lagras i Components mappen för projektet.
  • Platshållaren {APP NAMESPACE} är projektets namnrymd. Components representerar namnet på mappen.
@using {APP NAMESPACE}.Components

Filen _ViewImports.cshtml finns i mappen för Pages en Razor Pages-app eller mappen för Views en MVC-app.

Mer information finns i ASP.NET Core Razor-komponenter.

Förrenderad tillståndsstorlek och SignalR storleksgräns för meddelanden

En stor för-renderad tillståndsstorlek kan överskrida Blazor:s SignalR krets meddelande-storleksgräns, vilket resulterar i följande:

  • Det går inte att initiera SignalR-kretsen med ett fel på klienten: Circuit host not initialized.
  • Återanslutningsgränssnittet på klienten visas när kretsen misslyckas. Det går inte att återställa.

Lös problemet genom att använda antingen av följande metoder:

  • Minska mängden data som du lägger i det förrenderade tillståndet.
  • Öka storleksgränsen för SignalR meddelande. WARNING: Om du ökar gränsen kan risken för DoS-attacker (Denial of Service) ökas.

Ytterligare Blazor Server resurser