ASP.NET Core Blazor úsek

V tomto článku se dozvíte, jak spravovat směrování požadavků a jak používat NavLink komponentu k vytváření navigačních odkazů v Blazor aplikacích.

Šablony směrování

Tato Router součást umožňuje směrování na Razor komponenty v Blazor aplikaci. RouterKomponenta se používá v App součásti Blazor aplikace.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Když Razor .razor je zkompilována součást () s @page direktivou , je k dispozici vygenerovaná třída komponenty, která RouteAttribute Určuje šablonu směrování komponenty.

Po spuštění aplikace se v sestavení zadaném jako směrovač AppAssembly vyhledá informace o trasách pro součásti aplikace, které mají RouteAttribute .

Za běhu RouteView komponenty:

• Přijímá RouteData od Router spolu s parametry směrování.
• Vykreslí určenou komponentu pomocí jejího rozložení, včetně všech dalších vnořených rozložení.

Volitelně můžete zadat DefaultLayout parametr s třídou layout pro součásti, které neurčují rozložení pomocí @layout direktivy. Blazor Šablony projektu rozhraní určují MainLayout komponentu ( Shared/MainLayout.razor ) jako výchozí rozložení aplikace. Další informace o rozložení najdete v tématu BlazorASP.NET Core Rozložení .

Komponenty podporují více šablon směrování s použitím více @page direktiv. Následující příklad načte komponentu na požadavky pro /BlazorRoute a /DifferentBlazorRoute .

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

Zaměření prvku na navigaci

Použijte FocusOnNavigate komponentu pro nastavení fokusu uživatelského rozhraní na prvek založený na selektoru šablon stylů CSS po přechodu z jedné stránky na druhou. Komponentu, kterou používá, můžete zobrazit pomocí FocusOnNavigate App komponenty aplikace vygenerované ze Blazor šablony projektu.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Když předchozí Router Komponenta přejde na novou stránku, FocusOnNavigate komponenta nastaví fokus na záhlaví nejvyšší úrovně stránky ( <h1> ). Jedná se o běžnou strategii pro zajištění, že při použití čtečky obrazovky jsou oznámeny navigační stránky.

Poskytnutí vlastního obsahu, když se nenalezne obsah

RouterKomponenta umožňuje aplikaci zadat vlastní obsah, pokud se pro požadovanou trasu nenajde obsah.

V rámci App komponenty nastavte vlastní obsah v Router NotFound šabloně komponenty.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Libovolné položky jsou podporovány jako obsah značek, jako jsou například <NotFound> jiné interaktivní komponenty. Chcete-li použít výchozí rozložení NotFound obsahu, přečtěte si téma BlazorASP.NET Core Rozložení .

Směrování na součásti z více sestavení

Použijte AdditionalAssemblies parametr k určení dalších sestavení, Router která má součást při hledání směrovatelných komponent zvážit. Další sestavení jsou prohledávána kromě sestavení určeného pro AppAssembly . V následujícím příkladu Component1 je směrovatelný komponenta definovaná v odkazované knihovně tříd komponent. Následující AdditionalAssemblies příklad vede k podpoře směrování pro Component1 .

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Parametry směrování

Směrovač používá parametry směrování k naplnění odpovídajících parametrů komponenty se stejným názvem. V názvech parametrů trasy se nerozlišují malá a velká písmena. V následujícím příkladu text parametr přiřadí hodnotu segmentu směrování do Text Vlastnosti komponenty. Po podání žádosti se /RouteParameter/amazing <h1> obsah značky vykreslí jako Blazor is amazing! .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }
}

Volitelné parametry jsou podporovány. V následujícím příkladu text volitelné parametr přiřadí hodnotu segmentu směrování do Text Vlastnosti komponenty. Pokud segment není k dispozici, hodnota Text je nastavena na fantastic .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Místo toho použijte, pokud chcete, aby OnParametersSet OnInitialized{Async} navigace aplikace byla stejná jako jiná volitelná hodnota parametru. Na základě předchozího příkladu použijte, OnParametersSet když má uživatel být schopný přejít z na /RouteParameter /RouteParameter/amazing nebo z /RouteParameter/amazing na /RouteParameter :

protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}

Omezení trasy

Omezení trasy vynutilo typ shodný s typem pro segment směrování do součásti.

V následujícím příkladu trasa k User součásti odpovídá pouze v případě, že:

• IdV adrese URL požadavku je přítomen segment směrování.
• IdSegment je celočíselný typ ( int ).

Pages/User.razor:

@page "/user/{Id:int}"

<h1>User Id: @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

K dispozici jsou omezení tras uvedená v následující tabulce. Pro omezení trasy, která odpovídají neutrální jazykové verzi, se podívejte na upozornění pod tabulkou, kde najdete další informace.

Omezení směrování také fungují s nepovinnými parametry. V následujícím příkladu je Id vyžadován, ale Option je to volitelný logický parametr trasy.

Pages/User.razor:

@page "/user/{Id:int}/{Option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

@code {
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}

Směrování s adresami URL, které obsahují tečky

U hostovaných Blazor WebAssembly a Blazor Server aplikací předpokládá šablona výchozí trasy na straně serveru, že pokud poslední segment adresy URL požadavku obsahuje tečku ( . ), kterou soubor požaduje. Například adresa URL https://localhost.com:5001/example/some.thing je interpretována směrovačem jako požadavek na soubor s názvem some.thing . Bez další konfigurace aplikace vrátí odpověď na 404, která nebyla nalezena , pokud some.thing byla určena k směrování na komponentu s @page direktivou a some.thing hodnotou parametru trasy. Aby bylo možné použít trasu s jedním nebo více parametry, které obsahují tečku, musí aplikace nakonfigurovat trasu s vlastní šablonou.

Vezměte v úvahu následující Example součást, která může přijmout parametr trasy z posledního segmentu adresy URL.

Pages/Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

@code {
    [Parameter]
    public string? Param { get; set; }
}

Pokud chcete Server aplikaci hostovaného řešení povolit Blazor WebAssembly , aby směrovala požadavek s tečkou v param parametru Route, přidejte šablonu trasy záložního souboru s volitelným parametrem v Program.cs :

app.MapFallbackToFile("/example/{param?}", "index.html");

Pokud chcete Blazor Server aplikaci nakonfigurovat tak, aby směrovala požadavek s tečkou v param parametru Route, přidejte šablonu trasy záložní stránky s volitelným parametrem v Program.cs :

app.MapFallbackToPage("/example/{param?}", "/_Host");

Další informace naleznete v tématu Směrování v ASP.NET Core.

Catch – všechny parametry tras

Catch – všechny parametry tras, které zachycují cesty mezi více hranicemi složek, jsou podporovány v součástech.

Zachytit – všechny parametry tras jsou:

• Název se shoduje s názvem segmentu směrování. Při pojmenovávání nezáleží na velikosti písmen.
• stringTyp. Rozhraní neposkytuje automatické přetypování.
• Na konci adresy URL.

Pages/CatchAll.razor:

@page "/catch-all/{*pageRoute}"

@code {
    [Parameter]
    public string? PageRoute { get; set; }
}

Pro adresu URL /catch-all/this/is/a/test s šablonou směrování pro /catch-all/{*pageRoute} PageRoute je hodnota nastavená na this/is/a/test .

Lomítka a segmenty zachycené cesty jsou Dekódovatelné. Pro šablonu trasy je /catch-all/{*pageRoute} výsledkem adresa URL /catch-all/this/is/a%2Ftest%2A this/is/a/test* .

Identifikátory URI a pomocníka pro stav navigace

Slouží NavigationManager ke správě identifikátorů URI a navigace v kódu jazyka C#. NavigationManager poskytuje událost a metody uvedené v následující tabulce.

Změny umístění

Pro LocationChanged událost poskytuje LocationChangedEventArgs následující informace o událostech navigace:

• Location: Adresa URL nového umístění.
• IsNavigationIntercepted: Pokud true , Blazor zachycuje navigaci z prohlížeče. Pokud false , NavigationManager.NavigateTo způsobilo to navigaci.

Následující komponenta:

• Přejde na komponentu Counter aplikace ( Pages/Counter.razor ), když je tlačítko vybráno pomocí NavigateTo .
• Zpracovává událost změny umístění přihlášením k odběru NavigationManager.LocationChanged .

  • Metoda je při volání architekturou HandleLocationChanged Dispose odhoována. Zrušení volání metody umožňuje uvolnění paměti komponenty.

  • Implementace protokolovacího nástroje protokoluje při výběru tlačítka následující informace:

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager NavigationManager

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Další informace o vyřazení komponent najdete v tématu RazorASP.NET Core životní cyklus komponenty .

Řetězce dotazů

Pomocí [SupplyParameterFromQuery] atributu s [Parameter] atributem můžete určit, že parametr komponenty směrovatelné komponenty může pocovat z řetězce dotazu.

Parametry součástí zadané z řetězce dotazu podporují následující typy:

• bool, DateTime, decimal, double, float, Guid, int, long, string.
• Varianty předchozích typů s možnou hodnotou null (s výjimkou , které nemají variantu s možnou string hodnotou null).
• Pole předchozích typů bez ohledu na to, jestli jde o pole s možnou hodnotou null nebo s možnou hodnotou null.

Správné formátování invariantní pro jazykovou verzi se použije pro daný typ ( CultureInfo.InvariantCulture ).

Zadejte vlastnost [SupplyParameterFromQuery] atributu Name pro použití názvu parametru dotazu, který se liší od názvu parametru součásti. V následujícím příkladu je název parametru komponenty v jazyce C# {COMPONENT PARAMETER NAME} . Pro zástupný symbol je zadaný jiný název {QUERY PARAMETER NAME} parametru dotazu:

[Parameter]
[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
public string {COMPONENT PARAMETER NAME} { get; set; }

V následujícím příkladu s adresou URL /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman :

• Vlastnost Filter se překládá na scifi stars .
• Vlastnost Page se překládá na 3 .
• Pole se vyplní z parametrů dotazu s názvem ( ) a Stars star Name = "star" překládá se na LeVar Burton a Gary Oldman .

Pages/Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

<p>Assignees:</p>

<ul>
    @foreach (var name in Stars)
    {
        <li>@name</li>
    }
</ul>

@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public string Filter { get; set; }

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[] Stars { get; set; }
}

Pomocí NavigationManager.GetUriWithQueryParameter můžete přidat, změnit nebo odebrat jeden nebo více parametrů dotazu na aktuální adrese URL:

@inject NavigationManager NavigationManager

...

NavigationManager.GetUriWithQueryParameter("{NAME}", {VALUE})

Pro předchozí příklad:

• Zástupný {NAME} symbol určuje název parametru dotazu. Zástupný {VALUE} symbol určuje hodnotu jako podporovaný typ. Podporované typy jsou uvedené dále v této části.
• Vrátí se řetězec, který se rovná aktuální adrese URL s jedním parametrem:
  • Přidá se, pokud název parametru dotazu v aktuální adrese URL neexistuje.
  • Aktualizace na zadanou hodnotu, pokud parametr dotazu existuje v aktuální adrese URL
  • Odebrání, pokud je typ zadané hodnoty s možnou hodnotou null a hodnota je null .
• Správné formátování invariantní pro jazykovou verzi se použije pro daný typ ( CultureInfo.InvariantCulture ).
• Název a hodnota parametru dotazu jsou zakódované do adresy URL.
• Pokud existuje více instancí typu, nahradí se všechny hodnoty s odpovídajícím názvem parametru dotazu.

Voláním NavigationManager.GetUriWithQueryParameters metody vytvoříte identifikátor URI vytvořený pomocí více Uri přidaných, aktualizovaných nebo odebraných parametrů. Pro každou hodnotu architektura používá k určení typu modulu runtime pro každý parametr dotazu a vybere správné formátování value?.GetType() invariantní pro jazykovou verzi. Rozhraní vyvolá chybu pro nepodporované typy.

@inject NavigationManager NavigationManager

...

NavigationManager.GetUriWithQueryParameters({PARAMETERS})

Zástupný {PARAMETERS} symbol je IReadOnlyDictionary<string, object> .

Předáním řetězce identifikátoru URI GetUriWithQueryParameters do vygenerování nového identifikátoru URI ze poskytnutého identifikátoru URI s více přidaných, aktualizovaných nebo odebraných parametrů. Pro každou hodnotu architektura používá k určení typu modulu runtime pro každý parametr dotazu a vybere správné formátování value?.GetType() invariantní pro jazykovou verzi. Rozhraní vyvolá chybu pro nepodporované typy. Podporované typy jsou uvedené dále v této části.

@inject NavigationManager NavigationManager

...

NavigationManager.GetUriWithQueryParameters("{URI}", {PARAMETERS})

• Zástupný symbol je identifikátor URI s řetězcem dotazu {URI} nebo bez něj.
• Zástupný {PARAMETERS} symbol je IReadOnlyDictionary<string, object> .

Podporované typy jsou stejné jako podporované typy pro omezení tras:

• bool
• DateTime
• decimal
• double
• float
• Guid
• int
• long
• string

Mezi podporované typy patří:

• Varianty předchozích typů s možnou hodnotou null (s výjimkou , které nemají variantu s možnou string hodnotou null).
• Pole předchozích typů bez ohledu na to, jestli jde o pole s možnou hodnotou null nebo s možnou hodnotou null.

Nahrazení hodnoty parametru dotazu, pokud existuje parametr

NavigationManager.GetUriWithQueryParameter("full name", "Morena Baccarin")

Pokud parametr neexistuje, připojte parametr dotazu a hodnotu.

NavigationManager.GetUriWithQueryParameter("name", "Morena Baccarin")

Odebrání parametru dotazu, pokud je hodnota parametru null

NavigationManager.GetUriWithQueryParameter("full name", (string)null)

Přidání, aktualizace a odebrání parametrů dotazu

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

• name se odebere, pokud existuje.
• age se přidá s hodnotou 25 ( ), pokud není k int dispozici. Pokud existuje, age aktualizuje se na hodnotu 25 .
• eye color se přidá nebo aktualizuje na hodnotu green .

NavigationManager.GetUriWithQueryParameters(
    new Dictionary<string, object>
    {
        ["name"] = null,
        ["age"] = (int?)25,
        ["eye color"] = "green"
    })

Podpora vyčíslitelných hodnot

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

• full name se přidá nebo aktualizuje na Morena Baccarin jednu hodnotu.
• ping Parametry se přidávají nebo nahrazují za 35 16 , a 87 240 .

NavigationManager.GetUriWithQueryParameters(
    new Dictionary<string, object>
    {
        ["full name"] = "Morena Baccarin",
        ["ping"] = new int?[] { 35, 16, null, 87, 240 }
    })

Navigace s přidaný nebo upraveným řetězcem dotazu

Pokud chcete přejít pomocí přidaného nebo upraveného řetězce dotazu, předejte vygenerované adrese URL NavigateTo do .

Následující příklad volá:

• GetUriWithQueryParameter pro přidání nebo nahrazení name parametru dotazu pomocí hodnoty Morena Baccarin .
• Volání NavigateTo pro aktivaci navigace na novou adresu URL

NavigationManager.NavigateTo(
    NavigationManager.GetUriWithQueryParameter("name", "Morena Baccarin"));

Interakce uživatele s <Navigating> obsahem

Komponenta Router může uživateli indikovat, že dochází k přechodu stránky.

Na začátek komponenty App ( App.razor ) přidejte @using direktivu pro obor názvů Microsoft.AspNetCore.Components.Routing :

@using Microsoft.AspNetCore.Components.Routing

Přidejte <Navigating> do komponenty značku s přirážkou, která se zobrazí během událostí přechodu stránky. Další informace najdete v tématu Navigating (dokumentace k rozhraní API).

V obsahu prvku směrovače ( <Router>...</Router> ) App komponenty ( App.razor ):

<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

Příklad, který používá vlastnost Navigating , najdete v tématu Opožděné načítání sestavení v ASP.NET Core Blazor WebAssembly .

Zpracování asynchronních navigačních událostí pomocí OnNavigateAsync

Komponenta Router podporuje OnNavigateAsync funkci. Obslužná OnNavigateAsync rutina se vyvolá, když uživatel:

• Poprvé navštíví trasu tak, že na ní přejde přímo v prohlížeči.
• Přejde na novou trasu pomocí odkazu nebo NavigationManager.NavigateTo vyvolání.

V App součásti ( App.razor ):

<Router AppAssembly="@typeof(Program).Assembly" 
    OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

Příklad, který používá OnNavigateAsync , naleznete v tématu Opožděné načítání sestavení v ASP.NET Core Blazor WebAssembly .

Při předvykreslování na serveru v Blazor Server aplikaci nebo v hostované Blazor WebAssembly aplikaci OnNavigateAsync se spustí dvakrát:

• Jakmile je požadovaná součást koncového bodu zpočátku vykreslena staticky.
• Druhý čas, kdy prohlížeč vykreslí součást koncového bodu.

Chcete-li zabránit tomu, aby se kód vývojářů prováděl OnNavigateAsync dvakrát, App Komponenta může uložit NavigationContext pro použití v OnAfterRender/OnAfterRenderAsync , kde firstRender lze zkontrolovat. Další informace najdete v tématu zjištění, kdy se aplikace předchází v článku o Blazor životním cyklu .

Zpracovat zrušení v OnNavigateAsync

NavigationContextObjekt předaný OnNavigateAsync zpětnému volání obsahuje CancellationToken sadu, která je nastavena, když dojde k nové události navigace. OnNavigateAsyncZpětné volání musí vyvolat, když je tento token zrušení nastaven tak, aby se nepokračovalo OnNavigateAsync v provádění zpětného volání u zastaralé navigace.

Pokud uživatel přejde na koncový bod, ale okamžitě přejde na nový koncový bod, aplikace by neměla pokračovat ve spouštění OnNavigateAsync zpětného volání pro první koncový bod.

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

• Token zrušení se předává do volání PostAsJsonAsync , které může zrušit příspěvek, pokud uživatel přejde mimo /about koncový bod.
• Token zrušení se nastaví během operace předběžného načtení produktu, pokud uživatel přejde mimo /store koncový bod.

App.razor:

@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="@typeof(Program).Assembly" 
    OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats = { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = [345, 789, 135, 689];

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

NavLink a NavMenu komponenty

Použít NavLink komponentu namísto prvků hypertextového odkazu HTML ( <a> ) při vytváření navigačních odkazů. NavLinkKomponenta se chová jako <a> element s tím rozdílem, že přepíná active třídu CSS na základě toho, zda href odpovídá aktuální adrese URL. activeTřída pomáhá uživateli pochopit, která stránka je aktivní stránkou mezi zobrazenými navigačními odkazy. Volitelně můžete přiřadit název třídy šablony stylů CSS k NavLink.ActiveClass použití vlastní třídy CSS pro vykreslený odkaz, když aktuální trasa odpovídá href .

Existují dvě NavLinkMatch Možnosti, které lze přiřadit k Match atributu <NavLink> elementu:

• NavLinkMatch.All: NavLink Je aktivní, pokud odpovídá celé aktuální adrese URL.
• NavLinkMatch.Prefix (výchozí): NavLink je aktivní, pokud odpovídá libovolné PŘEDPONĚ aktuální adresy URL.

V předchozím příkladu Home NavLink href="" odpovídá adresa URL domů a přijímá pouze active třídu šablony stylů CSS ve výchozí základní cestě URL aplikace (například https://localhost:5001/ ). Druhá NavLink Získá třídu, active když uživatel navštíví libovolnou adresu URL s component předponou (například https://localhost:5001/component a https://localhost:5001/component/another-segment ).

Další NavLink atributy komponenty jsou předány do vykreslené značky ukotvení. V následujícím příkladu NavLink Komponenta zahrnuje target atribut:

<NavLink href="example-page" target="_blank">Example page</NavLink>

Vykresluje se následující kód HTML:

<a href="example-page" target="_blank">Example page</a>

@for (int c = 0; c < 10; c++)
{
    var current = c;
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @current
        </NavLink>
    </li>
}

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

integrace směrování ASP.NET Core endpoint

Tato část se vztahuje pouze na Blazor Server aplikace.

Blazor Serverje integrován do směrování koncového bodu ASP.NET Core. aplikace ASP.NET Core je nakonfigurovaná tak, aby přijímala příchozí připojení pro interaktivní komponenty MapBlazorHub v Program.cs :

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

Typickou konfigurací je směrování všech požadavků na Razor stránku, která funguje jako hostitel pro součást aplikace na straně serveru Blazor Server . Podle konvence je stránka hostitele obvykle pojmenována _Host.cshtml ve Pages složce aplikace.

Trasa zadaná v hostitelském souboru se nazývá záložní trasa , protože v porovnání s trasou funguje s nízkou prioritou. Záložní trasa se používá v případě, že se jiné trasy neshodují. Tím umožníte, aby aplikace používala jiné řadiče a stránky bez toho, aby v aplikaci narušila směrování součástí Blazor Server .

V tomto článku se dozvíte, jak spravovat směrování požadavků a jak používat NavLink komponentu k vytváření navigačních odkazů v Blazor aplikacích.

Šablony směrování

Tato Router součást umožňuje směrování na Razor komponenty v Blazor aplikaci. RouterKomponenta se používá v App součásti Blazor aplikace.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Když Razor .razor je zkompilována součást () s @page direktivou , je k dispozici vygenerovaná třída komponenty, která RouteAttribute Určuje šablonu směrování komponenty.

Po spuštění aplikace se v sestavení zadaném jako směrovač AppAssembly vyhledá informace o trasách pro součásti aplikace, které mají RouteAttribute .

Za běhu RouteView komponenty:

• Přijímá RouteData od Router spolu s parametry směrování.
• Vykreslí určenou komponentu pomocí jejího rozložení, včetně všech dalších vnořených rozložení.

Volitelně můžete zadat DefaultLayout parametr s třídou layout pro součásti, které neurčují rozložení pomocí @layout direktivy. Blazor Šablony projektu rozhraní určují MainLayout komponentu ( Shared/MainLayout.razor ) jako výchozí rozložení aplikace. Další informace o rozložení najdete v tématu BlazorASP.NET Core Rozložení .

Komponenty podporují více šablon směrování s použitím více @page direktiv. Následující příklad načte komponentu na požadavky pro /BlazorRoute a /DifferentBlazorRoute .

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

RouterNekomunikuje s hodnotami řetězce dotazu. Chcete-li pracovat s řetězci dotazu, přečtěte si část řetězce dotazu a parametry Parse .

Poskytnutí vlastního obsahu, když se nenalezne obsah

RouterKomponenta umožňuje aplikaci zadat vlastní obsah, pokud se pro požadovanou trasu nenajde obsah.

V rámci App komponenty nastavte vlastní obsah v Router NotFound šabloně komponenty.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Libovolné položky jsou podporovány jako obsah značek, jako jsou například <NotFound> jiné interaktivní komponenty. Chcete-li použít výchozí rozložení NotFound obsahu, přečtěte si téma BlazorASP.NET Core Rozložení .

Směrování na součásti z více sestavení

Použijte AdditionalAssemblies parametr k určení dalších sestavení, Router která má součást při hledání směrovatelných komponent zvážit. Další sestavení jsou prohledávána kromě sestavení určeného pro AppAssembly . V následujícím příkladu Component1 je směrovatelný komponenta definovaná v odkazované knihovně tříd komponent. Následující AdditionalAssemblies příklad vede k podpoře směrování pro Component1 .

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Parametry směrování

Směrovač používá parametry směrování k naplnění odpovídajících parametrů komponenty se stejným názvem. V názvech parametrů trasy se nerozlišují malá a velká písmena. V následujícím příkladu text parametr přiřadí hodnotu segmentu směrování do Text Vlastnosti komponenty. Po podání žádosti se /RouteParameter/amazing <h1> obsah značky vykreslí jako Blazor is amazing! .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }
}

Volitelné parametry jsou podporovány. V následujícím příkladu text volitelné parametr přiřadí hodnotu segmentu směrování do Text Vlastnosti komponenty. Pokud segment není k dispozici, hodnota Text je nastavena na fantastic .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Místo toho použijte, pokud chcete, aby OnParametersSet OnInitialized{Async} navigace aplikace byla stejná jako jiná volitelná hodnota parametru. Na základě předchozího příkladu použijte, OnParametersSet když má uživatel být schopný přejít z na /RouteParameter /RouteParameter/amazing nebo z /RouteParameter/amazing na /RouteParameter :

protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}

Omezení trasy

Omezení trasy vynutilo typ shodný s typem pro segment směrování do součásti.

V následujícím příkladu trasa k User součásti odpovídá pouze v případě, že:

• IdV adrese URL požadavku je přítomen segment směrování.
• IdSegment je celočíselný typ ( int ).

Pages/User.razor:

@page "/user/{Id:int}"

<h1>User Id: @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

K dispozici jsou omezení tras uvedená v následující tabulce. Pro omezení trasy, která odpovídají neutrální jazykové verzi, se podívejte na upozornění pod tabulkou, kde najdete další informace.

Omezení tras fungují také s volitelnými parametry. V následujícím příkladu je Id vyžadován parametr , ale je Option volitelným logickým parametrem trasy.

Pages/User.razor:

@page "/user/{Id:int}/{Option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

@code {
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}

Směrování s adresami URL, které obsahují tečky

U hostovaných aplikací a výchozí šablona trasy na straně serveru předpokládá, že pokud poslední segment adresy URL požadavku obsahuje tečku Blazor WebAssembly ( ), je požadován Blazor Server . soubor. Například adresa URL https://localhost.com:5001/example/some.thing je směrovačem interpretována jako požadavek na soubor s názvem some.thing . Bez další konfigurace aplikace vrátí odpověď 404 – Nenašlé, pokud se měla směrovat na komponentu s direktivou a je to some.thing hodnota @page some.thing parametru trasy. Pokud chcete použít trasu s jedním nebo více parametry, které obsahují tečku, musí aplikace nakonfigurovat trasu s vlastní šablonou.

Vezměte v úvahu následující komponentu, která může přijímat parametr trasy Example z posledního segmentu adresy URL.

Pages/Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

@code {
    [Parameter]
    public string Param { get; set; }
}

Pokud chcete aplikaci hostovaného řešení povolit směrování požadavku pomocí tečky v parametru trasy, přidejte šablonu trasy záložního souboru s volitelným Server Blazor WebAssembly param parametrem v Startup.Configure .

Startup.cs:

endpoints.MapFallbackToFile("/example/{param?}", "index.html");

Pokud chcete nakonfigurovat aplikaci pro směrování požadavku pomocí tečky v parametru trasy, přidejte šablonu trasy záložní stránky s volitelným Blazor Server param parametrem v Startup.Configure .

Startup.cs:

endpoints.MapFallbackToPage("/example/{param?}", "/_Host");

Další informace naleznete v tématu Směrování v ASP.NET Core.

Zachytání všech parametrů trasy

Komponenty podporují zachytávání všech parametrů tras, které zachycují cesty přes hranice více složek.

Zachytáte všechny parametry trasy:

• Pojmenovaný tak, aby odpovídal názvu segmentu trasy. Při pojmenování se rozlišují malá a velká písmena.
• stringTyp. Rozhraní neposkytuje automatické přetypování.
• Na konci adresy URL.

Pages/CatchAll.razor:

@page "/catch-all/{*pageRoute}"

@code {
    [Parameter]
    public string PageRoute { get; set; }
}

Pro adresu URL /catch-all/this/is/a/test se šablonou trasy /catch-all/{*pageRoute} je hodnota PageRoute nastavená na this/is/a/test .

Lomítka a segmenty zachycené cesty jsou dekódovány. Pro šablonu trasy /catch-all/{*pageRoute} pro je výsledkem adresy URL hodnota /catch-all/this/is/a%2Ftest%2A this/is/a/test* .

Pomocná tlačítka identifikátoru URI a stavu navigace

Slouží NavigationManager ke správě identifikátorů URI a navigace v kódu jazyka C#. NavigationManager poskytuje událost a metody uvedené v následující tabulce.

Pro LocationChanged událost poskytuje LocationChangedEventArgs následující informace o událostech navigace:

• Location: Adresa URL nového umístění.
• IsNavigationIntercepted: Pokud true , Blazor zachycuje navigaci z prohlížeče. Pokud false , NavigationManager.NavigateTo způsobilo to navigaci.

Následující komponenta:

• Přejde na komponentu Counter aplikace ( Pages/Counter.razor ), když je tlačítko vybráno pomocí NavigateTo .
• Zpracovává událost změny umístění přihlášením k odběru NavigationManager.LocationChanged .

  • Metoda je při volání rozhraním HandleLocationChanged Dispose odhoována. Zrušení volání metody umožňuje uvolnění paměti komponenty.

  • Implementace protokolovacího nástroje protokoluje při výběru tlačítka následující informace:

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager NavigationManager

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Další informace o vyřazení komponent najdete v tématu RazorASP.NET Core životní cyklus komponenty .

Řetězec dotazu a parametry analýzy

Řetězec dotazu požadavku se získá z NavigationManager.Uri vlastnosti :

@inject NavigationManager NavigationManager

...

var query = new Uri(NavigationManager.Uri).Query;

Při analýze parametrů řetězce dotazu je jedním z přístupů použití s URLSearchParams interoperabilitou JavaScriptu (JS):

export createQueryString = (string queryString) => new URLSearchParams(queryString);

Další informace o izolaci JavaScriptu pomocí modulů JavaScriptu najdete v tématu Volání funkcí jazyka JavaScript z metod .NET v ASP.NET Core Blazor .

Interakce uživatele s <Navigating> obsahem

Komponenta Router může uživateli indikovat, že dochází k přechodu stránky.

Na začátek komponenty App ( App.razor ) přidejte @using direktivu pro obor názvů Microsoft.AspNetCore.Components.Routing :

@using Microsoft.AspNetCore.Components.Routing

Přidejte <Navigating> do komponenty značku s přirážkou, která se zobrazí během událostí přechodu stránky. Další informace najdete v tématu Navigating (dokumentace k rozhraní API).

V obsahu prvku směrovače ( <Router>...</Router> ) App komponenty ( App.razor ):

<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

Příklad, který používá vlastnost Navigating , najdete v tématu Opožděné načítání sestavení v ASP.NET Core Blazor WebAssembly .

Zpracování asynchronních navigačních událostí pomocí OnNavigateAsync

Komponenta Router podporuje OnNavigateAsync funkci. Obslužná OnNavigateAsync rutina se vyvolá, když uživatel:

• Poprvé navštíví trasu tak, že na ní přejde přímo v prohlížeči.
• Přejde na novou trasu pomocí odkazu nebo NavigationManager.NavigateTo vyvolání.

V App komponentě ( App.razor ):

<Router AppAssembly="@typeof(Program).Assembly" 
    OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

Příklad, který používá OnNavigateAsync , najdete v tématu Opožděné načítání sestavení v ASP.NET Core Blazor WebAssembly .

Při předběžném vykreslení na serveru v Blazor Server aplikaci nebo hostované Blazor WebAssembly aplikaci se spustí OnNavigateAsync dvakrát:

• Jednou se požadovaná komponenta koncového bodu zpočátku staticky vykreslí.
• Podruhé, když prohlížeč vykreslí komponentu koncového bodu.

Pokud chcete zabránit tomu, aby se vývojářský kód v systému skládal OnNavigateAsync dvakrát, může komponenta uložit pro použití v App , kde je možné zkontrolovat NavigationContext OnAfterRender/OnAfterRenderAsync firstRender . Další informace najdete v článku o tom, kdy se aplikace prerenderuje, v Blazor článku o životním cyklu.

Zpracování zrušení v OnNavigateAsync

Objekt NavigationContext předaný OnNavigateAsync zpětnému volání obsahuje objekt CancellationToken , který se nastaví, když dojde k nové navigační události. Zpětné volání musí vyvolat, pokud je tento token zrušení nastavený, aby se zabránilo dalšímu spouštění zpětného volání na OnNavigateAsync OnNavigateAsync zastaralé navigaci.

Pokud uživatel přejde na koncový bod, ale hned přejde na nový koncový bod, aplikace by neměla pokračovat ve spouštění zpětného volání prvního OnNavigateAsync koncového bodu.

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

• Token zrušení se předává ve volání metody , která může zrušit operaci POST, pokud uživatel přejde PostAsJsonAsync z koncového /about bodu.
• Token zrušení se nastaví během operace předběžného načtení produktu, pokud uživatel přejde z koncového /store bodu.

App.razor:

@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="@typeof(Program).Assembly" 
    OnNavigateAsync="@OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats = { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = [345, 789, 135, 689];

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

NavLink Komponenty NavMenu a

Při vytváření navigačních odkazů použijte komponentu místo NavLink elementů hypertextového odkazu HTML ( <a> ). Komponenta se chová jako prvek s tím rozdílem, že přepíná třídu CSS podle toho, jestli odpovídá NavLink <a> aktuální adrese active href URL. Třída active pomáhá uživateli pochopit, která stránka je aktivní stránkou v zobrazených navigačních odkazech. Volitelně můžete přiřadit název třídy CSS pro použití vlastní třídy CSS na vykreslený odkaz, když NavLink.ActiveClass aktuální trasa odpovídá href .

K NavLinkMatch atributu elementu můžete přiřadit Match dvě <NavLink> možnosti:

• NavLinkMatch.All: Objekt NavLink je aktivní, pokud odpovídá celé aktuální adrese URL.
• NavLinkMatch.Prefix (výchozí): Hodnota NavLink je aktivní, pokud odpovídá libovolné předponě aktuální adresy URL.

V předchozím příkladu odpovídá adresa URL domovské stránky a třída CSS získá pouze na výchozí adrese URL základní cesty aplikace Home NavLink href="" active (například https://localhost:5001/ ). Druhý obdrží NavLink třídu , když uživatel navštíví active libovolnou adresu URL s component předponou (například a https://localhost:5001/component https://localhost:5001/component/another-segment ).

Další NavLink atributy komponenty se předá do vykreslené značky ukotvení. V následujícím příkladu NavLink komponenta obsahuje target atribut :

<NavLink href="example-page" target="_blank">Example page</NavLink>

Vykreslí se následující kód HTML:

<a href="example-page" target="_blank">Example page</a>

@for (int c = 0; c < 10; c++)
{
    var current = c;
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @current
        </NavLink>
    </li>
}

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

integrace směrování ASP.NET Core endpoint

Tato část se vztahuje pouze na Blazor Server aplikace.

Blazor Serverje integrován do směrování koncového bodu ASP.NET Core. aplikace ASP.NET Core je nakonfigurovaná tak, aby přijímala příchozí připojení pro interaktivní komponenty MapBlazorHub v nástroji Startup.Configure .

Startup.cs:

using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseRouting();

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

Typickou konfigurací je směrování všech požadavků na Razor stránku, která funguje jako hostitel pro součást aplikace na straně serveru Blazor Server . Podle konvence je stránka hostitele obvykle pojmenována _Host.cshtml ve Pages složce aplikace.

Trasa zadaná v hostitelském souboru se nazývá záložní trasa , protože v porovnání s trasou funguje s nízkou prioritou. Záložní trasa se používá v případě, že se jiné trasy neshodují. Tím umožníte, aby aplikace používala jiné řadiče a stránky bez toho, aby v aplikaci narušila směrování součástí Blazor Server .

V tomto článku se dozvíte, jak spravovat směrování požadavků a jak používat NavLink komponentu k vytváření navigačních odkazů v Blazor aplikacích.

Šablony směrování

Tato Router součást umožňuje směrování na Razor komponenty v Blazor aplikaci. RouterKomponenta se používá v App součásti Blazor aplikace.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Když Razor .razor je zkompilována součást () s @page direktivou , je k dispozici vygenerovaná třída komponenty, která RouteAttribute Určuje šablonu směrování komponenty.

Po spuštění aplikace se v sestavení zadaném jako směrovač AppAssembly vyhledá informace o trasách pro součásti aplikace, které mají RouteAttribute .

Za běhu RouteView komponenty:

• Přijímá RouteData od Router spolu s parametry směrování.
• Vykreslí určenou komponentu pomocí jejího rozložení, včetně všech dalších vnořených rozložení.

Volitelně můžete zadat DefaultLayout parametr s třídou layout pro součásti, které neurčují rozložení pomocí @layout direktivy. Blazor Šablony projektu rozhraní určují MainLayout komponentu ( Shared/MainLayout.razor ) jako výchozí rozložení aplikace. Další informace o rozložení najdete v tématu BlazorASP.NET Core Rozložení .

Komponenty podporují více šablon směrování s použitím více @page direktiv. Následující příklad načte komponentu na požadavky pro /BlazorRoute a /DifferentBlazorRoute .

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

RouterNekomunikuje s hodnotami řetězce dotazu. Chcete-li pracovat s řetězci dotazu, přečtěte si část řetězce dotazu a parametry Parse .

Poskytnutí vlastního obsahu, když se nenalezne obsah

RouterKomponenta umožňuje aplikaci zadat vlastní obsah, pokud se pro požadovanou trasu nenajde obsah.

V rámci App komponenty nastavte vlastní obsah v Router NotFound šabloně komponenty.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Libovolné položky jsou podporovány jako obsah značek, jako jsou například <NotFound> jiné interaktivní komponenty. Chcete-li použít výchozí rozložení NotFound obsahu, přečtěte si téma BlazorASP.NET Core Rozložení .

Směrování na součásti z více sestavení

Použijte AdditionalAssemblies parametr k určení dalších sestavení, Router která má součást při hledání směrovatelných komponent zvážit. Další sestavení jsou prohledávána kromě sestavení určeného pro AppAssembly . V následujícím příkladu Component1 je směrovatelný komponenta definovaná v odkazované knihovně tříd komponent. Následující AdditionalAssemblies příklad vede k podpoře směrování pro Component1 .

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Parametry směrování

Směrovač používá parametry směrování k naplnění odpovídajících parametrů komponenty se stejným názvem. V názvech parametrů trasy se nerozlišují malá a velká písmena. V následujícím příkladu text parametr přiřadí hodnotu segmentu směrování do Text Vlastnosti komponenty. Po podání žádosti se /RouteParameter/amazing <h1> obsah značky vykreslí jako Blazor is amazing! .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }
}

Volitelné parametry nejsou podporovány. V následujícím příkladu jsou aplikovány dvě @page direktivy . První direktiva povoluje navigaci na součást bez parametru. Druhá direktiva přiřadí {text} hodnotu parametru Route Text Vlastnosti komponenty.

Pages/RouteParameter.razor:

@page "/RouteParameter"
@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Místo toho použijte, pokud chcete, aby OnParametersSet OnInitialized{Async} navigace aplikace byla stejná jako jiná volitelná hodnota parametru. Na základě předchozího příkladu použijte, OnParametersSet když má uživatel být schopný přejít z na /RouteParameter /RouteParameter/amazing nebo z /RouteParameter/amazing na /RouteParameter :

protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}

Omezení trasy

Omezení trasy vynutilo typ shodný s typem pro segment směrování do součásti.

V následujícím příkladu trasa k User součásti odpovídá pouze v případě, že:

• IdV adrese URL požadavku je přítomen segment směrování.
• IdSegment je celočíselný typ ( int ).

Pages/User.razor:

@page "/user/{Id:int}"

<h1>User Id: @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

K dispozici jsou omezení tras uvedená v následující tabulce. Pro omezení trasy, která odpovídají neutrální jazykové verzi, se podívejte na upozornění pod tabulkou, kde najdete další informace.

Směrování s adresami URL, které obsahují tečky

U hostovaných Blazor WebAssembly a Blazor Server aplikací předpokládá šablona výchozí trasy na straně serveru, že pokud poslední segment adresy URL požadavku obsahuje tečku ( . ), kterou soubor požaduje. Například adresa URL https://localhost.com:5001/example/some.thing je interpretována směrovačem jako požadavek na soubor s názvem some.thing . Bez další konfigurace aplikace vrátí odpověď na 404, která nebyla nalezena , pokud some.thing byla určena k směrování na komponentu s @page direktivou a some.thing hodnotou parametru trasy. Aby bylo možné použít trasu s jedním nebo více parametry, které obsahují tečku, musí aplikace nakonfigurovat trasu s vlastní šablonou.

Vezměte v úvahu následující Example součást, která může přijmout parametr trasy z posledního segmentu adresy URL.

Pages/Example.razor:

@page "/example"
@page "/example/{param}"

<p>
    Param: @Param
</p>

@code {
    [Parameter]
    public string Param { get; set; }
}

Pokud chcete Server aplikaci hostovaného řešení povolit Blazor WebAssembly , aby směrovala požadavek s tečkou v param parametru Route, přidejte šablonu trasy záložního souboru s volitelným parametrem v Startup.Configure .

Startup.cs:

endpoints.MapFallbackToFile("/example/{param?}", "index.html");

Pokud chcete Blazor Server aplikaci nakonfigurovat tak, aby směrovala požadavek s tečkou v param parametru Route, přidejte šablonu trasy záložní stránky s volitelným parametrem v Startup.Configure .

Startup.cs:

endpoints.MapFallbackToPage("/example/{param?}", "/_Host");

Další informace naleznete v tématu Směrování v ASP.NET Core.

Catch – všechny parametry tras

Catch – všechny parametry tras jsou podporované v ASP.NET Core 5,0 nebo novějším. Pokud chcete získat další informace, vyberte verzi 5,0 tohoto článku.

Identifikátory URI a pomocníka pro stav navigace

Slouží NavigationManager ke správě identifikátorů URI a navigace v kódu jazyka C#. NavigationManager poskytuje událost a metody uvedené v následující tabulce.

Pro LocationChanged událost LocationChangedEventArgs poskytuje následující informace o událostech navigace:

• Location: Adresa URL nového umístění.
• IsNavigationIntercepted: Pokud true Blazor byla zachycena navigace z prohlížeče. false NavigationManager.NavigateTo V důsledku toho došlo k navigaci.

Následující součást:

• Přejde na Counter součást aplikace ( Pages/Counter.razor ), když je vybráno tlačítko pomocí NavigateTo .
• Zpracovává událost změněné umístění při přihlášení k odběru NavigationManager.LocationChanged .

  • HandleLocationChangedMetoda je nepřipojená, pokud Dispose je volána rozhraním. Odpojování metody umožňuje uvolňování paměti komponenty.

  • Implementace protokolovacího nástroje zaznamená následující informace, když je vybráno tlačítko:

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager NavigationManager

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Další informace o vyřazení součástí najdete v tématu RazorASP.NET Core životní cyklus komponenty .

Parametry řetězce dotazu a analýzy

Řetězec dotazu požadavku je získán z NavigationManager.Uri vlastnosti:

@inject NavigationManager NavigationManager

...

var query = new Uri(NavigationManager.Uri).Query;

Chcete-li analyzovat parametry řetězce dotazu, je jedním z přístupů použití URLSearchParams při spolupráci s JavaScript (js):

NavLink a NavMenu komponenty

Použít NavLink komponentu namísto prvků hypertextového odkazu HTML ( <a> ) při vytváření navigačních odkazů. NavLinkKomponenta se chová jako <a> element s tím rozdílem, že přepíná active třídu CSS na základě toho, zda href odpovídá aktuální adrese URL. activeTřída pomáhá uživateli pochopit, která stránka je aktivní stránkou mezi zobrazenými navigačními odkazy. Volitelně můžete přiřadit název třídy šablony stylů CSS k NavLink.ActiveClass použití vlastní třídy CSS pro vykreslený odkaz, když aktuální trasa odpovídá href .

Existují dvě NavLinkMatch Možnosti, které lze přiřadit k Match atributu <NavLink> elementu:

• NavLinkMatch.All: NavLink Je aktivní, pokud odpovídá celé aktuální adrese URL.
• NavLinkMatch.Prefix (výchozí): NavLink je aktivní, pokud odpovídá libovolné PŘEDPONĚ aktuální adresy URL.

V předchozím příkladu Home NavLink href="" odpovídá adresa URL domů a přijímá pouze active třídu šablony stylů CSS ve výchozí základní cestě URL aplikace (například https://localhost:5001/ ). Druhá NavLink Získá třídu, active když uživatel navštíví libovolnou adresu URL s component předponou (například https://localhost:5001/component a https://localhost:5001/component/another-segment ).

Další NavLink atributy komponenty jsou předány do vykreslené značky ukotvení. V následujícím příkladu NavLink Komponenta zahrnuje target atribut:

<NavLink href="example-page" target="_blank">Example page</NavLink>

Vykresluje se následující kód HTML:

<a href="example-page" target="_blank">Example page</a>

@for (int c = 0; c < 10; c++)
{
    var current = c;
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @current
        </NavLink>
    </li>
}

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

integrace směrování ASP.NET Core endpoint

Tato část se vztahuje pouze na Blazor Server aplikace.

Blazor Serverje integrován do směrování koncového bodu ASP.NET Core. aplikace ASP.NET Core je nakonfigurovaná tak, aby přijímala příchozí připojení pro interaktivní komponenty MapBlazorHub v nástroji Startup.Configure .

Startup.cs:

using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseRouting();

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

Typickou konfigurací je směrování všech požadavků na Razor stránku, která funguje jako hostitel pro součást aplikace na straně serveru Blazor Server . Podle konvence je stránka hostitele obvykle pojmenována _Host.cshtml ve Pages složce aplikace.

Trasa zadaná v hostitelském souboru se nazývá záložní trasa , protože v porovnání s trasou funguje s nízkou prioritou. Záložní trasa se používá v případě, že se jiné trasy neshodují. Tím umožníte, aby aplikace používala jiné řadiče a stránky bez toho, aby v aplikaci narušila směrování součástí Blazor Server .