ASP.NET Basisnavigatie Blazor

In dit artikel wordt uitgelegd hoe u paginanavigatie activeert en verwerkt in Blazor. Hoewel gebruikers met normale HTML-koppelingen tussen verschillende pagina's kunnen navigeren, Blazor verbetert u de navigatie in de toepassing om te voorkomen dat volledige pagina's opnieuw worden geladen en een soepelere ervaring te bieden. Gebruik het NavLink onderdeel om navigatiekoppelingen te maken die automatisch stijl toepassen wanneer de koppeling overeenkomt met de huidige pagina. Gebruik de NavigationManager service voor programmatische navigatie en URI-beheer in C#-code.

Belangrijk

Codevoorbeelden in dit artikel bevatten methoden die worden aangeroepen op Navigation. Dit is een geïnjecteerde NavigationManager in klassen en onderdelen.

NavLink onderdeel

Gebruik een NavLink onderdeel in plaats van HTML-hyperlinkelementen (<a>) bij het maken van navigatiekoppelingen. Een NavLink-onderdeel gedraagt zich als een <a>-element, behalve dat er een active CSS-klasse wordt ingeschakeld op basis van of de href overeenkomt met de huidige URL. De active-klasse helpt een gebruiker te begrijpen welke pagina de actieve pagina is tussen de weergegeven navigatiekoppelingen. Wijs desgewenst een CSS-klassenaam toe aan NavLink.ActiveClass om een aangepaste CSS-klasse toe te passen op de weergegeven koppeling wanneer de huidige route overeenkomt met de href.

In het NavMenu onderdeel (NavMenu.razor) van een Blazor app die is gemaakt op basis van een Blazor projectsjabloon:

<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>

In het voorgaande voorbeeld komt de HomeNavLinkhref="" overeen met de startpagina-URL en ontvangt alleen de active CSS-klasse op het standaardbasispad van de app (/). De tweede NavLink ontvangt de active klasse wanneer de gebruiker het Counter onderdeel bezoekt op /counter.

Er zijn twee NavLinkMatch opties die u kunt toewijzen aan het kenmerk Match van het <NavLink>-element:

• NavLinkMatch.All: de NavLink is actief wanneer deze overeenkomt met de huidige URL, waarbij de querytekenreeks en het fragment worden genegeerd. Als u overeenkomsten wilt opnemen in de querytekenreeks/-fragment, gebruikt u de Microsoft.AspNetCore.Components.Routing.NavLink.EnableMatchAllForQueryStringAndFragmentAppContext schakeloptie ingesteld op true.
• NavLinkMatch.Prefix (standaard-): de NavLink is actief wanneer deze overeenkomt met een voorvoegsel van de huidige URL.

Als u aangepaste overeenkomende logica wilt gebruiken, maak een subklasse van NavLink en overschrijf de ShouldMatch-methode. Retourneer true uit de methode wanneer u de active CSS-klasse wilt toepassen:

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

Aanvullende NavLink onderdeelkenmerken worden doorgegeven aan de gerenderde ankertag. In het volgende voorbeeld bevat het NavLink onderdeel het kenmerk target:

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

De volgende HTML-opmaak wordt weergegeven:

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

Waarschuwing

Vanwege de manier waarop Blazor onderliggende inhoud weergeeft, vereist het weergeven van NavLink componenten in een for lus een lokale indexvariabele als de incrementele lusvariabele wordt gebruikt in de inhoud van de NavLink (onderliggende) component:

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

Het gebruik van een indexvariabele in dit scenario is een vereiste voor elke kindcomponent die gebruikmaakt van een lusvariabele in de kindinhoud, niet alleen de NavLink-component.

U kunt ook een foreach lus gebruiken met Enumerable.Range:

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

Hulpmiddelen voor URI en navigatiestatus

Gebruik NavigationManager om URI's en navigatie in C#-code te beheren. NavigationManager bevat de gebeurtenis en methoden die worden weergegeven in de volgende tabel.

Lid	Description
Uri	Hiermee haalt u de huidige absolute URI op.
BaseUri	Haalt de basis-URI (met een afsluitende slash) op die kan worden voorafgegaan aan relatieve URI-paden om een absolute URI te maken. Normaal gesproken komt BaseUri overeen met het href kenmerk op het <base>-element van het document (locatie van <head>-inhoud).
NavigateTo	Hiermee gaat u naar de opgegeven URI. Als forceLoad gelijk is aan false: Er is verbeterde navigatie beschikbaar op de huidige URL en de verbeterde navigatie van Blazoris geactiveerd. Anders laadt Blazor de volledige pagina opnieuw in voor de aangevraagde URL. Als forceLoad gelijk is aan true: Routering aan de clientzijde wordt overgeslagen. De browser wordt gedwongen om de nieuwe pagina van de server te laden, ongeacht of de URI normaal gesproken wordt verwerkt door de interactieve router aan de clientzijde. Zie de sectie Verbeterde navigatie en formulierafhandeling voor meer informatie. Als replace is true, wordt de huidige URI in de browsergeschiedenis vervangen in plaats van een nieuwe URI naar de geschiedenisstack te pushen.
LocationChanged	Een gebeurtenis die plaatsvindt wanneer de navigatielocatie is gewijzigd. Zie de sectie Locatiewijzigingen voor meer informatie.
NotFound	Aangeroepen voor het afhandelen van scenario's waarbij een aangevraagde resource niet wordt gevonden. Zie de sectie Niet gevonden antwoorden voor meer informatie.
ToAbsoluteUri	Converteert een relatieve URI naar een absolute URI.
ToBaseRelativePath	Op basis van de basis-URI van de app wordt een absolute URI omgezet naar een URI die relatief is aan het basis-URI-voorvoegsel. Zie voor een voorbeeld de sectie Een URI opstellen in relatie tot het basis-URI-voorvoegsel.
RegisterLocationChangingHandler	Registreert een handler voor het verwerken van binnenkomende navigatie-gebeurtenissen. Het aanroepen van NavigateTo roept altijd de handler aan.
GetUriWithQueryParameter	Hiermee wordt een URI geretourneerd die is samengesteld door NavigationManager.Uri bij te werken met één parameter die is toegevoegd, bijgewerkt of verwijderd. Zie de sectie Querystrings voor meer informatie.

Locatiewijzigingen

Voor de LocationChanged gebeurtenis bevat LocationChangedEventArgs de volgende informatie over navigatie-gebeurtenissen:

• Location: de URL van de nieuwe locatie.
• IsNavigationIntercepted: Als true, heeft Blazor de navigatie van de browser onderschept. Als falseen NavigationManager.NavigateTo de navigatie hebben veroorzaakt.

Het volgende onderdeel:

• Hiermee gaat u naar het Counter-onderdeel van de app (Counter.razor) wanneer de knop is geselecteerd met NavigateTo.
• Hiermee wordt de gebeurtenis 'gewijzigde locatie' verwerkt door te abonneren op NavigationManager.LocationChanged.

  • De HandleLocationChanged methode wordt losgekoppeld wanneer Dispose door het framework wordt aangeroepen. Door de methode los te koppelen, kan het onderdeel worden verzameld door garbage collection.

  • De implementatie van de logboekregistratie registreert de volgende informatie wanneer de knop is geselecteerd:

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

Zie ASP.NET Core Razor componentverwijderingvoor meer informatie over de verwijdering van onderdelen.

Omleidingsgedrag van Navigatiebeheer tijdens statische rendering aan de serverzijde (statische SSR)

Voor een omleiding tijdens statische rendering aan de serverzijde (statische SSR) NavigationManager is afhankelijk van het genereren van een NavigationException omleiding die wordt vastgelegd door het framework, waarmee de fout wordt geconverteerd naar een omleiding. Code die bestaat nadat de aanroep naar NavigateTo is niet aangeroepen. Wanneer u Visual Studio gebruikt, wordt het foutopsporingsprogramma onderbroken op de uitzondering, waardoor u het selectievakje voor Onderbreking moet opheffen wanneer dit uitzonderingstype door de gebruiker wordt verwerkt in de Visual Studio-gebruikersinterface om te voorkomen dat het foutopsporingsprogramma stopt voor toekomstige omleidingen.

U kunt de <BlazorDisableThrowNavigationException> eigenschap MSBuild die is ingesteld true in het projectbestand van de app gebruiken om u aan te instellen voor het niet meer genereren van een NavigationException. Code na de aanroep die moet worden NavigateTo uitgevoerd wanneer deze niet eerder zou zijn uitgevoerd. Dit gedrag is standaard ingeschakeld in de projectsjabloon .NET 10 of hoger Blazor Web App :

<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>

Niet gevonden antwoorden

NavigationManager biedt een NotFound methode voor het afhandelen van scenario's waarbij een aangevraagde resource niet wordt gevonden tijdens statische server-side rendering (statische SSR) of globale interactieve rendering:

• Statische SSR: Door aanroepen NavigationManager.NotFound wordt de HTTP-statuscode ingesteld op 404.

• Interactieve rendering: Signaleert de Blazor router (Router component) om 'Niet Gevonden'-inhoud weer te geven.

• Streamingrendering: als verbeterde navigatie actief is, maakt streamingrendering het mogelijk om niet gevonden content weer te geven zonder de pagina opnieuw te laden. Wanneer verbeterde navigatie wordt geblokkeerd, wordt het framework omgeleid naar niet-gevonden inhoud met een paginavernieuwing.

Opmerking

In de volgende discussie wordt vermeld dat een Niet gevonden Razor component kan worden toegewezen aan de Router parameter van het NotFoundPage onderdeel. De parameter werkt samen met NavigationManager.NotFound en wordt verderop in deze sectie gedetailleerder beschreven.

Streaming-rendering kan alleen onderdelen weergeven die een route hebben, zoals een NotFoundPage-toewijzing (NotFoundPage="...") of een Statuscodepagina's opnieuw uitvoeren Middleware-paginatoewijzing (UseStatusCodePagesWithReExecute). DefaultNotFound 404-inhoud (Not found'' tekst zonder opmaak) heeft geen route, dus deze kan niet worden gebruikt tijdens streamingrendering.

Opmerking

Het renderfragment Niet gevonden (<NotFound>...</NotFound>) wordt niet ondersteund in .NET 10 of hoger.

NavigationManager.NotFound inhoudsweergave maakt gebruik van het volgende, ongeacht of het antwoord al dan niet is gestart (in volgorde):

• Als NotFoundEventArgs.Path dit is ingesteld, geeft u de inhoud van de toegewezen pagina weer.
• Als Router.NotFoundPage dit is ingesteld, geeft u de toegewezen pagina weer.
• Een middlewarepagina voor het opnieuw uitvoeren van statuscodepagina's, indien geconfigureerd.
• Geen actie als geen van de voorgaande benaderingen wordt aangenomen.

Statuscode pages Re-execution Middleware with UseStatusCodePagesWithReExecute heeft voorrang op browsergebaseerde adresrouteringsproblemen, zoals een onjuiste URL die is getypt in de adresbalk van de browser of het selecteren van een koppeling die geen eindpunt in de app heeft.

Wanneer een onderdeel statisch wordt weergegeven (statische SSR) en NavigationManager.NotFound wordt aangeroepen, wordt de 404-statuscode ingesteld op het antwoord:

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

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

Als u niet-gevonden inhoud wilt opgeven voor globale interactieve rendering, gebruikt u een niet-gevonden pagina (Razor component).

Opmerking

De Blazor projectsjabloon bevat een NotFound.razor pagina. Deze pagina wordt automatisch weergegeven wanneer NavigationManager.NotFound wordt aangeroepen, zodat ontbrekende routes met een consistente gebruikerservaring kunnen worden afgehandeld.

Pages/NotFound.razor:

@page "/not-found"
@layout MainLayout

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

Het NotFound onderdeel wordt toegewezen aan de parameter van NotFoundPage de router. NotFoundPage ondersteunt routering die kan worden gebruikt over middleware voor heruitvoering van statuscodepagina's, inclusief middleware zonder deze functionaliteitBlazor.

In het volgende voorbeeld is het voorgaande NotFound onderdeel aanwezig in de map van Pages de app en doorgegeven aan de NotFoundPage parameter:

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

Wanneer een onderdeel wordt weergegeven met een globale interactieve rendermodus, signaleert het aanroepen van NavigationManager.NotFound de Blazor router om het NotFound onderdeel weer te geven.

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

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

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

U kunt de OnNotFound gebeurtenis gebruiken voor meldingen wanneer NavigationManager.NotFound aangeroepen wordt. De gebeurtenis wordt alleen geactiveerd wanneer NavigationManager.NotFound wordt aangeroepen, niet voor een 404-antwoord. Als u bijvoorbeeld HttpContextAccessor.HttpContext.Response.StatusCode op 404 instelt, wordt NavigationManager.NotFound/OnNotFound niet geactiveerd.

Apps die een aangepaste router implementeren, kunnen ook NavigationManager.NotFound gebruiken. De aangepaste router kan Niet-gevonden inhoud vanuit twee bronnen weergeven, afhankelijk van de status van het antwoord:

• Ongeacht de antwoordstatus kan het pad voor opnieuw uitvoeren naar de pagina worden gebruikt door deze door te geven aan UseStatusCodePagesWithReExecute:

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

• Wanneer het antwoord is gestart, kan NotFoundEventArgs.Path worden gebruikt door te abonneren op OnNotFoundEvent in de router:

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

In het volgende voorbeeld voor onderdelen die interactieve server-side rendering (interactieve SSR) gebruiken, wordt aangepaste inhoud weergegeven, afhankelijk van waar OnNotFound wordt aangeroepen. Als de gebeurtenis wordt geactiveerd door het volgende Movie onderdeel wanneer een film niet wordt gevonden bij de initialisatie van onderdelen, wordt in een aangepast bericht aangegeven dat de aangevraagde film niet wordt gevonden. Als de gebeurtenis wordt geactiveerd door het User onderdeel in het volgende voorbeeld, wordt in een ander bericht aangegeven dat de gebruiker niet wordt gevonden.

De volgende NotFoundContext service beheert de context en het bericht voor wanneer inhoud niet wordt gevonden door onderdelen.

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

De service is geregistreerd in het bestand aan de serverzijde Program :

builder.Services.AddScoped<NotFoundContext>();

De NotFound pagina injecteert de NotFoundContext en geeft de kop en het bericht weer.

Pages/NotFound.razor:

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

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

Het Routes onderdeel (Routes.razor) stelt het NotFound onderdeel in als de pagina Niet gevonden via de NotFoundPage parameter:

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

In de volgende voorbeeldcomponenten:

• De NotFoundContext service wordt geïnjecteerd, samen met de NavigationManager.
• In OnInitializedAsync, HandleNotFound is een gebeurtenis-handler die is toegewezen aan de OnNotFound gebeurtenis. HandleNotFound roept NotFoundContext.UpdateContext aan om een kop en bericht in te stellen voor inhoud die niet is gevonden in de NotFound component.
• De onderdelen gebruiken normaal gesproken een id van een routeparameter om een film of gebruiker te verkrijgen uit een gegevensarchief, zoals een database. In de volgende voorbeelden wordt er geen entiteit geretourneerd (null) om te simuleren wat er gebeurt wanneer een entiteit niet wordt gevonden.
• Wanneer er geen entiteit aan OnInitializedAsync wordt geretourneerd, wordt NavigationManager.NotFound aangeroepen, waardoor op zijn beurt de OnNotFound gebeurtenis en de HandleNotFound gebeurtenis-handler worden geactiveerd. Niet gevonden inhoud wordt weergegeven door de router.
• De HandleNotFound methode wordt losgekoppeld bij het verwijderen van een component in IDisposable.Dispose.

Movie onderdeel (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 onderdeel (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; }
    }
}

Als u de voorgaande onderdelen in een lokale demonstratie met een test-app wilt bereiken, maakt u vermeldingen in het NavMenu onderdeel (NavMenu.razor) om de Movie onderdelen User te bereiken. De entiteits-id's die als routeparameters worden doorgegeven, zijn in het volgende voorbeeld mock-waarden die geen effect hebben, omdat ze niet daadwerkelijk worden gebruikt door de onderdelen, die simuleren dat er geen film of gebruiker wordt gevonden.

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>

Verbeterde verwerking van navigatie en formulieren

Deze sectie is van toepassing op Blazor Web Apps.

Blazor Web Appzijn geschikt voor twee typen routering voor paginanavigatie- en formulierafhandelingsaanvragen:

• Normale navigatie (navigatie tussen documenten): er wordt een volledige pagina opnieuw laden geactiveerd voor de aanvraag-URL.
• Verbeterde navigatie (navigatie in hetzelfde document): Blazor de aanvraag onderschept en in plaats daarvan een fetch aanvraag uitvoert. Blazor patcht vervolgens de inhoud van het antwoord in de DOM van de pagina. De verbeterde navigatie- en formulierafhandeling van Blazorvoorkomt dat een volledige pagina opnieuw geladen moet worden en zorgt ervoor dat de paginastatus beter behouden blijft, zodat de pagina's sneller laden, meestal zonder dat de scrollpositie van de gebruiker op de pagina verloren gaat.

Verbeterde navigatie is beschikbaar wanneer:

• Het Blazor Web App script (blazor.web.js) wordt gebruikt, niet het Blazor Server script (blazor.server.js) of Blazor WebAssembly script (blazor.webassembly.js).
• De functie is niet expliciet uitgeschakeld.
• De doel-URL bevindt zich binnen de interne basis-URI-ruimte (het basispad van de app) en de koppeling naar de pagina heeft het kenmerk data-enhance-nav niet ingesteld op false.

Als routering aan de serverzijde en verbeterde navigatie zijn ingeschakeld, worden locatie wijzigende handlers alleen aangeroepen voor programmatische navigatie die is gestart vanuit een interactieve runtime. In toekomstige releases kunnen ook aanvullende typen navigatie, zoals het volgen van een koppeling, locatie wijzigende handlers aanroepen.

Wanneer er een verbeterde navigatie plaatsvindt, worden LocationChanged eventhandlers geregistreerd bij Interactive Server en WebAssembly-Runtimes typisch aangeroepen. Er zijn gevallen waarin het wijzigen van de locatie van handlers een verbeterde navigatie mogelijk niet onderschept. De gebruiker kan bijvoorbeeld overschakelen naar een andere pagina voordat een interactieve runtime beschikbaar wordt. Daarom is het belangrijk dat app-logica niet afhankelijk is van het aanroepen van een handler voor het wijzigen van een locatie, omdat er geen garantie is voor de handler die wordt uitgevoerd.

Bij het aanroepen van NavigateTo:

• Als forceLoadfalseis, is dit de standaardinstelling:
  • Er is verbeterde navigatie beschikbaar op de huidige URL en de verbeterde navigatie van Blazoris geactiveerd.
  • Anders laadt Blazor de volledige pagina opnieuw in voor de aangevraagde URL.
• Als forceLoad is true: Blazor voert een volledige pagina opnieuw laden uit voor de aangevraagde URL, ongeacht of uitgebreide navigatie beschikbaar is of niet.

U kunt de huidige pagina vernieuwen door NavigationManager.Refresh(bool forceLoad = false)aan te roepen, die altijd een verbeterde navigatie uitvoert, indien beschikbaar. Als verbeterde navigatie niet beschikbaar is, laadt Blazor een volledige pagina opnieuw.

Navigation.Refresh();

Geef true door aan de parameter forceLoad om ervoor te zorgen dat een volledige pagina opnieuw laden altijd wordt uitgevoerd, zelfs als uitgebreide navigatie beschikbaar is:

Navigation.Refresh(true);

Verbeterde navigatie is standaard ingeschakeld, maar kan hiërarchisch en per koppeling worden beheerd met behulp van het data-enhance-nav HTML-kenmerk.

In de volgende voorbeelden wordt verbeterde navigatie uitgeschakeld:

<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>

Als het doel een niet-Blazor eindpunt is, is verbeterde navigatie niet van toepassing en herlaadt de client-side JavaScript de pagina volledig. Dit zorgt ervoor dat er geen verwarring ontstaat over het framework over externe pagina's die niet in een bestaande pagina moeten worden gepatcht.

Als u verbeterde formulierafhandeling wilt inschakelen, voegt u de parameter Enhance toe aan EditForm formulieren of het kenmerk data-enhance aan HTML-formulieren (<form>):

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

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

Verbeterde formulierafhandeling is niet hiërarchisch en wordt niet doorgegeven aan onderliggende formulieren.

❌ Niet ondersteund: U kunt geen uitgebreide navigatie instellen op het bovenliggende element van een formulier om verbeterde navigatie voor het formulier mogelijk te maken.

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

Verbeterde formulierposten werken uitsluitend met Blazor-eindpunten. Het plaatsen van een verbeterd formulier op een niet-Blazor eindpunt resulteert in een fout.

Verbeterde navigatie uitschakelen:

• Voor een EditFormverwijdert u de parameter Enhance uit het formulierelement (of stelt u deze in op false: Enhance="false").
• Voor een HTML-<form>verwijdert u het kenmerk data-enhance uit het formulierelement (of stelt u het in op false: data-enhance="false").

Blazorverbeterde navigatie en formulierverwerking kunnen dynamische wijzigingen in de DOM ongedaan maken als de bijgewerkte inhoud geen deel uitmaakt van de rendering door de server. Als u de inhoud van een element wilt behouden, gebruikt u het kenmerk data-permanent.

In het volgende voorbeeld wordt de inhoud van het element <div> dynamisch bijgewerkt door een script wanneer de pagina wordt geladen:

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

Zodra Blazor op de client is gestart, kunt u de enhancedload gebeurtenis gebruiken om te luisteren naar verbeterde pagina-updates. Hierdoor kunnen wijzigingen opnieuw worden toegepast op de DOM die mogelijk ongedaan zijn gemaakt door een verbeterde pagina-update.

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

Zie ASP.NET Core Blazor startupom verbeterde navigatie- en formulierafhandeling wereldwijd uit te schakelen.

Verbeterde navigatie met statische server-side rendering (statische SSR) vereist speciale aandacht bij het laden van JavaScript. Voor meer informatie, zie ASP.NET Core Blazor JavaScript met statische server-side rendering (statische SSR).

Een URI produceren ten opzichte van het basis-URI-voorvoegsel

Op basis van de basis-URI van de app converteert ToBaseRelativePath een absolute URI naar een URI ten opzichte van het basis-URI-voorvoegsel.

Bekijk het volgende voorbeeld:

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

Als de basis-URI van de app is https://localhost:8000, worden de volgende resultaten verkregen:

• Door https://localhost:8000/segment in inputURI te plaatsen, resulteert dat in een baseRelativePath van segment.
• Door https://localhost:8000/segment1/segment2 in inputURI te plaatsen, resulteert dat in een baseRelativePath van segment1/segment2.

Als de basis-URI van de app niet overeenkomt met de basis-URI van inputURI, wordt er een ArgumentException gegenereerd.

Het doorgeven van https://localhost:8001/segment in inputURI resulteert in de volgende uitzondering:

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

Status van navigatiegeschiedenis

De NavigationManager gebruikt de Geschiedenis-API van de browser om de status van de navigatiegeschiedenis te behouden die is gekoppeld aan elke locatiewijziging die door de app is aangebracht. Het onderhouden van de geschiedenisstatus is met name handig in scenario's voor externe omleiding, zoals wanneer gebruikers verifiëren met externe id-providers. Zie de sectie Navigatieopties voor meer informatie.

Navigatieopties

Geef NavigationOptions door aan NavigateTo om het volgende gedrag te beheren:

• ForceLoad: routering aan clientzijde overslaan en afdwingen dat de browser de nieuwe pagina van de server laadt, ongeacht of de URI wordt verwerkt door de router aan de clientzijde. De standaardwaarde is false.
• ReplaceHistoryEntry: Vervang het huidige item in de geschiedenisstapel. Als falsevoegt u de nieuwe vermelding toe aan de geschiedenisstapel. De standaardwaarde is false.
• HistoryEntryState: Haalt de status op of stelt deze in om toe te voegen aan de geschiedenisvermelding.

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

Zie de sectie Locatiewijzigingen verwerken/voorkomen voor meer informatie over het verkrijgen van de status die is gekoppeld aan de doelgeschiedenisvermelding.

Vraagreeksen

Gebruik het kenmerk [SupplyParameterFromQuery] om op te geven dat een onderdeelparameter afkomstig is van de querytekenreeks.

Onderdeelparameters die zijn opgegeven uit de queryreeks ondersteunen de volgende typen:

• bool DateTime decimal, double, , float, Guid, int, , . longstring
• Nullbare varianten van de voorgaande typen.
• Rij(en) van de voorgaande typen, ongeacht of ze nulwaarden kunnen bevatten of niet.

De juiste cultuur-invariante opmaak wordt toegepast voor het opgegeven type (CultureInfo.InvariantCulture).

Specificeer de [SupplyParameterFromQuery]-eigenschap van het Name kenmerk om een andere naam voor de queryparameter te gebruiken dan de parameternaam van het onderdeel. In het volgende voorbeeld wordt de C#-naam van de onderdeelparameter {COMPONENT PARAMETER NAME}. Er wordt een andere queryparameternaam opgegeven voor de tijdelijke aanduiding {QUERY PARAMETER NAME}.

In tegenstelling tot eigenschappen van onderdeelparameter ([Parameter]), kunnen [SupplyParameterFromQuery] eigenschappen naast privateworden gemarkeerd als public.

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

In het volgende voorbeeld met een URL van /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman:

• De eigenschap Filter wordt omgezet in scifi stars.
• De eigenschap Page wordt omgezet in 3.
• De Stars matrix wordt gevuld met queryparameters met de naam star (Name = "star") en wordt omgezet in LeVar Burton en Gary Oldman.

Opmerking

De queryreeksparameters in het volgende routeerbare paginaonderdeel werken ook in een niet-routeerbare onderdeel zonder een @page instructie (bijvoorbeeld Search.razor voor een gedeeld Search onderdeel dat in andere onderdelen wordt gebruikt).

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

Gebruik GetUriWithQueryParameter om een of meer queryparameters toe te voegen, te wijzigen of te verwijderen op de huidige URL:

@inject NavigationManager Navigation

...

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

Voor het voorgaande voorbeeld:

• De tijdelijke aanduiding {NAME} geeft de naam van de queryparameter op. De tijdelijke aanduiding {VALUE} geeft de waarde op als ondersteund type. Ondersteunde typen worden verderop in deze sectie vermeld.
• Er wordt een tekenreeks geretourneerd die gelijk is aan de huidige URL met één parameter:
  • Toegevoegd als de naam van de queryparameter niet bestaat in de huidige URL.
  • Bijgewerkt naar de opgegeven waarde als de queryparameter bestaat in de huidige URL.
  • Verwijderd als het type van de opgegeven waarde null-waarde is en de waarde is null.
• De juiste cultuur-invariante opmaak wordt toegepast voor het opgegeven type (CultureInfo.InvariantCulture).
• De naam en waarde van de queryparameter zijn gecodeerd met url's.
• Alle waarden met de overeenkomende naam van de queryparameter worden vervangen als er meerdere exemplaren van het type zijn.

Roep GetUriWithQueryParameters aan om een URI te maken die is samengesteld op basis van Uri met meerdere parameters die zijn toegevoegd, bijgewerkt of verwijderd. Voor elke waarde gebruikt het framework value?.GetType() om het runtimetype voor elke queryparameter te bepalen en de juiste cultuur-invariante opmaak te selecteren. Het framework genereert een fout voor niet-ondersteunde typen.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

De {PARAMETERS} placeholder is een IReadOnlyDictionary<string, object>.

Geef een URI-tekenreeks door aan GetUriWithQueryParameters om een nieuwe URI te genereren op basis van een OPGEGEVEN URI met meerdere parameters die zijn toegevoegd, bijgewerkt of verwijderd. Voor elke waarde gebruikt het framework value?.GetType() om het runtimetype voor elke queryparameter te bepalen en de juiste cultuur-invariante opmaak te selecteren. Het framework genereert een fout voor niet-ondersteunde typen. Ondersteunde typen worden verderop in deze sectie vermeld.

@inject NavigationManager Navigation

...

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

• De placeholder {URI} is de URI met of zonder een querystring.
• De {PARAMETERS} placeholder is een IReadOnlyDictionary<string, object>.

Ondersteunde typen zijn identiek aan ondersteunde typen voor routebeperkingen:

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

Ondersteunde typen zijn onder andere:

• Nullbare varianten van de voorgaande typen.
• Rij(en) van de voorgaande typen, ongeacht of ze nulwaarden kunnen bevatten of niet.

Waarschuwing

Met compressie, die standaard is ingeschakeld, vermijdt u het maken van beveiligde (geverifieerde/geautoriseerde) interactieve serveronderdelen die gegevens uit niet-vertrouwde bronnen weergeven. Niet-vertrouwde bronnen omvatten routeparameters, queryreeksen, gegevens uit JS interop en andere gegevensbronnen die een externe gebruiker kan beheren (databases, externe services). Voor meer informatie, zie ASP.NET Core BlazorSignalR-richtlijnen en richtlijnen voor dreigingsbeperking voor ASP.NET Core Blazor interactieve server-side rendering.

Een queryparameterwaarde vervangen wanneer de parameter bestaat

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

Huidige URL	Gegenereerde URL
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

Een queryparameter en -waarde toevoegen wanneer de parameter niet bestaat

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

Huidige URL	Gegenereerde URL
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

Een queryparameter verwijderen wanneer de parameterwaarde is null

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

Huidige URL	Gegenereerde URL
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/

Queryparameters toevoegen, bijwerken en verwijderen

In het volgende voorbeeld:

• name wordt verwijderd, indien aanwezig.
• age wordt toegevoegd met een waarde van 25 (int), indien niet aanwezig. Indien aanwezig, wordt age bijgewerkt naar een waarde van 25.
• eye color wordt toegevoegd of bijgewerkt naar een waarde van green.

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

Huidige URL	Gegenereerde URL
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

Ondersteuning voor opsommingsbare waarden

In het volgende voorbeeld:

• full name wordt toegevoegd of bijgewerkt naar Morena Baccarin, één waarde.
• ping parameters worden toegevoegd of vervangen door 35, 16, 87 en 240.

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

Huidige URL	Gegenereerde URL
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

Navigeren met een toegevoegde of gewijzigde queryreeks

Als u wilt navigeren met een toegevoegde of gewijzigde querytekenreeks, geeft u een gegenereerde URL door aan NavigateTo.

In het volgende voorbeeld worden oproepen gedaan.

• GetUriWithQueryParameter om de name queryparameter toe te voegen of te vervangen met behulp van een waarde van Morena Baccarin.
• Roept NavigateTo aan om navigatie naar de nieuwe URL te activeren.

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

Ga naar benoemde elementen

Navigeer naar een benoemd element met behulp van de volgende benaderingen met een hash-verwijzing (#) naar het element. Routes naar elementen binnen het onderdeel en routes naar elementen in externe onderdelen maken gebruik van hoofd-relatieve paden. Een voorwaartse slash (/) is optioneel.

Voorbeelden voor elk van de volgende methoden tonen hoe te navigeren naar een element met een id van targetElement in het Counter onderdeel.

• Ankerelement (<a>) met een href:

  <a href="/counter#targetElement">
  

• NavLink component met een href:

  <NavLink href="/counter#targetElement">
  

• NavigationManager.NavigateTo de relatieve URL doorgeven:

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

In het volgende voorbeeld ziet u hoe u navigeert naar benoemde H2-koppen binnen een onderdeel en naar externe onderdelen.

Plaats in de onderdelen Home (Home.razor) en Counter (Counter.razor) de volgende markeringen onder aan de bestaande onderdeelmarkeringen om als navigatiedoelen te fungeren. De <div> maakt kunstmatige verticale ruimte om het schuifgedrag van de browser te demonstreren:

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

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

Voeg het volgende FragmentRouting-onderdeel toe aan de app.

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");
    }
}

Locatiewijzigingen afhandelen/voorkomen

RegisterLocationChangingHandler registreert een handler voor het verwerken van binnenkomende navigatie-gebeurtenissen. De context van de handler die door LocationChangingContext wordt geleverd, bevat de volgende eigenschappen:

• TargetLocation: haalt de doellocatie op.
• HistoryEntryState: Haalt de status op die gekoppeld is aan de doelgeschiedenisvermelding.
• IsNavigationIntercepted: Geeft aan of de navigatie is onderschept door een koppeling.
• CancellationToken: Hiermee wordt een CancellationToken opgehaald om vast te stellen of de navigatie is geannuleerd, bijvoorbeeld om te bepalen of de gebruiker een andere navigatie heeft geactiveerd.
• PreventNavigation: aangeroepen om te voorkomen dat de navigatie doorgaat.

Een onderdeel kan meerdere locatie wijzigende handlers registreren in de OnAfterRender{Async} levenscyclusmethode. Navigatie roept alle locatie wijzigende handlers aan die zijn geregistreerd in de hele app (over meerdere onderdelen) en elke interne navigatie voert ze allemaal parallel uit. Naast NavigateTo worden handlers aangeroepen.

• Wanneer u interne koppelingen selecteert, die koppelingen zijn die verwijzen naar URL's onder het basispad van de app.
• Wanneer u navigeert met behulp van de knoppen voor vooruit en terug in een browser.

Handlers worden alleen uitgevoerd voor navigatie binnen de app. Als de gebruiker een koppeling selecteert die naar een andere site navigeert of de adresbalk handmatig naar een andere site wijzigt, worden de handlers voor locatiewijzigingen niet uitgevoerd.

Implementeer IDisposable en verwijder geregistreerde handlers om de registratie ervan ongedaan te maken. Zie ASP.NET Core Razor componentafhandelingvoor meer informatie.

Belangrijk

Probeer geen DOM-opschoontaken uit te voeren via JavaScript (JS) interop bij het afhandelen van locatiewijzigingen. Gebruik het MutationObserver patroon in JS op de client. Zie ASP.NET Core Blazor JavaScript-interoperabiliteit (JS interop)voor meer informatie.

In het volgende voorbeeld wordt een locatiewijzigende handler geregistreerd voor navigatiegebeurtenissen.

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();
}

Omdat interne navigatie asynchroon kan worden geannuleerd, kunnen er meerdere overlappende aanroepen naar geregistreerde handlers optreden. Er kunnen bijvoorbeeld meerdere handleraanroepen optreden wanneer de gebruiker snel de knop Terug op een pagina selecteert of meerdere koppelingen selecteert voordat een navigatie wordt uitgevoerd. Hier volgt een samenvatting van de asynchrone navigatielogica:

• Als er locatiewijzigingshandlers zijn geregistreerd, wordt alle navigatie aanvankelijk teruggezet en vervolgens herhaald indien de navigatie niet wordt geannuleerd.
• Als er overlappende navigatieaanvragen worden gedaan, annuleert de meest recente aanvraag altijd eerdere aanvragen, wat het volgende betekent:
  • De app kan meerdere selecties van de terug- en doorgaan-knoppen beschouwen als één selectie.
  • Als de gebruiker meerdere koppelingen selecteert voordat de navigatie is voltooid, bepaalt de laatste geselecteerde koppeling de navigatie.

Zie de sectie NavigationOptions voor meer informatie over het doorgeven van NavigateTo naar voor het beheren van vermeldingen en de status van de navigatiegeschiedenisstapel.

Zie de NavigationManagerComponent in de BasicTestApp (dotnet/aspnetcore referentiebron) voor aanvullende voorbeeldcode.

Opmerking

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Het NavigationLock onderdeel onderschept navigatiegebeurtenissen zolang het wordt weergegeven, waardoor elke navigatie wordt geblokkeerd totdat een beslissing wordt genomen om door te gaan of te annuleren. Gebruik NavigationLock wanneer het onderscheppen van de navigatie beperkt kan worden tot de levensduur van een component.

NavigationLock Parameters:

• ConfirmExternalNavigation stelt een browserdialoogvenster in om de gebruiker te vragen om externe navigatie te bevestigen of te annuleren. De standaardwaarde is false. Voor het weergeven van het bevestigingsdialoogvenster is de initiële interactie van de gebruiker met de pagina vereist voordat externe navigatie met de URL in de adresbalk van de browser wordt geactiveerd. Zie Venster: beforeunload gebeurtenis voor meer informatie over de interactievereiste.
• OnBeforeInternalNavigation stelt een callback in voor interne navigatiegebeurtenissen.

In de volgende NavLock component:

• Een poging om de koppeling naar de website van Microsoft te volgen, moet door de gebruiker worden bevestigd voordat de navigatie naar https://www.microsoft.com slaagt.
• PreventNavigation wordt aangeroepen om te voorkomen dat navigatie plaatsvindt als de gebruiker weigert de navigatie te bevestigen via een JavaScript (JS) interop-aanroep die het JSconfirm dialoogvensteropent.

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();
        }
    }
}

Zie het ConfigurableNavigationLock-onderdeel in de BasicTestApp (dotnet/aspnetcore referentiebron) voor aanvullende voorbeeldcode.

Dynamisch gegenereerde NavLink onderdelen via weerspiegeling

NavLink onderdeelvermeldingen kunnen dynamisch worden gemaakt op basis van de onderdelen van de app via weerspiegeling. In het volgende voorbeeld ziet u de algemene benadering voor verdere aanpassing.

Voor de volgende demonstratie wordt een consistente, standaardnaamconventie gebruikt voor de onderdelen van de app:

• Namen van routeerbare onderdelen maken gebruik van Pascal-case†, bijvoorbeeld Pages/ProductDetail.razor.
• Routeerbare bestandspaden voor componenten komen overeen met hun URL's in kebab case, met afbreekstreepjes die tussen woorden verschijnen in de routesjabloon van een component. Een ProductDetail-onderdeel met een routesjabloon van /product-detail (@page "/product-detail") wordt bijvoorbeeld aangevraagd in een browser op de relatieve URL /product-detail.

†Pascal case (upper camel case) is een naamconventie zonder spaties en interpunctie, waarbij de eerste letter van elk woord een hoofdletter is, inclusief het eerste woord.
‡Kebab case is een naamgevingsconventie zonder spaties en leestekens, die gebruikmaakt van kleine letters en streepjes tussen woorden.

In de Razor opmaak van het NavMenu-onderdeel (NavMenu.razor) onder de standaardpagina Home worden NavLink onderdelen toegevoegd uit een verzameling:

<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>

De methode GetRoutableComponents in het @code blok:

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);

Het voorgaande voorbeeld bevat niet de volgende pagina's in de weergegeven lijst met onderdelen:

• Home pagina: de pagina wordt afzonderlijk weergegeven van de automatisch gegenereerde koppelingen, omdat deze boven aan de lijst moet worden weergegeven en de parameter Match moet worden ingesteld.
• Error pagina: de foutpagina wordt alleen door het framework geraadpleegd en zou niet vermeld moeten worden.

Voor een demonstratie van de voorgaande code in een voorbeeld-app verkrijgt u de Blazor Web App of Blazor WebAssembly voorbeeld-app.