Sdílet prostřednictvím


Integrace základních komponent ASP.NET Razor s MVC nebo Razor stránkami v hostovaných Blazor WebAssembly řešeních

Poznámka:

Hostovaná Blazor WebAssembly řešení zůstávají podporovaná, ale šablona projektu byla odebrána a už není podporována v .NET 8 nebo novějším. Tento článek se zobrazí v obsahu až do .NET 7 pro referenci, ale upozorňujeme, že .NET 7 je verze Standard Support Term , která se už nepodporuje.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core.

Tento článek vysvětluje Razor scénáře integrace komponent pro hostované Blazor WebAssembly aplikace, včetně předběžného Razor nastavení komponent na serveru.

Důležité

Změny architektury napříč verzemi ASP.NET Core vedly k různým sadám pokynů v tomto článku. Než použijete pokyny k tomuto článku, ověřte, že selektor verzí dokumentu v horní části tohoto článku odpovídá verzi ASP.NET Core, kterou chcete pro svou aplikaci používat.

Prerendering může zlepšit optimalizaci vyhledávacího webu (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou můžou vyhledávací weby použít k výpočtu pořadí stránek.

Konfigurace řešení

Konfigurace předběžného nastavení

Nastavení předběžného nastavení hostované Blazor WebAssembly aplikace:

  1. Hostujte Blazor WebAssembly aplikaci v aplikaci ASP.NET Core. Samostatnou Blazor WebAssembly aplikaci můžete přidat do řešení ASP.NET Core nebo můžete použít hostované Blazor WebAssembly aplikace vytvořené ze Blazor WebAssembly šablony projektu s hostovanými možnostmi:

    • Visual Studio: V dialogovém okně Další informace zaškrtněte při vytváření Blazor WebAssembly aplikace zaškrtávací políčko ASP.NET Core Hostované. V příkladech tohoto článku je řešení pojmenováno BlazorHosted.
    • Příkazové prostředí Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (použijte tuto -ho|--hosted možnost). -o|--output {LOCATION} Pomocí možnosti vytvořte složku pro řešení a nastavte obory názvů projektu řešení. V příkladech tohoto článku je řešení pojmenované BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

    V příkladech v tomto článku je BlazorHostednázev hostovaného řešení (název sestavení) . Obor názvů klientského projektu je BlazorHosted.Clienta obor názvů projektu serveru je BlazorHosted.Server.

  2. wwwroot/index.html Odstraňte soubor z Blazor WebAssemblyClient projektu.

  3. Client V projektu odstraňte následující řádky vProgram.cs:

    - builder.RootComponents.Add<App>("#app");
    - builder.RootComponents.Add<HeadOutlet>("head::after");
    
  4. Přidejte _Host.cshtml soubor do Server složky projektu Pages . Soubory můžete získat z projektu vytvořeného Blazor Server ze šablony pomocí sady Visual Studio nebo pomocí rozhraní příkazového řádku .NET CLI s dotnet new blazorserver -o BlazorServer příkazem v příkazovém prostředí ( -o BlazorServer možnost vytvoří složku pro projekt). Po umístění souborů do Server složky projektu Pages proveďte následující změny souborů.

    Proveďte v souboru následující změny _Host.cshtml :

    • Pages Aktualizujte obor názvů v horní části souboru tak, aby odpovídal oboru názvů Server stránek aplikace. Zástupný {APP NAMESPACE} symbol v následujícím příkladu představuje obor názvů stránek aplikace dárců, které soubor poskytly _Host.cshtml :

      Delete (Odstranit):

      - @namespace {APP NAMESPACE}.Pages
      

      Přidejte:

      @namespace BlazorHosted.Server.Pages
      
    • Přidejte direktivu @using Client pro projekt v horní části souboru:

      @using BlazorHosted.Client
      
    • Aktualizujte odkazy šablon stylů tak, aby odkazy na šablony stylů projektu WebAssembly. V následujícím příkladu je BlazorHosted.Clientobor názvů klientského projektu . Zástupný {APP NAMESPACE} symbol představuje obor názvů aplikace dárce, která soubor poskytla _Host.cshtml . Aktualizujte pomocnou rutinu značky komponenty (<component> značku) pro komponentu HeadOutlet tak, aby předkreslila komponentu.

      Delete (Odstranit):

      - <link href="css/site.css" rel="stylesheet" />
      - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
      - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
      

      Přidejte:

      <link href="css/app.css" rel="stylesheet" />
      <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
      <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
      

      Poznámka:

      <link> Ponechte prvek, který požaduje šablonu stylů Bootstrap (css/bootstrap/bootstrap.min.css) na místě.

    • Blazor Aktualizujte zdroj skriptu tak, aby používal skript na straně Blazor WebAssembly klienta:

      Delete (Odstranit):

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

      Přidejte:

      <script src="_framework/blazor.webassembly.js"></script>
      
    • render-mode Aktualizujte pomocnou rutinu značky komponenty tak, aby předkreslila kořenovou App komponentu:WebAssemblyPrerendered

      Delete (Odstranit):

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

      Přidejte:

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

      Důležité

      U koncových bodů ověřování (/authentication/ segment cesty) se nepodporuje předendering. Další informace najdete v tématu Další scénáře zabezpečení ASP.NET Core Blazor WebAssembly.

  5. Program.cs V souboru Server projektu změňte záložní koncový bod ze index.html souboru na _Host.cshtml stránku:

    Delete (Odstranit):

    - app.MapFallbackToFile("index.html");
    

    Přidejte:

    app.MapFallbackToPage("/_Host");
    
  6. Pokud projekty Client Server během předrenderování používají jednu nebo více běžných služeb, zajistěte registraci služby do metody, kterou lze volat z obou projektů. Další informace najdete v tématu ASP.NET injektáž závislostí jádraBlazor.

  7. Server Spusťte projekt. Hostovaná Blazor WebAssembly aplikace je předem vytvářena projektem Server pro klienty.

Konfigurace pro vkládání Razor součástí do stránek nebo zobrazení

Následující části a příklady pro vložení Razor součástí z ClientBlazor WebAssembly aplikace na stránky nebo zobrazení serverové aplikace vyžadují další konfiguraci.

Projekt Server musí obsahovat následující soubory a složky.

Razor Stránky:

  • Pages/Shared/_Layout.cshtml
  • Pages/Shared/_Layout.cshtml.css
  • Pages/_ViewImports.cshtml
  • Pages/_ViewStart.cshtml

MVC:

  • Views/Shared/_Layout.cshtml
  • Views/Shared/_Layout.cshtml.css
  • Views/_ViewImports.cshtml
  • Views/_ViewStart.cshtml

Předchozí soubory lze získat vygenerováním aplikace ze šablon projektu ASP.NET Core pomocí:

  • Nové nástroje pro vytváření projektů v sadě Visual Studio
  • Otevření příkazového prostředí a spuštění dotnet new webapp -o {PROJECT NAME} (Razor Pages) nebo dotnet new mvc -o {PROJECT NAME} (MVC). Možnost -o|--output s hodnotou zástupného symbolu {PROJECT NAME} poskytuje název aplikace a vytvoří pro aplikaci složku.

Aktualizujte obory názvů v importovaném _ViewImports.cshtml souboru tak, aby odpovídaly těm, které používá projekt, který Server soubory přijímá.

Pages/_ViewImports.cshtml (Razor Stránky):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Aktualizujte importovaný soubor rozložení, který je Pages/Shared/_Layout.cshtml určený pro Razor stránky nebo Views/Shared/_Layout.cshtml pro MVC.

Nejprve odstraňte název a šablonu stylů z projektu dárce, který je RPDonor.styles.css v následujícím příkladu. Zástupný {PROJECT NAME} symbol představuje název aplikace projektu dárce.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Client Do souboru rozložení zahrňte styly projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu . Prvek <title> lze aktualizovat současně.

Do obsahu souboru rozložení umístěte následující řádky <head> :

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Importované rozložení obsahuje dvě Home (Index stránka) a Privacy navigační odkazy. Pokud chcete vytvořit odkazy Home na hostované Blazor WebAssembly aplikace, změňte hypertextové odkazy:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

V souboru rozložení MVC:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Aktualizujte název aplikace elementu <footer> . Následující příklad používá název BlazorHostedaplikace:

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

V předchozím příkladu {DATE} zástupný symbol představuje datum autorských práv v aplikaci vygenerované ze Razor šablony projektu Pages nebo MVC.

Pokud chcete, aby Privacy odkaz vedl na privacy stránku (Razor stránky), přidejte privacy do Server projektu stránku.

Pages/Privacy.cshtmlServer v projektu:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Pro zobrazení založené na privacy MVC vytvořte privacy v Server projektu zobrazení.

View/Home/Privacy.cshtmlServer v projektu:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Home V kontroleru aplikace MVC vraťte zobrazení.

Do souboru Controllers/HomeController.cs přidejte následující kód:

public IActionResult Privacy()
{
    return View();
}

Pokud importujete soubory z aplikace dárců, nezapomeňte aktualizovat všechny obory názvů v souborech tak, aby odpovídaly Server projektu (například BlazorHosted.Server).

Import statických prostředků do Server projektu ze složky projektu wwwroot dárce:

  • wwwroot/css složka a obsah
  • wwwroot/js složka a obsah
  • wwwroot/lib složka a obsah

Pokud je projekt dárce vytvořen ze šablony projektu ASP.NET Core a soubory se nezmění, můžete zkopírovat celou wwwroot složku z projektu dárce do Server projektu a odebrat favicon soubor ikony.

Upozorňující

Vyhněte se umístění statického prostředku do složek Client i Server wwwroot do složek. Pokud je v obou složkách stejný soubor, vyvolá se výjimka, protože statické prostředky sdílejí stejnou webovou kořenovou cestu. Proto hostujte statický prostředek v některé z wwwroot těchto složek, nikoli v obou složkách.

Po přijetí předchozí konfigurace vložte Razor komponenty na stránky nebo zobrazení Server projektu. Pokyny najdete v následujících částech tohoto článku:

  • Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty
  • Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty

Po konfiguraci řešení, včetně další konfigurace, podporuje pomocník značky komponenty dva režimy vykreslování pro vykreslení komponenty z Blazor WebAssembly aplikace na stránce nebo zobrazení:

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky. Abyste se vyhnuli použití úplného oboru názvů pro komponentu Counter pomocí pomocné rutiny značky komponenty ({ASSEMBLY NAME}.Pages.Counter), přidejte @using direktivu pro obor názvů klientského Pages projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V projektu Server Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter1. Předřetěná Counter komponenta je vložena na stránku.

RenderMode nakonfiguruje, jestli komponenta:

  • Je předem vytáhlý na stránku.
  • Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Nastavení podřízeného obsahu prostřednictvím fragmentu vykreslení

Pomocná rutina značky komponenty nepodporuje příjem delegáta RenderFragment pro podřízený obsah (například param-ChildContent="..."). Doporučujeme vytvořit součást (.razor), která odkazuje na komponentuRazor, kterou chcete vykreslit s podřízeným obsahem, který chcete předat, a poté vyvolat Razor komponentu ze stránky nebo zobrazení.

Ujistěte se, že se při publikování neoříznou předem připravené komponenty nejvyšší úrovně.

Pokud pomocník značky komponenty přímo odkazuje na komponentu z knihovny, která je předmětem oříznutí při publikování, může být komponenta během publikování oříznutá, protože na ni nejsou žádné odkazy z kódu aplikace na straně klienta. V důsledku toho komponenta není předem vysunutá a ve výstupu ponechá prázdné místo. Pokud k tomu dojde, požádejte uživatele o zachování komponenty knihovny přidáním DynamicDependency atributu do libovolné třídy v aplikaci na straně klienta. Chcete-li zachovat volanou SomeLibraryComponentToBePreservedkomponentu, přidejte do jakékoli součásti následující:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

Předchozí přístup obvykle není nutný, protože aplikace obvykle předem předrenderuje své komponenty (které nejsou oříznuté), které zase odkazují na komponenty z knihoven (což také způsobuje, že se neoříznou). Explicitně používejte DynamicDependency pouze pro předkreslování komponenty knihovny přímo v případě, že je knihovna předmětem oříznutí.

Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Po konfiguraci řešení, včetně další konfigurace, přidejte do projektu hostovaného Blazor WebAssembly řešení v Program.cs souboru kořenové komponentyClient. V následujícím příkladu Counter je komponenta deklarována jako kořenová komponenta se selektorem CSS, který vybere prvek, id který odpovídá counter-component. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V Program.cs souboru Client projektu přidejte obor názvů pro součásti projektu Razor do horní části souboru:

using BlazorHosted.Client.Pages;

builder Po vytvoření Program.cskomponenty přidejte komponentu Counter jako kořenovou komponentu:

builder.RootComponents.Add<Counter>("#counter-component");

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky.

V projektu Server Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter2. Předřetěná Counter komponenta je vložena na stránku.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Poznámka:

Předchozí příklad vyvolá JSException , pokud Blazor WebAssembly je aplikace předem vyřazena a integrována do Razor aplikace Pages nebo MVC současně s použitím selektoru CSS. Přechod na jednu ze Client součástí projektu Razor nebo přechod na stránku nebo zobrazení Server s vloženou komponentou vyvolá jednu nebo více JSExceptionkomponent .

Toto je normální chování, protože předkožování a integrace Blazor WebAssembly aplikace se směrovatelnými Razor komponentami není kompatibilní s použitím selektorů CSS.

Pokud jste pracovali s příklady v předchozích částech a chcete zobrazit práci selektorem CSS ve vaší ukázkové aplikaci, zakomentujte specifikaci App kořenové komponenty Client souboru projektu Program.cs :

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Přejděte na stránku nebo zobrazení s vloženou Razor komponentou, která používá selektor šablon stylů CSS (například /razorpagescounter2 předchozí příklad). Stránka nebo zobrazení se načte s vloženou komponentou a vložená komponenta funguje podle očekávání.

Trvalý předsekenderovaný stav

Bez trvalého předrenderovaného stavu dojde ke ztrátě stavu použitého při předrenderování a při úplném načtení aplikace se musí znovu vytvořit. Pokud je nějaký stav nastaven asynchronně, uživatelské rozhraní může blikáním blikáním, protože se předsekunuté uživatelské rozhraní nahradí dočasnými zástupnými symboly a pak se znovu plně vykreslí.

Chcete-li zachovat stav pro předkazené součásti, použijte pomocníka pro zachování značky stavu součásti (referenční zdroj). Přidejte značku <persist-component-state />pomocné rutiny značky uvnitř koncové </body> značky _Host stránky v aplikaci, která předkončí komponenty.

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

V Pages/_Host.cshtml aplikacíchBlazor, které jsou webAssembly předem v hostované Blazor WebAssembly aplikaci:WebAssemblyPrerendered

<body>
    ...

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

Rozhodněte se, jaký stav se má služba zachovat PersistentComponentState . PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace.

V následujícím příkladu:

  • Zástupný {TYPE} symbol představuje typ dat, která se mají zachovat (například WeatherForecast[]).
  • Zástupný {TOKEN} symbol je řetězec identifikátoru stavu (například fetchdata).
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

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

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

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

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

        return Task.CompletedTask;
    }

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

Následující příklad je aktualizovaná verze FetchData komponenty v hostované Blazor WebAssembly aplikaci na Blazor základě šablony projektu. Komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předkončování a pak načte stav, který komponentu inicializuje. Pomocné rutiny značky stavu součásti zachová stav komponenty po všech vyvolání komponent.

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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

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

Inicializací komponent se stejným stavem, který se používá během předkončování, se všechny nákladné kroky inicializace spustí pouze jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. V případě předběžného vyřazování v hostované Blazor WebAssembly aplikaci se data zveřejňují v prohlížeči a nesmí obsahovat citlivé a soukromé informace.

Další Blazor WebAssembly zdroje informací

Prerendering může zlepšit optimalizaci vyhledávacího webu (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou můžou vyhledávací weby použít k výpočtu pořadí stránek.

Konfigurace řešení

Konfigurace předběžného nastavení

Nastavení předběžného nastavení hostované Blazor WebAssembly aplikace:

  1. Hostujte Blazor WebAssembly aplikaci v aplikaci ASP.NET Core. Samostatnou Blazor WebAssembly aplikaci můžete přidat do řešení ASP.NET Core nebo můžete použít hostované Blazor WebAssembly aplikace vytvořené ze Blazor WebAssembly šablony projektu s hostovanými možnostmi:

    • Visual Studio: V dialogovém okně Další informace zaškrtněte při vytváření Blazor WebAssembly aplikace zaškrtávací políčko ASP.NET Core Hostované. V příkladech tohoto článku je řešení pojmenováno BlazorHosted.
    • Příkazové prostředí Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (použijte tuto -ho|--hosted možnost). -o|--output {LOCATION} Pomocí možnosti vytvořte složku pro řešení a nastavte obory názvů projektu řešení. V příkladech tohoto článku je řešení pojmenované BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

    V příkladech v tomto článku je BlazorHosted.Clientobor názvů klientského projektu a obor názvů projektu serveru je BlazorHosted.Server.

  2. wwwroot/index.html Odstraňte soubor z Blazor WebAssemblyClient projektu.

  3. Client V projektu odstraňte následující řádky vProgram.cs:

    - builder.RootComponents.Add<App>("#app");
    - builder.RootComponents.Add<HeadOutlet>("head::after");
    
  4. Přidejte _Host.cshtml soubory _Layout.cshtml do Server složky projektu Pages . Soubory můžete získat z projektu vytvořeného Blazor Server ze šablony pomocí sady Visual Studio nebo pomocí rozhraní příkazového řádku .NET CLI s dotnet new blazorserver -o BlazorServer příkazem v příkazovém prostředí ( -o BlazorServer možnost vytvoří složku pro projekt). Po umístění souborů do Server složky projektu Pages proveďte následující změny souborů.

    Důležité

    Použití stránky rozložení (_Layout.cshtml) s pomocným pomocníkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (PageTitlesoučást) a další hlavní prvky (HeadContentsoučást). Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

    Proveďte v souboru následující změny _Layout.cshtml :

    • Pages Aktualizujte obor názvů v horní části souboru tak, aby odpovídal oboru názvů Server stránek aplikace. Zástupný {APP NAMESPACE} symbol v následujícím příkladu představuje obor názvů stránek aplikace dárců, které soubor poskytly _Layout.cshtml :

      Delete (Odstranit):

      - @namespace {APP NAMESPACE}.Pages
      

      Přidejte:

      @namespace BlazorHosted.Server.Pages
      
    • Přidejte direktivu @using Client pro projekt v horní části souboru:

      @using BlazorHosted.Client
      
    • Aktualizujte odkazy šablon stylů tak, aby odkazy na šablony stylů projektu WebAssembly. V následujícím příkladu je BlazorHosted.Clientobor názvů klientského projektu . Zástupný {APP NAMESPACE} symbol představuje obor názvů aplikace dárce, která soubor poskytla _Layout.cshtml . Aktualizujte pomocnou rutinu značky komponenty (<component> značku) pro komponentu HeadOutlet tak, aby předkreslila komponentu.

      Delete (Odstranit):

      - <link href="css/site.css" rel="stylesheet" />
      - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
      - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
      

      Přidejte:

      <link href="css/app.css" rel="stylesheet" />
      <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
      <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
      

      Poznámka:

      <link> Ponechte prvek, který požaduje šablonu stylů Bootstrap (css/bootstrap/bootstrap.min.css) na místě.

    • Blazor Aktualizujte zdroj skriptu tak, aby používal skript na straně Blazor WebAssembly klienta:

      Delete (Odstranit):

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

      Přidejte:

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

    V souboru _Host.cshtml:

    • Pages Změňte obor názvů na Client obor názvů projektu. Zástupný {APP NAMESPACE} symbol představuje obor názvů stránek aplikace dárců, které poskytly _Host.cshtml soubor:

      Delete (Odstranit):

      - @namespace {APP NAMESPACE}.Pages
      

      Přidejte:

      @namespace BlazorHosted.Client
      
    • render-mode Aktualizujte pomocnou rutinu značky komponenty tak, aby předkreslila kořenovou App komponentu:WebAssemblyPrerendered

      Delete (Odstranit):

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

      Přidejte:

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

      Důležité

      U koncových bodů ověřování (/authentication/ segment cesty) se nepodporuje předendering. Další informace najdete v tématu Další scénáře zabezpečení ASP.NET Core Blazor WebAssembly.

  5. V mapování koncového Server bodu projektu změňte Program.cszáložní z index.html tohoto souboru na _Host.cshtml stránku:

    Delete (Odstranit):

    - app.MapFallbackToFile("index.html");
    

    Přidejte:

    app.MapFallbackToPage("/_Host");
    
  6. Pokud projekty Client Server během předrenderování používají jednu nebo více běžných služeb, zajistěte registraci služby do metody, kterou lze volat z obou projektů. Další informace najdete v tématu ASP.NET injektáž závislostí jádraBlazor.

  7. Server Spusťte projekt. Hostovaná Blazor WebAssembly aplikace je předem vytvářena projektem Server pro klienty.

Konfigurace pro vkládání Razor součástí do stránek nebo zobrazení

Následující části a příklady pro vložení Razor součástí z ClientBlazor WebAssembly aplikace na stránky nebo zobrazení serverové aplikace vyžadují další konfiguraci.

Projekt Server musí obsahovat následující soubory a složky.

Razor Stránky:

  • Pages/Shared/_Layout.cshtml
  • Pages/Shared/_Layout.cshtml.css
  • Pages/_ViewImports.cshtml
  • Pages/_ViewStart.cshtml

MVC:

  • Views/Shared/_Layout.cshtml
  • Views/Shared/_Layout.cshtml.css
  • Views/_ViewImports.cshtml
  • Views/_ViewStart.cshtml

Důležité

Použití stránky rozložení (_Layout.cshtml) s pomocným pomocníkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (PageTitlesoučást) a další hlavní prvky (HeadContentsoučást). Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

Předchozí soubory lze získat vygenerováním aplikace ze šablon projektu ASP.NET Core pomocí:

  • Nové nástroje pro vytváření projektů v sadě Visual Studio
  • Otevření příkazového prostředí a spuštění dotnet new webapp -o {PROJECT NAME} (Razor Pages) nebo dotnet new mvc -o {PROJECT NAME} (MVC). Možnost -o|--output s hodnotou zástupného symbolu {PROJECT NAME} poskytuje název aplikace a vytvoří pro aplikaci složku.

Aktualizujte obory názvů v importovaném _ViewImports.cshtml souboru tak, aby odpovídaly těm, které používá projekt, který Server soubory přijímá.

Pages/_ViewImports.cshtml (Razor Stránky):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Aktualizujte importovaný soubor rozložení, který je Pages/Shared/_Layout.cshtml určený pro Razor stránky nebo Views/Shared/_Layout.cshtml pro MVC.

Nejprve odstraňte název a šablonu stylů z projektu dárce, který je RPDonor.styles.css v následujícím příkladu. Zástupný {PROJECT NAME} symbol představuje název aplikace projektu dárce.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Client Do souboru rozložení zahrňte styly projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu . Prvek <title> lze aktualizovat současně.

Do obsahu souboru rozložení umístěte následující řádky <head> :

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Importované rozložení obsahuje dvě Home (Index stránka) a Privacy navigační odkazy. Pokud chcete vytvořit odkazy Home na hostované Blazor WebAssembly aplikace, změňte hypertextové odkazy:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

V souboru rozložení MVC:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Aktualizujte název aplikace elementu <footer> . Následující příklad používá název BlazorHostedaplikace:

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

V předchozím příkladu {DATE} zástupný symbol představuje datum autorských práv v aplikaci vygenerované ze Razor šablony projektu Pages nebo MVC.

Pokud chcete, aby Privacy odkaz vedl na privacy stránku (Razor stránky), přidejte privacy do Server projektu stránku.

Pages/Privacy.cshtmlServer v projektu:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Pro zobrazení založené na privacy MVC vytvořte privacy v Server projektu zobrazení.

View/Home/Privacy.cshtmlServer v projektu:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Home V kontroleru aplikace MVC vraťte zobrazení.

Do souboru Controllers/HomeController.cs přidejte následující kód:

public IActionResult Privacy()
{
    return View();
}

Pokud importujete soubory z aplikace dárců, nezapomeňte aktualizovat všechny obory názvů v souborech tak, aby odpovídaly Server projektu (například BlazorHosted.Server).

Import statických prostředků do Server projektu ze složky projektu wwwroot dárce:

  • wwwroot/css složka a obsah
  • wwwroot/js složka a obsah
  • wwwroot/lib složka a obsah

Pokud je projekt dárce vytvořen ze šablony projektu ASP.NET Core a soubory se nezmění, můžete zkopírovat celou wwwroot složku z projektu dárce do Server projektu a odebrat favicon soubor ikony.

Upozorňující

Vyhněte se umístění statického prostředku do složek Client i Server wwwroot do složek. Pokud je v obou složkách stejný soubor, vyvolá se výjimka, protože statický prostředek v každé složce sdílí stejnou webovou kořenovou cestu. Proto hostovat statický prostředek v obou složkách, nikoli v obou wwwroot .

Po přijetí předchozí konfigurace vložte Razor komponenty na stránky nebo zobrazení Server projektu. Pokyny najdete v následujících částech tohoto článku:

  • Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty
  • Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty

Po konfiguraci řešení, včetně další konfigurace, podporuje pomocník značky komponenty dva režimy vykreslování pro vykreslení komponenty z Blazor WebAssembly aplikace na stránce nebo zobrazení:

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky. Abyste se vyhnuli použití úplného oboru názvů pro komponentu Counter pomocí pomocné rutiny značky komponenty ({ASSEMBLY NAME}.Pages.Counter), přidejte @using direktivu pro obor názvů klientského Pages projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V projektu Server Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter1. Předřetěná Counter komponenta je vložena na stránku.

RenderMode nakonfiguruje, jestli komponenta:

  • Je předem vytáhlý na stránku.
  • Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Nastavení podřízeného obsahu prostřednictvím fragmentu vykreslení

Pomocná rutina značky komponenty nepodporuje příjem delegáta RenderFragment pro podřízený obsah (například param-ChildContent="..."). Doporučujeme vytvořit součást (.razor), která odkazuje na komponentuRazor, kterou chcete vykreslit s podřízeným obsahem, který chcete předat, a poté vyvolat Razor komponentu ze stránky nebo zobrazení.

Ujistěte se, že se při publikování neoříznou předem připravené komponenty nejvyšší úrovně.

Pokud pomocník značky komponenty přímo odkazuje na komponentu z knihovny, která je předmětem oříznutí při publikování, může být komponenta během publikování oříznutá, protože na ni nejsou žádné odkazy z kódu aplikace na straně klienta. V důsledku toho komponenta není předem vysunutá a ve výstupu ponechá prázdné místo. Pokud k tomu dojde, požádejte uživatele o zachování komponenty knihovny přidáním DynamicDependency atributu do libovolné třídy v aplikaci na straně klienta. Chcete-li zachovat volanou SomeLibraryComponentToBePreservedkomponentu, přidejte do jakékoli součásti následující:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

Předchozí přístup obvykle není nutný, protože aplikace obvykle předem předrenderuje své komponenty (které nejsou oříznuté), které zase odkazují na komponenty z knihoven (což také způsobuje, že se neoříznou). Explicitně používejte DynamicDependency pouze pro předkreslování komponenty knihovny přímo v případě, že je knihovna předmětem oříznutí.

Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Po konfiguraci řešení, včetně další konfigurace, přidejte do projektu hostovaného Blazor WebAssembly řešení v Program.cs souboru kořenové komponentyClient. V následujícím příkladu Counter je komponenta deklarována jako kořenová komponenta se selektorem CSS, který vybere prvek, id který odpovídá counter-component. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V Program.cs souboru Client projektu přidejte obor názvů pro součásti projektu Razor do horní části souboru:

using BlazorHosted.Client.Pages;

builder Po vytvoření Program.cskomponenty přidejte komponentu Counter jako kořenovou komponentu:

builder.RootComponents.Add<Counter>("#counter-component");

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky.

V projektu Server Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter2. Předřetěná Counter komponenta je vložena na stránku.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Poznámka:

Předchozí příklad vyvolá JSException , pokud Blazor WebAssembly je aplikace předem vyřazena a integrována do Razor aplikace Pages nebo MVC současně s použitím selektoru CSS. Přechod na jednu ze Client součástí projektu Razor nebo přechod na stránku nebo zobrazení Server s vloženou komponentou vyvolá jednu nebo více JSExceptionkomponent .

Toto je normální chování, protože předkožování a integrace Blazor WebAssembly aplikace se směrovatelnými Razor komponentami není kompatibilní s použitím selektorů CSS.

Pokud jste pracovali s příklady v předchozích částech a chcete zobrazit práci selektorem CSS ve vaší ukázkové aplikaci, zakomentujte specifikaci App kořenové komponenty Client souboru projektu Program.cs :

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Přejděte na stránku nebo zobrazení s vloženou Razor komponentou, která používá selektor šablon stylů CSS (například /razorpagescounter2 předchozí příklad). Stránka nebo zobrazení se načte s vloženou komponentou a vložená komponenta funguje podle očekávání.

Trvalý předsekenderovaný stav

Bez trvalého předrenderovaného stavu dojde ke ztrátě stavu použitého při předrenderování a při úplném načtení aplikace se musí znovu vytvořit. Pokud je nějaký stav nastaven asynchronně, uživatelské rozhraní může blikáním blikáním, protože se předsekunuté uživatelské rozhraní nahradí dočasnými zástupnými symboly a pak se znovu plně vykreslí.

Chcete-li tyto problémy vyřešit, Blazor podporuje zachování stavu na předem vyřazené stránce pomocí pomocné rutiny značky stavu trvalé součásti. Přidejte značku <persist-component-state />pomocné rutiny značky uvnitř uzavírací </body> značky.

Pages/_Layout.cshtml:

<body>
    ...

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

Rozhodněte se, jaký stav se má služba zachovat PersistentComponentState . PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace.

Následující příklad je aktualizovaná verze FetchData komponenty v hostované Blazor WebAssembly aplikaci na Blazor základě šablony projektu. Komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předkončování a pak načte stav, který komponentu inicializuje. Pomocné rutiny značky stavu součásti zachová stav komponenty po všech vyvolání komponent.

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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

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

Inicializací komponent se stejným stavem, který se používá během předkončování, se všechny nákladné kroky inicializace spustí pouze jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. V případě předběžného vyřazování v hostované Blazor WebAssembly aplikaci se data zveřejňují v prohlížeči a nesmí obsahovat citlivé a soukromé informace.

Další Blazor WebAssembly zdroje informací

Prerendering může zlepšit optimalizaci vyhledávacího webu (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou můžou vyhledávací weby použít k výpočtu pořadí stránek.

Konfigurace řešení

Konfigurace předběžného nastavení

Nastavení předběžného nastavení hostované Blazor WebAssembly aplikace:

  1. Hostujte Blazor WebAssembly aplikaci v aplikaci ASP.NET Core. Samostatnou Blazor WebAssembly aplikaci můžete přidat do řešení ASP.NET Core nebo můžete použít hostované Blazor WebAssembly aplikace vytvořené ze Blazor WebAssembly šablony projektu s hostovanými možnostmi:

    • Visual Studio: V dialogovém okně Další informace zaškrtněte při vytváření Blazor WebAssembly aplikace zaškrtávací políčko ASP.NET Core Hostované. V příkladech tohoto článku je řešení pojmenováno BlazorHosted.
    • Příkazové prostředí Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (použijte tuto -ho|--hosted možnost). -o|--output {LOCATION} Pomocí možnosti vytvořte složku pro řešení a nastavte obory názvů projektu řešení. V příkladech tohoto článku je řešení pojmenované BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

    V příkladech v tomto článku je BlazorHosted.Clientobor názvů klientského projektu a obor názvů projektu serveru je BlazorHosted.Server.

  2. wwwroot/index.html Odstraňte soubor z Blazor WebAssemblyClient projektu.

  3. Client V projektu odstraňte následující řádek vProgram.cs:

    - builder.RootComponents.Add<App>("#app");
    
  4. Pages/_Host.cshtml Přidejte soubor do Server složky projektuPages. Soubor můžete získat _Host.cshtml z projektu vytvořeného Blazor Server ze šablony pomocí dotnet new blazorserver -o BlazorServer příkazu v příkazovém prostředí ( -o BlazorServer možnost vytvoří složku pro projekt). Po umístění Pages/_Host.cshtml souboru do Server projektu hostovaného Blazor WebAssembly řešení proveďte v souboru následující změny:

    • Zadejte direktivu @using Client pro projekt (například @using BlazorHosted.Client).

    • Aktualizujte odkazy šablon stylů tak, aby odkazy na šablony stylů projektu WebAssembly. V následujícím příkladu je BlazorHosted.Clientobor názvů klientského projektu:

      - <link href="css/site.css" rel="stylesheet" />
      - <link href="_content/BlazorServer/_framework/scoped.styles.css" rel="stylesheet" />
      + <link href="css/app.css" rel="stylesheet" />
      + <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
      

      Poznámka:

      <link> Ponechte prvek, který požaduje šablonu stylů Bootstrap (css/bootstrap/bootstrap.min.css) na místě.

    • render-mode Aktualizujte pomocnou rutinu značky komponenty tak, aby předkreslila kořenovou App komponentu:WebAssemblyPrerendered

      - <component type="typeof(App)" render-mode="ServerPrerendered" />
      + <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
      
    • Blazor Aktualizujte zdroj skriptu tak, aby používal skript na straně Blazor WebAssembly klienta:

      - <script src="_framework/blazor.server.js"></script>
      + <script src="_framework/blazor.webassembly.js"></script>
      
  5. Server V Startup.Configure projektu změňte náhradní soubor ze index.html souboru na _Host.cshtml stránku.

    Startup.cs:

    - endpoints.MapFallbackToFile("index.html");
    + endpoints.MapFallbackToPage("/_Host");
    
  6. Pokud projekty Client Server během předrenderování používají jednu nebo více běžných služeb, zajistěte registraci služby do metody, kterou lze volat z obou projektů. Další informace najdete v tématu ASP.NET injektáž závislostí jádraBlazor.

  7. Server Spusťte projekt. Hostovaná Blazor WebAssembly aplikace je předem vytvářena projektem Server pro klienty.

Konfigurace pro vkládání Razor součástí do stránek nebo zobrazení

Následující části a příklady v tomto článku pro vkládání Razor součástí klientské Blazor WebAssembly aplikace na stránky nebo zobrazení serverové aplikace vyžadují další konfiguraci.

V projektu použijte výchozí Razor soubor Server rozložení Pages nebo MVC. Projekt Server musí obsahovat následující soubory a složky.

Razor Stránky:

  • Pages/Shared/_Layout.cshtml
  • Pages/_ViewImports.cshtml
  • Pages/_ViewStart.cshtml

MVC:

  • Views/Shared/_Layout.cshtml
  • Views/_ViewImports.cshtml
  • Views/_ViewStart.cshtml

Získejte předchozí soubory z aplikace vytvořené ze Razor šablony projektu Pages nebo MVC. Další informace najdete v tématu Kurz: Začínáme se stránkami Razor v ASP.NET Core nebo Začínáme s ASP.NET Core MVC.

Aktualizujte obory názvů v importovaném _ViewImports.cshtml souboru tak, aby odpovídaly těm, které používá projekt, který Server soubory přijímá.

Aktualizujte importovaný soubor rozložení (_Layout.cshtml) tak, aby zahrnoval Client styly projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu . Prvek <title> lze aktualizovat současně.

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-   <title>@ViewData["Title"] - DonorProject</title>
+   <title>@ViewData["Title"] - BlazorHosted</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
+   <link href="css/app.css" rel="stylesheet" />
+   <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>

Importované rozložení obsahuje Home a Privacy navigační odkazy. Pokud chcete vytvořit Home odkaz na hostované Blazor WebAssembly aplikace, změňte hypertextový odkaz:

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

V souboru rozložení MVC:

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Pokud chcete, aby Privacy odkaz vedl na privacy stránku, přidejte privacy do Server projektu stránku.

Pages/Privacy.cshtmlServer v projektu:

@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}

<h1>Privacy Policy</h1>

Pokud je upřednostňované zobrazení založené na privacy MVC, vytvořte privacy v Server projektu zobrazení.

View/Home/Privacy.cshtml:

@{
    ViewData["Title"] = "Privacy Policy";
}

<h1>@ViewData["Title"]</h1>

Home V kontroleru vraťte zobrazení.

Controllers/HomeController.cs:

public IActionResult Privacy()
{
    return View();
}

Import statických prostředků do Server projektu ze složky projektu wwwroot dárce:

  • wwwroot/css složka a obsah
  • wwwroot/js složka a obsah
  • wwwroot/lib složka a obsah

Pokud je projekt dárce vytvořen ze šablony projektu ASP.NET Core a soubory se nezmění, můžete zkopírovat celou wwwroot složku z projektu dárce do Server projektu a odebrat favicon soubor ikony.

Upozorňující

Vyhněte se umístění statického prostředku do složek Client i Server wwwroot do složek. Pokud je v obou složkách stejný soubor, vyvolá se výjimka, protože statický prostředek v každé složce sdílí stejnou webovou kořenovou cestu. Proto hostovat statický prostředek v obou složkách, nikoli v obou wwwroot .

Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty

Po konfiguraci řešení, včetně další konfigurace, podporuje pomocník značky komponenty dva režimy vykreslování pro vykreslení komponenty z Blazor WebAssembly aplikace na stránce nebo zobrazení:

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky. Abyste se vyhnuli použití úplného oboru názvů pro komponentu Counter pomocí pomocné rutiny značky komponenty ({ASSEMBLY NAME}.Pages.Counter), přidejte @using direktivu pro obor názvů klientského Pages projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V projektu Server Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter1. Předřetěná Counter komponenta je vložena na stránku.

RenderMode nakonfiguruje, jestli komponenta:

  • Je předem vytáhlý na stránku.
  • Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Po konfiguraci řešení, včetně další konfigurace, přidejte do projektu hostovaného Blazor WebAssembly řešení kořenové komponenty Client v Program.cs. V následujícím příkladu Counter je komponenta deklarována jako kořenová komponenta se selektorem CSS, který vybere prvek, id který odpovídá counter-component. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

Client V Program.cs projektu přidejte obor názvů pro komponenty projektu Razor do horní části souboru:

using BlazorHosted.Client.Pages;

builder Po vytvoření Program.cskomponenty přidejte komponentu Counter jako kořenovou komponentu:

builder.RootComponents.Add<Counter>("#counter-component");

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky.

V projektu Server Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Spusťte projekt. Přejděte na Razor stránku na adrese /razorpagescounter2. Předřetěná Counter komponenta je vložena na stránku.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Poznámka:

Předchozí příklad vyvolá JSException výjimku, pokud Blazor WebAssembly je aplikace předem vyúsněná a integrovaná do Razor aplikace Pages nebo MVC současně s selektorem CSS. Přechod na jednu z Client komponent projektu Razor vyvolá následující výjimku:

Microsoft.JSInterop.JSException: Nelze najít žádný selektor odpovídající elementu "#counter-component".

Toto je normální chování, protože předkožování a integrace Blazor WebAssembly aplikace se směrovatelnými Razor komponentami není kompatibilní s použitím selektorů CSS.

Další Blazor WebAssembly zdroje informací

Razor Integrace komponent do Razor aplikací Pages nebo MVC v hostované Blazor WebAssemblyřešení se podporuje v ASP.NET Core v .NET 5 nebo novějším. Vyberte verzi tohoto článku pro .NET 5 nebo novější.