ASP.NET Core Blazor navigáció

Ez a cikk a lapnavigáció aktiválását és kezelését ismerteti.Blazor Míg a felhasználók normál HTML-hivatkozásokkal navigálhatnak a különböző oldalak között, Blazor az alkalmazáson belül javítja a navigációt, hogy elkerülje a teljes oldal újrabetöltését, és zökkenőmentesebb élményt nyújtson. NavLink Az összetevő használatával olyan navigációs hivatkozásokat hozhat létre, amelyek automatikusan stílust alkalmaznak, amikor a hivatkozás megfelel az aktuális lapnak. A programozott navigációhoz és az URI-kezeléshez c# kódban használja a NavigationManager szolgáltatást.

Fontos

A cikkben szereplő kódpéldák olyan metódusokat hívnak meg a Navigation-on, amelyek egy osztályokba és összetevőkbe injektált NavigationManager-re vonatkoznak.

NavLink komponens

Navigációs hivatkozások létrehozásakor használjon egy NavLink összetevőt a HTML-hivatkozáselemek (<a>) helyett. A NavLink-összetevő <a> elemként viselkedik, kivéve, hogy egy active CSS-osztályt vált ki attól függően, hogy a href megegyezik-e az aktuális URL-címével. A active osztály segít a felhasználóknak megérteni, hogy melyik lap az aktív lap a megjelenített navigációs hivatkozások között. Amikor az aktuális útvonal megfelel a NavLink.ActiveClass, rendeljen hozzá egy CSS-osztálynevet a(z) href-hoz, hogy egyéni CSS-osztályt alkalmazzon a renderelt hivatkozásra.

Az Blazor projektsablonból létrehozott Blazor alkalmazás NavMenu komponensében (NavMenu.razor):

<div class="nav-item px-3">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
    </NavLink>
</div>
<div class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
    </NavLink>
</div>

Az előző példában a HomeNavLinkhref="" megegyezik a kezdőlap URL-címével, és csak az alkalmazás alapértelmezett alapútvonalán (active) kapja meg a / CSS-osztályt. A második NavLink megkapja a(z) active osztályt, amikor a felhasználó a(z) Counter összetevőt a /counter helyszínen felkeresi.

A NavLinkMatch elem Match attribútumához két <NavLink> lehetőség rendelhető:

• NavLinkMatch.All: A NavLink aktív, ha megfelel az aktuális URL-címnek, figyelmen kívül hagyva a lekérdezési sztringet és a töredéket. A lekérdezési sztring/töredék egyeztetésének hozzáadásához állítsa be a kapcsolót Microsoft.AspNetCore.Components.Routing.NavLink.EnableMatchAllForQueryStringAndFragmentAppContext értékre true.
• NavLinkMatch.Prefix (alapértelmezett): A NavLink aktív, ha megfelel az aktuális URL-cím bármely előtagjának.

Az egyéni egyezési logika alkalmazásához hozzon létre egy alosztályt a NavLink-ból, és írja felül annak ShouldMatch metódusát. A metódusból akkor adja vissza true, amikor alkalmazni akarja a active CSS-osztályt.

public class CustomNavLink : NavLink
{
    protected override bool ShouldMatch(string currentUriAbsolute)
    {
        // Custom matching logic
    }
}

A rendszer további NavLink összetevőattribútumokat ad át a renderelt horgonycímkének. Az alábbi példában a NavLink összetevő tartalmazza a target attribútumot:

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

A következő HTML-jelölés jelenik meg:

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

Figyelmeztetés

A Blazor gyermek tartalmak renderelésének módja miatt a NavLink ciklusban lévő for komponensek rendereléséhez helyi index változóra van szükség, ha a növekvő ciklusváltozót a NavLink (gyermek) komponens tartalmában használják.

@for (int c = 1; c < 4; c++)
{
    var ct = c;
    <li ...>
        <NavLink ...>
            <span ...></span> Product #@ct
        </NavLink>
    </li>
}

Ebben a forgatókönyvben az indexváltozó használata követelmény minden olyan gyermekösszetevő számára, amely hurokváltozót használ a gyermek tartalmában, nem csak a NavLink összetevő esetében.

Alternatívaként használjon egy foreach hurkot Enumerable.Range:

@foreach (var c in Enumerable.Range(1, 3))
{
    <li ...>
        <NavLink ...>
            <span ...></span> Product #@c
        </NavLink>
    </li>
}

URI- és navigációs állapotsegítők

Az NavigationManager használatával kezelheti az URI-kat és a navigációt C#-kódban. NavigationManager az alábbi táblázatban látható eseményt és metódusokat tartalmazza.

Member	Description
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum href elemének <base> attribútumának felel meg (<head> tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha forceLoadfalse: A továbbfejlesztett navigáció pedig az aktuális URL-címen érhető el, Blazortovábbfejlesztett navigációja aktiválva van. Ellenkező esetben Blazor teljes oldalú újratöltést hajt végre a kért URL-címhez. Ha forceLoadtrue: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali interaktív útválasztó kezeli-e. További információ: Továbbfejlesztett navigáció és űrlapkezelés szakasz. Ha replace értéke true, akkor a böngészőelőzmények aktuális URI-ját a rendszer lecseréli, ahelyett, hogy új URI-t helyezne az előzményverembe.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik. A további információkat lásd a Helymódosítások szakaszban.
NotFound	Olyan forgatókönyvek kezelésére van meghívva, ahol a kért erőforrás nem található. További információkért tekintse meg a Nem található válaszok szakaszt .
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.
RegisterLocationChangingHandler	Regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A NavigateTo hívása mindig meghívja a kezelőt.
GetUriWithQueryParameter	A NavigationManager.Uri egyetlen hozzáadott, frissített vagy eltávolított paraméterrel történő frissítésével létrehozott URI-t ad vissza. További információ: Lekérdezési sztringek szakasz.

Helyváltozások

Az LocationChanged eseményhez LocationChangedEventArgs a következő információkat adja meg a navigációs eseményekről:

• Location: Az új hely URL-címe.
• IsNavigationIntercepted: Ha true, Blazor elfogta a navigációt a böngészőből. Ha a falsevagy a NavigationManager.NavigateTo okozta a navigációt.

A következő összetevő:

• Az alkalmazás Counter összetevőjére (Counter.razor) navigál, amikor a gombot a NavigateTohasználatával kiválasztja.
• A helyváltoztatási eseményt úgy kezeli, hogy feliratkozik a NavigationManager.LocationChanged-ra.

  • A HandleLocationChanged metódus lecsatlakozik, amikor a keretrendszer meghívja Dispose. A metódus leválasztása lehetővé teszi az összetevő szemétgyűjtését.

  • A naplózó implementációja a következő adatokat naplózza a gomb kiválasztásakor:

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:{PORT}/counter

Navigate.razor:

@page "/navigate"
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate Example</h1>

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

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

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

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

További információt az összetevők ártalmatlanításáról az ASP.NET Core Razor összetevők ártalmatlanításarészben találhat.

A Navigation Manager átirányítási viselkedése a statikus kiszolgálóoldali renderelés során (statikus SSR)

A statikus kiszolgálóoldali renderelés (statikus SSR) NavigationManager során történő átirányításhoz a keretrendszer által rögzített parancsot kell dobni NavigationException , amely átirányítássá alakítja a hibát. A hívás NavigateTo meghívása után létező kód. A Visual Studio használatakor a hibakereső megszakítja a kivételt, ezért a Hibakeresés jelölőnégyzetének jelölését meg kell szakítania , ha ezt a kivételtípust felhasználó kezeli a Visual Studio felhasználói felületén, így elkerülhető, hogy a hibakereső leálljon a jövőbeli átirányítások esetében.

Az alkalmazás projektfájljában beállított <BlazorDisableThrowNavigationException> MSBuild tulajdonságot használhatjatrue, hogy a továbbiakban ne dobjon egy NavigationException. Emellett a hívás utáni kód akkor is végrehajtja a kódot NavigateTo , ha korábban még nem futott volna. Ez a viselkedés alapértelmezés szerint engedélyezve van a .NET 10 vagy újabb Blazor Web App projektsablonban:

<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>

Nem található válaszok

NavigationManager NotFound olyan forgatókönyvek kezelésére szolgál, ahol a kért erőforrás nem található a statikus kiszolgálóoldali renderelés (statikus SSR) vagy a globális interaktív renderelés során:

• Statikus SSR: A hívás NavigationManager.NotFound a HTTP-állapotkódot 404-re állítja.

• Interaktív renderelés: Jelzi az Blazor útválasztót (Router összetevőt) a Nem található tartalom megjelenítéséhez.

• Streamelési renderelés: Ha a továbbfejlesztett navigáció aktív, a streamelési renderelés nem található tartalmat jelenít meg a lap újrabetöltése nélkül. Ha a továbbfejlesztett navigáció le van tiltva, a keretrendszer egy oldalfrissítéssel átirányítja a Nem található tartalomra.

Megjegyzés:

Az alábbi vitafórum megemlíti, hogy egy Nem található Razor összetevő rendelhető hozzá az Router összetevő paraméteréhez NotFoundPage . A paraméter együttműködik a NavigationManager.NotFound elemmel, és a szakasz későbbi részében részletesebben ismertetjük.

A streamelési renderelés csak olyan összetevőket képes megjeleníteni, amelyek útvonallal rendelkeznek, mint például egy NotFoundPage hozzárendelés (NotFoundPage="...") vagy egy állapotkódlapok újrafuttatását kezelő köztes réteg lap-hozzárendelés (UseStatusCodePagesWithReExecute). DefaultNotFound A 404-es tartalom ("Not found" egyszerű szöveg) nem rendelkezik útvonalsal, így a streamelés renderelése során nem használható.

Megjegyzés:

A Nem található renderelési töredék (<NotFound>...</NotFound>) nem támogatott a .NET 10-ben vagy újabb verzióiban.

NavigationManager.NotFound A tartalommegjelenítés a következőket használja, függetlenül attól, hogy a válasz elindult-e vagy sem (sorrendben):

• Ha NotFoundEventArgs.Path be van állítva, renderelje a hozzárendelt oldal tartalmát.
• Ha Router.NotFoundPage be van állítva, renderelje a hozzárendelt lapot.
• Ha konfigurálva van, egy állapotkód-oldalakat újrafuttató köztes szoftver oldala.
• Nincs művelet, ha az előző megközelítések egyike sem kerül elfogadásra.

Az állapotkódlapok újrafuttatását végző köztes szoftver elsőbbséget élvez a böngészőalapú címútválasztási problémáknál, például a böngésző címsorába beírt helytelen URL-címnél, vagy olyan hivatkozás kiválasztásakor, amelynek nincs végpontja az alkalmazásban.UseStatusCodePagesWithReExecute

Amikor egy összetevő statikusan (statikus SSR) megjelenik, és NavigationManager.NotFound meghívásra kerül, a 404 állapotkód beállításra kerül a válaszban.

@page "/render-not-found-ssr"
@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NotFound();
    }
}

Ha nem található tartalmat szeretne biztosítani a globális interaktív rendereléshez, használjon egy Nem található lapot (Razor összetevőt).

Megjegyzés:

A Blazor projektsablon tartalmaz egy NotFound.razor lapot. Ez az oldal automatikusan megjelenítésre kerül minden alkalommal, amikor a NavigationManager.NotFound hívásra kerül, így egységes felhasználói élménnyel kezelheti a hiányzó útvonalakat.

Pages/NotFound.razor:

@page "/not-found"
@layout MainLayout

<h3>Not Found</h3>
<p>Sorry, the content you are looking for does not exist.</p>

A NotFound összetevő az útválasztó NotFoundPage paraméteréhez van rendelve. NotFoundPage Támogatja az útválasztást, amely az Állapotkódlapok újrafuttatása köztes szoftveren keresztül használható, beleértve a nem köztesBlazor szoftvereket is.

Az alábbi példában az előző NotFound összetevő jelen van az alkalmazás mappájában Pages , és átadja a NotFoundPage paraméternek:

<Router AppAssembly="@typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Amikor egy összetevő globális interaktív renderelési módban jelenik meg, a NavigationManager.NotFound hívása jelzi a Blazor útválasztónak, hogy renderelje a NotFound összetevőt.

@page "/render-not-found-interactive"
@inject NavigationManager Navigation

@if (RendererInfo.IsInteractive)
{
    <button @onclick="TriggerNotFound">Trigger Not Found</button>
}

@code {
    private void TriggerNotFound()
    {
        Navigation.NotFound();
    }
}

Amikor meghívásra kerül a OnNotFound, az értesítésekhez használhatja a NavigationManager.NotFound eseményt. Az esemény csak akkor aktiválódik, amikor NavigationManager.NotFound meghívásra kerül, nem bármilyen 404-es válasz esetén. Például, ha HttpContextAccessor.HttpContext.Response.StatusCode-t 404-ra állítja, az nem aktiválja NavigationManager.NotFound/OnNotFound.

Az egyéni útválasztót implementáló alkalmazások is használhatják a NavigationManager.NotFound-t. Az egyéni útválasztó két forrásból is megjelenítheti a Nem található tartalmat a válasz állapotától függően:

• A válasz állapotától függetlenül a lap újra végrehajtási útvonalát használhatjuk, ha átadjuk azt a UseStatusCodePagesWithReExecute-nak.

  app.UseStatusCodePagesWithReExecute(
      "/not-found", createScopeForStatusCodePages: true);
  

• Amikor a válasz elindult, a NotFoundEventArgs.Path használható az útválasztóra való feliratkozáshoz OnNotFoundEvent:

  @code {
      [CascadingParameter]
      public HttpContext? HttpContext { get; set; }
  
      private void OnNotFoundEvent(object sender, NotFoundEventArgs e)
      {
          // Only execute the logic if HTTP response has started,
          // because setting NotFoundEventArgs.Path blocks re-execution
          if (HttpContext?.Response.HasStarted == false)
          {
              return;
          }
  
          var type = typeof(CustomNotFoundPage);
          var routeAttributes = type.GetCustomAttributes<RouteAttribute>(inherit: true);
  
          if (routeAttributes.Length == 0)
          {
              throw new InvalidOperationException($"The type {type.FullName} " +
                  $"doesn't have a {nameof(RouteAttribute)} applied.");
          }
  
          var routeAttribute = (RouteAttribute)routeAttributes[0];
  
          if (routeAttribute.Template != null)
          {
              e.Path = routeAttribute.Template;
          }
      }
  }
  

Az alábbi példában az interaktív kiszolgálóoldali renderelést (interaktív SSR) alkalmazó összetevők esetében a rendszer az egyéni tartalmakat a hívás helye alapján OnNotFound jeleníti meg. Ha az eseményt az alábbi Movie összetevő aktiválja, amikor egy film nem található az összetevő inicializálásán, egy egyéni üzenet azt jelzi, hogy a kért film nem található. Ha az eseményt az alábbi példában szereplő User összetevő aktiválja, egy másik üzenet azt jelzi, hogy a felhasználó nem található.

Az alábbi NotFoundContext szolgáltatás kezeli az összetevők által nem talált tartalom kontextusát és üzenetét.

NotFoundContext.cs:

public class NotFoundContext
{
    public string? Heading { get; private set; }
    public string? Message { get; private set; }

    public void UpdateContext(string heading, string message)
    {
        Heading = heading;
        Message = message;
    }
}

A szolgáltatás regisztrálva van a kiszolgálóoldali Program fájlban:

builder.Services.AddScoped<NotFoundContext>();

A NotFound oldal beszúrja a NotFoundContext elemet, és megjeleníti a címsort és az üzenetet.

Pages/NotFound.razor:

@page "/not-found"
@layout MainLayout
@inject NotFoundContext NotFoundContext

<h3>@NotFoundContext.Heading</h3>
<div>
    <p>@NotFoundContext.Message</p>
</div>

Az Routes összetevő (Routes.razor) a NotFound paraméteren keresztül nem található lapként állítja be az összetevőt NotFoundPage :

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    ...
</Router>

A következő példaösszetevőkben:

• A NotFoundContext szolgáltatás be van injektálva, akárcsak a NavigationManager.
• OnInitializedAsync Ebben HandleNotFoundaz esetben egy eseménykezelő van hozzárendelve az OnNotFound eseményhez. HandleNotFound meghívja NotFoundContext.UpdateContext a nem található tartalom fejlécének és üzenetének beállításához az NotFound összetevőben.
• Az összetevők általában egy útvonalparaméter azonosítóját használják egy film vagy felhasználó adattárból, például adatbázisból való lekéréséhez. Az alábbi példákban egyetlen entitást sem ad vissza (null) annak szimulálásához, hogy mi történik, ha egy entitás nem található.
• Amikor nem ad vissza entitást OnInitializedAsync, akkor a NavigationManager.NotFound meghívása következik, ami viszont aktiválja az OnNotFound eseményt és az HandleNotFound eseménykezelőt. A nem található tartalmat az útválasztó jeleníti meg.
• A HandleNotFound metódus nincs rákapcsolva az összetevők ártalmatlanítására a következő helyen IDisposable.Dispose: .

Movie összetevő (Movie.razor):

@page "/movie/{Id:int}"
@implements IDisposable
@inject NavigationManager NavigationManager
@inject NotFoundContext NotFoundContext

<div>
    No matter what ID is used, no matching movie is returned
    from the call to GetMovie().
</div>

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

    protected override async Task OnInitializedAsync()
    {
        NavigationManager.OnNotFound += HandleNotFound;

        var movie = await GetMovie(Id);

        if (movie == null)
        {
            NavigationManager.NotFound();
        }
    }

    private void HandleNotFound(object? sender, NotFoundEventArgs e)
    {
        NotFoundContext.UpdateContext("Movie Not Found",
            "Sorry! The requested movie wasn't found.");
    }

    private async Task<MovieItem[]?> GetMovie(int id)
    {
        // Simulate no movie with matching id found
        return await Task.FromResult<MovieItem[]?>(null);
    }

    void IDisposable.Dispose()
    {
        NavigationManager.OnNotFound -= HandleNotFound;
    }

    public class MovieItem
    {
        public int Id { get; set; }
        public string? Title { get; set; }
    }
}

User összetevő (User.razor):

@page "/user/{Id:int}"
@implements IDisposable
@inject NavigationManager NavigationManager
@inject NotFoundContext NotFoundContext

<div>
    No matter what ID is used, no matching user is returned
    from the call to GetUser().
</div>

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

    protected override async Task OnInitializedAsync()
    {
        NavigationManager.OnNotFound += HandleNotFound;

        var user = await GetUser(Id);

        if (user == null)
        {
            NavigationManager.NotFound();
        }
    }

    private void HandleNotFound(object? sender, NotFoundEventArgs e)
    {
        NotFoundContext.UpdateContext("User Not Found",
            "Sorry! The requested user wasn't found.");
    }

    private async Task<UserItem[]?> GetUser(int id)
    {
        // Simulate no user with matching id found
        return await Task.FromResult<UserItem[]?>(null);
    }

    void IDisposable.Dispose()
    {
        NavigationManager.OnNotFound -= HandleNotFound;
    }

    public class UserItem
    {
        public int Id { get; set; }
        public string? Name { get; set; }
    }
}

Ha egy tesztalkalmazással szeretné elérni a megelőző összetevőket egy helyi bemutatóban, hozzon létre bejegyzéseket az NavMenu összetevőben, hogy elérje a NavMenu.razor és Movie összetevőket. Az útvonalparamétereként átadott entitásazonosítók az alábbi példában olyan tesztértékek, amelyeknek nincs hatásuk, mivel az összetevők valójában nem használják őket, és azt szimulálják, hogy nem találnak filmet vagy felhasználót.

In NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="movie/1">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movie
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user/2">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User
    </NavLink>
</div>

Továbbfejlesztett navigáció és űrlapkezelés

Ez a szakasz érvényes a Blazor Web Apps esetében.

Blazor Web Appkét útválasztási típusra képesek az oldalnavigációhoz és az űrlapkezelési kérelmekhez:

• Normál navigáció (dokumentumközi navigáció): a kérelem URL-címéhez egy teljes oldalnyi újratöltés aktiválódik.
• Továbbfejlesztett navigáció (ugyanazzal a dokumentumalapú navigációval): Blazor elfogja a kérést, és ehelyett egy fetch kérést hajt végre. Blazor ezután foltozza be a válasz tartalmát a lap DOM-jába. Blazortovábbfejlesztett navigációja és űrlapkezelése elkerüli a teljes oldal újrabetöltését, és megőrzi az oldal állapotának nagyobb részét, így az oldalak gyorsabban töltődnek be, általában anélkül, hogy elveszítené a felhasználó görgetési pozícióját az oldalon.

Továbbfejlesztett navigáció akkor érhető el, ha:

• A Blazor Web App szkriptet (blazor.web.js) használja a rendszer, nem a Blazor Server szkriptet (blazor.server.js) vagy Blazor WebAssembly szkriptet (blazor.webassembly.js).
• A funkció nem explicit módon le van tiltva.
• A cél URL-cím a belső alap URI-területen belül van (az alkalmazás alap elérési útja), és a lapra mutató hivatkozás nem rendelkezik az data-enhance-nav attribútummal false.

Ha engedélyezve van a kiszolgálóoldali útválasztás és a továbbfejlesztett navigáció, helyváltoztató kezelők csak interaktív futtatókörnyezetből indított programozott navigációra lesznek meghívva. A jövőbeli kiadásokban a további navigációs típusok, például a hivatkozás követése is meghívhatják a helyváltoztató kezelőket.

Fejlett navigáció végrehajtásakor általában meghívásra kerülnek azok az eseménykezelők LocationChanged, amelyek az interaktív szerverrel és a WebAssembly futtatási környezeteivel vannak regisztrálva. Előfordulhat, hogy a helymegváltoztató feldolgozók nem fogják el a fejlett navigációt. Előfordulhat például, hogy a felhasználó átvált egy másik lapra, mielőtt egy interaktív futtatókörnyezet elérhetővé válik. Ezért fontos, hogy az alkalmazáslogika ne támaszkodjon a helyváltoztatási kezelő meghívására, mivel nincs garancia a kezelő végrehajtására.

NavigateTohívásakor:

• Ha forceLoadfalse, akkor ez lesz az alapértelmezett:
  • A továbbfejlesztett navigáció pedig az aktuális URL-címen érhető el, Blazortovábbfejlesztett navigációja aktiválva van.
  • Ellenkező esetben Blazor teljes oldalú újratöltést hajt végre a kért URL-címhez.
• Ha forceLoadtrue: Blazor teljes oldalnyi újratöltést hajt végre a kért URL-címhez, függetlenül attól, hogy elérhető-e a továbbfejlesztett navigáció.

Az aktuális lapot frissítheti a NavigationManager.Refresh(bool forceLoad = false)meghívásával, amely mindig továbbfejlesztett navigációt hajt végre, ha elérhető. Ha a továbbfejlesztett navigáció nem érhető el, Blazor teljes oldalú újratöltést hajt végre.

Navigation.Refresh();

Adja át true a forceLoad paraméternek, hogy a teljes oldal újrabetöltése mindig történjen, még akkor is, ha továbbfejlesztett navigáció érhető el:

Navigation.Refresh(true);

A továbbfejlesztett navigáció alapértelmezés szerint engedélyezve van, de hierarchikusan és hivatkozásonként vezérelhető a data-enhance-nav HTML-attribútummal.

Az alábbi példák letiltják a továbbfejlesztett navigációt:

<a href="redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>

<ul data-enhance-nav="false">
    <li>
        <a href="redirect">GET without enhanced navigation</a>
    </li>
    <li>
        <a href="redirect-2">GET without enhanced navigation</a>
    </li>
</ul>

Ha a cél nemBlazor végpont, a továbbfejlesztett navigáció nem érvényes, és az ügyféloldali JavaScript újrapróbálkozza a teljes oldal betöltését. Ez biztosítja, hogy ne legyen zavarban a keretrendszer a külső oldalakról, amit nem szabad egy meglévő oldalba integrálni.

A továbbfejlesztett űrlapkezelés engedélyezéséhez adja hozzá a Enhance paramétert EditForm űrlapokhoz, vagy a data-enhance attribútumot a HTML-űrlapokhoz (<form>):

<EditForm ... Enhance ...>
    ...
</EditForm>

<form ... data-enhance ...>
    ...
</form>

A továbbfejlesztett űrlapkezelés nem hierarchikus, és nem halad át a gyermekűrlapokra:

❌ Nem támogatott: Az űrlap elődelemén nem állíthat be továbbfejlesztett navigációt az űrlap továbbfejlesztett navigációjának engedélyezéséhez.

<div ... data-enhance ...>
    <form ...>
        <!-- NOT enhanced -->
    </form>
</div>

A továbbfejlesztett űrlapbejegyzések csak Blazor végpontokkal működnek. A továbbfejlesztett űrlap nemBlazor végpontra való közzététele hibát eredményez.

A továbbfejlesztett navigáció letiltása:

• Egy EditFormesetén távolítsa el a Enhance paramétert az űrlapelemből (vagy állítsa false: Enhance="false").
• HTML-<form>esetén távolítsa el a data-enhance attribútumot az űrlapelemből (vagy állítsa false: data-enhance="false").

Blazortovábbfejlesztett navigációja és űrlap-átadása visszavonhatja a DOM dinamikus módosításait, ha a frissített tartalom nem része a kiszolgáló renderelésének. Egy elem tartalmának megőrzéséhez használja a data-permanent attribútumot.

Az alábbi példában a <div> elem tartalmát egy szkript dinamikusan frissíti az oldal betöltésekor:

<div data-permanent>
    ...
</div>

Miután Blazor elindult az ügyfélen, a enhancedload esemény használatával figyelheti a továbbfejlesztett oldalfrissítéseket. Ez lehetővé teszi a továbbfejlesztett oldalfrissítés által visszavont módosítások ismételt alkalmazását a DOM-ra.

Blazor.addEventListener('enhancedload', () => console.log('Enhanced update!'));

Ha globálisan szeretné kikapcsolni a továbbfejlesztett navigációt és űrlapkezelést, keresse fel a ASP.NET Core Blazor indításirészt.

A továbbfejlesztett navigáció statikus kiszolgálóoldali rendereléssel (statikus SSR) különös figyelmet igényel a JavaScript beillesztésénél. További információ: ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR).

URI létrehozása az alap URI-előtag alapján

Az alkalmazás alap URI-ja alapján ToBaseRelativePath átalakít egy abszolút URI-t egy URI-vé, amely az alap URI-előtaghoz képest viszonyított.

Vegye figyelembe a következő példát:

try
{
    baseRelativePath = Navigation.ToBaseRelativePath(inputURI);
}
catch (ArgumentException ex)
{
    ...
}

Ha az alkalmazás alap URI-ja https://localhost:8000, a következő eredmények jelennek meg:

• A https://localhost:8000/segment átadása inputURI egy baseRelativePath-t eredményez segment-ból.
• A https://localhost:8000/segment1/segment2 átadása inputURI egy baseRelativePath-t eredményez segment1/segment2-ból.

Ha az alkalmazás alap URI-ja nem egyezik a inputURI alap URI-jával, akkor ArgumentException keletkezik.

A https://localhost:8001/segment átadása a inputURI-ben a következő kivételt eredményezi:

System.ArgumentException: 'The URI 'https://localhost:8001/segment' is not contained by the base URI 'https://localhost:8000/'.'

Navigációs előzmények állapota

A NavigationManager a böngésző Előzmények API- használatával tartja karban az alkalmazás által végrehajtott helymódosításokhoz társított navigációs előzmények állapotát. Az előzmények állapotának fenntartása különösen hasznos külső átirányítási forgatókönyvekben, például a felhasználók külső identitásszolgáltatókkaltörténő hitelesítésénél. További információ: Navigációs beállítások szakasz.

Navigációs beállítások

Adja meg NavigationOptions-nak és NavigateTo-nek a következő viselkedések szabályozását:

• ForceLoad: Megkerülheti az ügyféloldali útválasztást, és kényszerítheti a böngészőt az új lap kiszolgálóról való betöltésére, függetlenül attól, hogy az ügyféloldali útválasztó kezeli-e az URI-t. Az alapértelmezett érték a false.
• ReplaceHistoryEntry: Cserélje le az aktuális bejegyzést az előzmények listájában. Ha false, fűzze hozzá az új bejegyzést az előzmények halmazába. Az alapértelmezett érték a false.
• HistoryEntryState: Olyan állapotot lekér vagy beállít, amelyet hozzáfűzhet az előzmények bejegyzéséhez.

Navigation.NavigateTo("/path", new NavigationOptions
{
    HistoryEntryState = "Navigation state"
});

A célelőzmények bejegyzéséhez társított állapot lekéréséről a helymódosítások kezelése során a Helymódosítások kezelése/megakadályozása szakaszban talál további információt.

Lekérdezési karakterláncok

A [SupplyParameterFromQuery] attribútummal megadhatja, hogy egy összetevőparaméter a lekérdezési sztringből származik-e.

A lekérdezési sztringből kapott összetevőparaméterek a következő típusokat támogatják:

• bool, DateTime, decimal, double, floatGuid, int, long, string.
• Az előző típusok null értékű változatai.
• Az előző típusok tömbjei, függetlenül attól, hogy nullálhatóak vagy nem nullálhatóak.

A rendszer a megfelelő kulturális invariáns formázást alkalmazza az adott típusra (CultureInfo.InvariantCulture).

Adja meg a [SupplyParameterFromQuery] attribútum Name tulajdonságát, hogy az összetevő paraméter nevétől eltérő lekérdezési paraméternevet használjon. Az alábbi példában az összetevőparaméter C# neve {COMPONENT PARAMETER NAME}. A {QUERY PARAMETER NAME} helyőrzőhöz más lekérdezési paraméternév van megadva:

Az [Parameter] tulajdonságok, az összetevőparaméter tulajdonságaitól ([SupplyParameterFromQuery]) eltérően, privatemellett public is megjelölhetők.

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

Az alábbi példában /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman URL-lel:

• A Filter tulajdonság scifi stars-re értelmeződik.
• A Page tulajdonság 3-re értelmeződik.
• A Stars tömb a star (Name = "star") nevű lekérdezési paraméterekből van kitöltve, és LeVar Burton és Gary Oldmanértékké oldódik fel.

Megjegyzés:

Az alábbi útvonalazható oldalösszetevő lekérdezési sztring paraméterei egy komponensben is működnek direktíva nélkül (például egy más Search.razor megosztott Search komponens esetében).

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

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

@code {
    [SupplyParameterFromQuery]
    private string? Filter { get; set; }

    [SupplyParameterFromQuery]
    private int? Page { get; set; }

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

A GetUriWithQueryParameter használatával adhat hozzá, módosíthat vagy távolíthat el egy vagy több lekérdezési paramétert az aktuális URL-címen:

@inject NavigationManager Navigation

...

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

Az előző példában:

• A {NAME} helyőrző adja meg a lekérdezési paraméter nevét. A {VALUE} helyőrző az értéket támogatott típusként adja meg. A támogatott típusok a szakaszban később jelennek meg.
• Az aktuális URL-címmel egyenlő sztring adódik vissza egyetlen paraméterrel:
  • Hozzáadva, ha a lekérdezési paraméter neve nem létezik az aktuális URL-címen.
  • Frissítve a megadott értékre, ha a lekérdezési paraméter az aktuális URL-címen található.
  • Eltávolítva, ha a megadott érték típusa null értékű, és az érték null.
• A rendszer a megfelelő kulturális invariáns formázást alkalmazza az adott típusra (CultureInfo.InvariantCulture).
• A lekérdezési paraméter neve és értéke URL-kódolású.
• Az egyező lekérdezési paraméternévvel rendelkező összes érték lecserélődik, ha több ilyen típusú példány is van.

Hívja meg GetUriWithQueryParameters, hogy hozzon létre egy Uri létrehozott URI-t több paraméter hozzáadásával, frissítésével vagy eltávolításával. A keretrendszer minden egyes értékhez value?.GetType() használ az egyes lekérdezési paraméterek futtatókörnyezet-típusának meghatározásához, és kiválasztja a megfelelő kulturális invariáns formázást. A keretrendszer hibát jelez a nem támogatott típusok esetében.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

A {PARAMETERS} helykitöltő egy IReadOnlyDictionary<string, object>.

Adjon át egy URI-sztringet a GetUriWithQueryParameters számára annak érdekében, hogy egy megadott URI-ból új URI-t hozzon létre, több paraméter hozzáadásával, frissítésével vagy eltávolításával. A keretrendszer minden egyes értékhez value?.GetType() használ az egyes lekérdezési paraméterek futtatókörnyezet-típusának meghatározásához, és kiválasztja a megfelelő kulturális invariáns formázást. A keretrendszer hibát jelez a nem támogatott típusok esetében. A támogatott típusok a szakaszban később jelennek meg.

@inject NavigationManager Navigation

...

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

• A {URI} helyőrző az URI lekérdezési lánccal vagy anélkül.
• A {PARAMETERS} helykitöltő egy IReadOnlyDictionary<string, object>.

A támogatott típusok megegyeznek az útvonalkorlátozások támogatott típusaival:

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

A támogatott típusok a következők:

• Az előző típusok null értékű változatai.
• Az előző típusok tömbjei, függetlenül attól, hogy nullálhatóak vagy nem nullálhatóak.

Figyelmeztetés

Az alapértelmezés szerint engedélyezett tömörítéssel ne hozzon létre biztonságos (hitelesített/engedélyezett) interaktív kiszolgálóoldali összetevőket, amelyek nem megbízható forrásokból renderelik az adatokat. A nem megbízható források közé tartoznak az útvonalparaméterek, a lekérdezési sztringek, az JS interopból származó adatok, valamint a külső felhasználók által szabályozható egyéb adatforrások (adatbázisok, külső szolgáltatások). További információért lásd az ASP.NET Core BlazorSignalR útmutatót és a Veszélyforrások elhárítási útmutatót az ASP.NET Core Blazor interaktív kiszolgálóoldali rendereléséhez.

Lekérdezési paraméter értékének cseréje, ha a paraméter létezik

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

Aktuális URL-cím	Generált URL-cím
scheme://host/?full%20name=David%20Krumholtz&age=42	scheme://host/?full%20name=Morena%20Baccarin&age=42
scheme://host/?fUlL%20nAmE=David%20Krumholtz&AgE=42	scheme://host/?full%20name=Morena%20Baccarin&AgE=42
scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau	scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin
scheme://host/?full%20name=&age=42	scheme://host/?full%20name=Morena%20Baccarin&age=42
scheme://host/?full%20name=	scheme://host/?full%20name=Morena%20Baccarin

Lekérdezési paraméter és érték hozzáfűzése, ha a paraméter nem létezik

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

Aktuális URL-cím	Generált URL-cím
scheme://host/?age=42	scheme://host/?age=42&name=Morena%20Baccarin
scheme://host/	scheme://host/?name=Morena%20Baccarin
scheme://host/?	scheme://host/?name=Morena%20Baccarin

Lekérdezési paraméter eltávolítása, ha a paraméter értéke null

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

Aktuális URL-cím	Generált URL-cím
scheme://host/?full%20name=David%20Krumholtz&age=42	scheme://host/?age=42
scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau	scheme://host/?age=42
scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau	scheme://host/?age=42
scheme://host/?full%20name=&age=42	scheme://host/?age=42
scheme://host/?full%20name=	scheme://host/

Lekérdezési paraméterek hozzáadása, frissítése és eltávolítása

Az alábbi példában:

• name el lesz távolítva, ha van ilyen.
• age hozzáadódik a 25 (int) értékkel, ha nincs jelen. Ha jelen van, age25értékre frissül.
• eye color greenértékre lesz hozzáadva vagy frissítve.

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

Aktuális URL-cím	Generált URL-cím
scheme://host/?name=David%20Krumholtz&age=42	scheme://host/?age=25&eye%20color=green
scheme://host/?NaMe=David%20Krumholtz&AgE=42	scheme://host/?age=25&eye%20color=green
scheme://host/?name=David%20Krumholtz&age=42&keepme=true	scheme://host/?age=25&keepme=true&eye%20color=green
scheme://host/?age=42&eye%20color=87	scheme://host/?age=25&eye%20color=green
scheme://host/?	scheme://host/?age=25&eye%20color=green
scheme://host/	scheme://host/?age=25&eye%20color=green

Az enumerálási értékek támogatása

Az alábbi példában:

• full name Morena Baccarin-hez van hozzáadva vagy frissítve, egyetlen értékként.
• ping paraméterek hozzáadódnak vagy lecserélődnek a 35, 16, 87 és 240értékekkel.

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

Aktuális URL-cím	Generált URL-cím
scheme://host/?full%20name=David%20Krumholtz&ping=8&ping=300	scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240
scheme://host/?ping=8&full%20name=David%20Krumholtz&ping=300	scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240
scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42	scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin

Navigálás hozzáadott vagy módosított lekérdezési sztringgel

Ha hozzáadott vagy módosított lekérdezési sztringgel szeretne navigálni, adjon át egy létrehozott URL-címet a NavigateTo.

A következő példahívások:

• GetUriWithQueryParameter a name lekérdezési paraméter Morena Baccarinértékkel való hozzáadásához vagy cseréjéhez.
• Meghívja NavigateTo az új URL-címre való navigálás aktiválásához.

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

Navigálás elnevezett elemekre

Keresse meg az elnevezett elemet az alábbi megközelítésekkel, és adjon meg kivonatolt (#) hivatkozást az elemre. Az összetevő elemeihez és a külső összetevők elemeihez vezető útvonalak gyökér-relatív elérési utakat használnak. Az elején található perjel (/) megadása nem kötelező.

Az alábbi megközelítések mindegyikének példái bemutatják, hogyan lehet navigálni a id komponensben található, targetElementCounter rendelkező elemhez.

• Horgonyelem (<a>) egyesült egy href-gyel:

  <a href="/counter#targetElement">
  

• A NavLink összetevő egy href.

  <NavLink href="/counter#targetElement">
  

• NavigationManager.NavigateTo relatív URL átadása:

  Navigation.NavigateTo("/counter#targetElement");
  

Az alábbi példa bemutatja, hogy a névvel ellátott H2-fejlécek egy összetevőn belül és külső összetevőkre mutatnak.

A Home (Home.razor) és Counter (Counter.razor) összetevőkben helyezze el a következő jelölést a meglévő összetevő jelölése végén, hogy navigációs célokként szolgáljon. A <div> mesterséges függőleges területet hoz létre a böngésző görgetési viselkedésének szemléltetéséhez:

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

Adja hozzá az alábbi FragmentRouting összetevőt az alkalmazáshoz.

FragmentRouting.razor:

@page "/fragment-routing"
@inject NavigationManager Navigation

<PageTitle>Fragment routing</PageTitle>

<h1>Fragment routing to named elements</h1>

<ul>
    <li>
        <a href="/fragment-routing#targetElement">
            Anchor in this component
        </a>
    </li>
    <li>
        <a href="/#targetElement">
            Anchor to the <code>Home</code> component
        </a>
    </li>
    <li>
        <a href="/counter#targetElement">
            Anchor to the <code>Counter</code> component
        </a>
    </li>
    <li>
        <NavLink href="/fragment-routing#targetElement">
            Use a `NavLink` component in this component
        </NavLink>
    </li>
    <li>
        <button @onclick="NavigateToElement">
            Navigate with <code>NavigationManager</code> to the 
            <code>Counter</code> component
        </button>
    </li>
</ul>

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

@code {
    private void NavigateToElement()
    {
        Navigation.NavigateTo("/counter#targetElement");
    }
}

Helymódosítások kezelése/megakadályozása

RegisterLocationChangingHandler regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A kezelő LocationChangingContext által biztosított környezete a következő tulajdonságokat tartalmazza:

• TargetLocation: Lekéri a célpont helyét.
• HistoryEntryState: Lekéri a célzott előzménybejegyzéshez társított állapotot.
• IsNavigationIntercepted: Megállapítja, hogy a navigáció egy hivatkozásról lett-e átirányítva.
• CancellationToken: Lekéri a CancellationToken annak megállapításához, hogy a navigáció megszakadt-e, például annak megállapításához, hogy a felhasználó egy másik navigációt aktivált-e.
• PreventNavigation: A navigáció folytatásának megakadályozása érdekében hívható meg.

Az összetevők több helyváltozó kezelőt is regisztrálhatnak az OnAfterRender{Async} életciklus-metódusban. A navigáció meghívja a teljes alkalmazásban (több összetevőre) regisztrált helyváltozó kezelőket, és minden belső navigáció párhuzamosan hajtja végre őket. A rendszer a NavigateTo kezelők mellett a következő műveleteket is meghívja:

• Belső hivatkozások kiválasztásakor, amelyek az alkalmazás alapútvonala alatti URL-címekre mutató hivatkozások.
• Ha a böngészőben az előre és vissza gombokkal navigál.

A kezelők csak az alkalmazáson belüli navigációhoz lesznek végrehajtva. Ha a felhasználó kiválaszt egy hivatkozást, amely egy másik webhelyre navigál, vagy manuálisan módosítja a címsort egy másik helyre, a helyváltoztatók nem lesznek végrehajtva.

Hajtsa végre a IDisposable-t, és szüntesse meg a regisztrált kezelők regisztrációját az eltávolításukkal. További információért lásd: ASP.NET Core Razor összetevők eltávolítása.

Fontos

Ne kísérelje meg a DOM-karbantartási feladatok végrehajtását JavaScript (JS) interop használatával a helyváltozások kezelésekor. Használja a(z) MutationObserver ügyfélen a . További információ: ASP.NET Core Blazor JavaScript-együttműködés (JS interop).

Az alábbi példában egy helyváltozó kezelő regisztrálva van a navigációs eseményekhez.

NavHandler.razor:

@page "/nav-handler"
@implements IDisposable
@inject NavigationManager Navigation

<p>
    <button @onclick="@(() => Navigation.NavigateTo("/"))">
        Home (Allowed)
    </button>
    <button @onclick="@(() => Navigation.NavigateTo("/counter"))">
        Counter (Prevented)
    </button>
</p>

@code {
    private IDisposable? registration;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            registration = 
                Navigation.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        if (context.TargetLocation == "/counter")
        {
            context.PreventNavigation();
        }

        return ValueTask.CompletedTask;
    }

    public void Dispose() => registration?.Dispose();
}

Mivel a belső navigáció aszinkron módon megszakítható, több egymást átfedő hívás is előfordulhat a regisztrált kezelők felé. Például több kezelőhívás is előfordulhat, ha a felhasználó gyorsan kiválasztja a vissza gombot egy oldalon, vagy több hivatkozást jelöl ki a navigáció végrehajtása előtt. Az alábbiakban összefoglaljuk az aszinkron navigációs logikát:

• Ha a helyváltó kezelők regisztrálva vannak, a rendszer először visszaállítja az összes navigációt, majd visszajátssza, ha a navigáció nincs megszakítva.
• Ha átfedésben vannak a navigációs kérések, a legújabb kérés mindig megszakítja a korábbi kéréseket, ami a következőket jelenti:
  • Az alkalmazás egyetlen kijelölésként több vissza- és továbbítási gombkijelölést is kezelhet.
  • Ha a felhasználó több hivatkozást jelöl ki a navigáció befejezése előtt, az utolsó kijelölt hivatkozás határozza meg a navigációt.

A NavigationOptionsNavigateTo-re való átadásával kapcsolatos további információk, amelyek a belépések és az állapot szabályozását szolgálják a navigációs előzmények veremében, lásd a Navigációs beállítások című szakaszban.

További példakódért lásd a NavigationManagerComponent a BasicTestApp (dotnet/aspnetcore referenciaforrásban).

Megjegyzés:

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

A NavigationLock összetevő elfogja a navigációs eseményeket mindaddig, amíg meg nem jelenik, gyakorlatilag "zárolja" az adott navigációt, amíg el nem születik a döntés a folytatásról vagy a megszakításról. Használja NavigationLock, ha a navigációs elfogás hatóköre egy összetevő élettartamára terjedhet ki.

NavigationLock paraméterek:

• ConfirmExternalNavigation beállít egy böngészőablakot, amely arra kéri a felhasználót, hogy erősítse meg vagy szakítsa meg a külső navigációt. Az alapértelmezett érték a false. A megerősítést kérő párbeszédpanel megjelenítéséhez kezdeti felhasználói beavatkozás szükséges a laphoz, mielőtt külső navigációt indítana el a böngésző címsorában lévő URL-címmel. Az interakciós követelményekről további információt a Window: event (Ablak: esemény) beforeunload című témakörben talál.
• OnBeforeInternalNavigation beállítja a belső navigációs események visszahívását.

Az alábbi NavLock összetevőben:

• A Microsoft webhelyére mutató hivatkozás követésére tett kísérletet a felhasználónak meg kell erősítenie, mielőtt a https://www.microsoft.com való navigálás sikeres lenne.
• PreventNavigation azért kerül meghívásra, hogy megakadályozza a navigációt, ha a felhasználó elutasítja a navigáció megerősítését egy JavaScript (JS) interop hívással, amely megnyitja a JSconfirm párbeszédpanelt.

NavLock.razor:

@page "/nav-lock"
@inject IJSRuntime JSRuntime
@inject NavigationManager Navigation

<NavigationLock ConfirmExternalNavigation="true" 
    OnBeforeInternalNavigation="OnBeforeInternalNavigation" />

<p>
    <button @onclick="Navigate">Navigate</button>
</p>

<p>
    <a href="https://www.microsoft.com">Microsoft homepage</a>
</p>

@code {
    private void Navigate()
    {
        Navigation.NavigateTo("/");
    }

    private async Task OnBeforeInternalNavigation(LocationChangingContext context)
    {
        var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", 
            "Are you sure you want to navigate to the root page?");

        if (!isConfirmed)
        {
            context.PreventNavigation();
        }
    }
}

További példakódért lásd a ConfigurableNavigationLock (BasicTestApp referenciaforrás) dotnet/aspnetcore összetevőjét.

Dinamikusan generált NavLink összetevők tükröződésen keresztül

NavLink összetevőbejegyzések dinamikusan hozhatók létre az alkalmazás összetevőiből tükröződés útján. Az alábbi példa a további testreszabás általános megközelítését mutatja be.

A következő bemutatóhoz az alkalmazás összetevőihez konzisztens, szabványos elnevezési konvenciót használunk:

• A routable összetevő fájlnevei Pascal-esetet használnak† például Pages/ProductDetail.razor.
• Az útvonalazható összetevőfájl elérési útjai megegyeznek a kebab-esetes URL-ekkel, az összetevő útvonalsablonjában lévő szavak között megjelenő kötőjelekkel. Például a ProductDetail összetevőt /product-detail (@page "/product-detail") útvonalsablonnal kérik a böngészőben a relatív URL /product-detail-nál.

†Pascal formátum (felső camel case) egy elnevezési konvenció szóközök és írásjelek nélkül, és minden szó első betűje nagybetűs, beleértve az első szót.
‡A Kebab-eset szóközök és írásjelek nélküli elnevezési konvenció, amely kisbetűket és kötőjeleket használ a szavak között.

Az alapértelmezett Razor oldal NavMenu összetevőjének (NavMenu.razor) Home jelölésében a NavLink összetevők egy gyűjteményből kerülnek hozzáadásra:

<div class="nav-scrollable" 
    onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" 
                    aria-hidden="true"></span> Home
            </NavLink>
        </div>

+       @foreach (var name in GetRoutableComponents())
+       {
+           <div class="nav-item px-3">
+               <NavLink class="nav-link" 
+                       href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+                   @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+               </NavLink>
+           </div>
+       }

    </nav>
</div>

A GetRoutableComponents metódus a @code blokkban:

public IEnumerable<string> GetRoutableComponents() => 
    Assembly.GetExecutingAssembly()
        .ExportedTypes
        .Where(t => t.IsSubclassOf(typeof(ComponentBase)))
        .Where(c => c.GetCustomAttributes(inherit: true)
                     .OfType<RouteAttribute>()
                     .Any())
        .Where(c => c.Name != "Home" && c.Name != "Error")
        .OrderBy(o => o.Name)
        .Select(c => c.Name);

Az előző példa nem tartalmazza a következő lapokat az összetevők renderelt listájában:

• Home lap: A lap az automatikusan létrehozott hivatkozásoktól elkülönítve jelenik meg, mert a lista tetején kell megjelennie, és meg kell adnia a Match paramétert.
• Error oldal: A hibás oldalt csak a keretrendszer által lehet navigálni, és nem szabad felsorolni.

Az előző kód mintaalkalmazásban való bemutatásához szerezze be a Blazor Web App vagy Blazor WebAssembly mintaalkalmazást.