ASP.NET Çekirdek Blazor gezintisi

Bu makalede, Blazor içinde sayfa gezintisinin nasıl tetikleneceği ve işleneceği açıklanmaktadır. Kullanıcılar normal HTML bağlantılarını kullanarak farklı sayfalar arasında gezinebilirken, Blazor tam sayfa yeniden yüklemelerini önlemek ve daha sorunsuz bir deneyim sunmak için uygulama içindeki gezintiyi geliştirir. NavLink bileşenini, bağlantı geçerli sayfayla eşleştiğinde otomatik olarak stil uygulayan gezinti bağlantıları oluşturmak için kullanın. C# kodunda programlı gezinti ve URI yönetimi için hizmetini kullanın NavigationManager .

Önemli

Bu makaledeki kod örnekleri, sınıflara ve bileşenlere enjekte edilen Navigation üzerinde çağrılan yöntemleri gösterir.

NavLink bileşeni

Gezinti bağlantıları oluştururken HTML köprü öğelerinin (NavLink) yerine bir <a> bileşen kullanın. Bir NavLink bileşeni, <a> öğesi gibi davranır; ancak, <a> geçerli URL’ye eşleşip eşleşmediğine bağlı olarak bir href CSS sınıfını değiştirir. sınıfı, active kullanıcının görüntülenen gezinti bağlantıları arasında hangi sayfanın etkin sayfa olduğunu anlamasına yardımcı olur. İsteğe bağlı olarak, geçerli rota NavLink.ActiveClass ile eşleştiğinde işlenen bağlantıya özel bir CSS sınıfı uygulamak için href öğesine bir CSS sınıf adı atayın.

Bir NavMenu proje şablonundan oluşturulmuş bir Blazor uygulamanın NavMenu.razor bileşeninde (Blazor):

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

Yukarıdaki örnekte, HomeNavLinkhref="" giriş URL'si ile eşleşir ve yalnızca uygulamanın varsayılan temel yolunda (active) / CSS sınıfını alır. Kullanıcı Counter bileşenine /counter'de ziyaret ettiğinde, ikinci NavLinkactive sınıfını alır.

NavLinkMatch öğesinin Match özniteliğine atayabileceğiniz iki <NavLink> seçenek vardır:

• NavLinkMatch.All: NavLink geçerli URL ile eşleştiği zaman etkindir, sorgu dizesi ve parça göz ardı edilir. Sorgu dizesi/parçası üzerinde eşleştirmeyi eklemek için Microsoft.AspNetCore.Components.Routing.NavLink.EnableMatchAllForQueryStringAndFragment olarak ayarlanmış AppContexttrue anahtarını kullanın.
• NavLinkMatch.Prefix (varsayılan): geçerli URL'nin NavLink herhangi bir ön ekini eşleştirdiğinde etkindir.

Özel eşleştirme mantığını benimsemek için alt sınıf NavLink ve ShouldMatch yöntemini geçersiz kılar. true CSS sınıfını uygulamak istediğinizde yöntemin içinden active'ı döndürün.

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

Ek NavLink bileşen öznitelikleri işlenen bağlantı etiketine aktarılır. Aşağıdaki örnekte, NavLink bileşen özniteliğini target içerir:

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

Aşağıdaki HTML işaretlemesi işlenir:

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

Uyarı

Alt içeriğin Blazor tarafından işlenme biçimi nedeniyle, bir NavLink döngü içindeki for bileşenlerinin işlenmesi, (alt) bileşenin içeriğinde artımlı döngü değişkeni NavLink kullanılıyorsa, yerel bir dizin değişkeni gerektirir:

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

Bu senaryoda dizin değişkeni kullanmak, sadece bileşeni için değil, alt içeriğinde döngü değişkeni kullanan herhangi bir çocuk bileşen için gereklidir.

Alternatif olarak, bir foreach döngü Enumerable.Range kullanın:

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

URI ve gezinti durumu yardımcıları

C# kodunda URI'leri ve gezintiyi yönetmek için kullanın NavigationManager . NavigationManager aşağıdaki tabloda gösterilen olayı ve yöntemleri sağlar.

Üye	Description
Uri	Geçerli mutlak URI'yi alır.
BaseUri	Mutlak URI oluşturmak için göreli URI yollarına ekleyebileceğiniz temel URI'yi (sondaki eğik çizgiyle) alır. Genellikle, BaseUri belgenin href öğesindeki <base> özniteliğine (<head> konumu) karşılık gelir.
NavigateTo	Belirtilen URI'ye gider. Eğer forceLoadfalse ise: Ayrıca geçerli URL'de gelişmiş gezinti kullanılabilir, Blazor'nin gelişmiş gezintisi etkinleştirilir. Aksi takdirde, Blazor istenen URL için tam sayfa yeniden yükleme gerçekleştirir. Eğer forceLoadtrue ise: İstemci tarafı yönlendirmesi devre dışı bırakıldı. Tarayıcı, URI'nin normalde istemci tarafı etkileşimli yönlendirici tarafından işlenip işlenmediğine bakılmaksızın yeni sayfayı sunucudan yüklemeye zorlanır. Daha fazla bilgi için Gelişmiş gezinti ve form işleme bölümüne bakın. replace true ise, tarayıcı geçmişindeki geçerli URI, geçmiş yığınına yeni bir URI eklemek yerine değiştirilir.
LocationChanged	Gezinme konumu değiştiğinde tetiklenen bir olaydır. Daha fazla bilgi için Konum değişiklikleri bölümüne bakın.
NotFound	İstenen kaynağın bulunmadığı senaryoları işlemek için çağrılır. Daha fazla bilgi için Bulunamadı yanıtları bölümüne bakın.
ToAbsoluteUri	Göreli URI'yi mutlak URI'ye dönüştürür.
ToBaseRelativePath	Uygulamanın temel URI'sine bağlı olarak, mutlak bir URI'yi temel URI ön ekine göre bir URI'ye dönüştürür. Örnek olarak, Temel URI önekine göre URI oluşturma bölümüne bakın.
RegisterLocationChangingHandler	Gelen navigasyon olaylarını işlemek için bir işleyici kaydeder. NavigateTo çağrıldığında her zaman işleyici devreye girer.
GetUriWithQueryParameter	Tek bir parametrenin eklenmesi, güncellenmesi veya kaldırılmasıyla NavigationManager.Uri güncellenerek oluşturulan bir URI döndürür. Daha fazla bilgi için Sorgu dizeleri bölümüne bakın.

Konum değişiklikleri

LocationChanged olayı için, LocationChangedEventArgs gezinti olayları hakkında aşağıdaki bilgileri sağlar:

• Location: Yeni konumun URL'si.
• IsNavigationIntercepted: ise true, Blazor tarayıcıdan gezintiyi engelledi. Eğer false, NavigationManager.NavigateTo gezintinin gerçekleşmesine neden oldu.

Aşağıdaki bileşen:

• kullanılarak düğme seçildiğinde Counteruygulamanın Counter.razor bileşenine (NavigateTo) gider.
• Konum değişikliği olayını, NavigationManager.LocationChanged abone olarak işler.

  • Çerçeve HandleLocationChanged çağırdığında, Dispose yöntemi bağlantıdan çıkarılır. Yöntemi devre dışı bırakmak, bileşenin çöp toplanmasına izin verir.

  • Günlükçü uygulaması, düğme seçildiğinde aşağıdaki bilgileri günlüğe kaydeder:

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

Bileşen elden çıkarma hakkında daha fazla bilgi için bkz. ASP.NET Core Razor bileşen elden çıkarma.

Statik sunucu tarafı işleme (statik SSR) sırasında Gezinti Yöneticisi yeniden yönlendirme davranışı

Statik sunucu tarafı işleme (statik SSR) sırasında yeniden yönlendirme için, NavigationManager çerçeve tarafından yakalanan ve NavigationException hatayı yeniden yönlendirmeye dönüştüren bir oluşturma işleminin gerçekleştirilmiş olması gerekir. çağrısından NavigateTo sonra var olan kod çağrılmaz. Visual Studio kullanırken hata ayıklayıcısı özel durumda kesiliyor ve hata ayıklayıcının gelecekteki yeniden yönlendirmeler için durmasını önlemek için Visual Studio kullanıcı arabiriminde bu özel durum türü kullanıcı tarafından işlendiğinde Kesme onay kutusunun seçimini kaldırmanız gerekiyor.

Artık oluşturmamayı <BlazorDisableThrowNavigationException>kabul etmek için true uygulamanın proje dosyasında olarak ayarlanan MSBuild özelliğini kullanabilirsinizNavigationException. Ayrıca, çağrısından NavigateTo sonra daha önce çalıştırılamazken yürütülecek kod. Bu davranış ,NET 10 veya sonraki Blazor Web App bir sürüm proje şablonunda varsayılan olarak etkindir:

<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>

Bulunamadı yanıtları

NavigationManager statik sunucu tarafı işleme (statik SSR) veya genel etkileşimli işleme sırasında istenen kaynağın bulunmadığı senaryoları işlemek için bir NotFound yöntem sağlar:

• Statik SSR: Çağrı NavigationManager.NotFound http durum kodunu 404 olarak ayarlar.

• Etkileşimli işleme: Yönlendiriciye Blazor (Router bileşen) Bulunamadı içeriğini işlemesi için sinyal gönderir.

• Akış işleme: Gelişmiş gezinti etkinse, akış işleme sayfayı yeniden yüklemeden Bulunamayan içeriği işler. Gelişmiş gezinti engellendiğinde, çerçeve sayfa yenilemesi ile Bulunamadı içeriğine yönlendirilir.

Uyarı

Aşağıdaki tartışmada, bir Bulunamadı Razor bileşeninin, Router bileşeninin NotFoundPage parametresine atanabileceği belirtiliyor. parametresi ile NavigationManager.NotFound uyumludur ve bu bölümün ilerleyen bölümlerinde daha ayrıntılı olarak açıklanmıştır.

Akış işleme yalnızca atama () veya NotFoundPage (NotFoundPage="...") gibi UseStatusCodePagesWithReExecute bir yolu olan bileşenleri işleyebilir. DefaultNotFound 404 içeriğinin ("Not found" düz metin) yolu yoktur, bu nedenle akış işleme sırasında kullanılamaz.

Uyarı

Bulunamadı işleme parçası (<NotFound>...</NotFound>), .NET 10 veya sonraki sürümlerde desteklenmez.

NavigationManager.NotFound içerik işleme, yanıtın başlatılıp başlatılmadığından (sırayla) bağımsız olarak aşağıdakileri kullanır:

• Ayarlanırsa NotFoundEventArgs.Path , atanan sayfanın içeriğini işler.
• Router.NotFoundPage ayarlandıysa, atanan sayfayı görüntüle.
• Yapılandırıldıysa Durum Kodu Sayfaları Yeniden Yürütme Ara Yazılımı sayfası.
• Önceki yaklaşımlardan hiçbiri benimsenmezse eylem yoktur.

Durum Kodu Sayfalarını Yeniden Yürütme Ara YazılımıUseStatusCodePagesWithReExecute, tarayıcının adres çubuğuna yanlış bir URL yazılması veya uygulamada bir uç noktası olmayan bir bağlantının seçilmesi gibi tarayıcı tabanlı adres yönlendirme sorunları için önceliklidir.

Bir bileşen statik olarak işlendiğinde (statik SSR) ve NavigationManager.NotFound çağrıldığında yanıtta 404 durum kodu ayarlanır:

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

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

Genel etkileşimli işleme için "Not Found" içeriği sağlamak amacıyla, bir "Not Found" sayfası (Razor bileşeni) kullanın.

Uyarı

Proje Blazor şablonu bir NotFound.razor sayfa içerir. NavigationManager.NotFound her çağrıldığında, bu sayfa otomatik olarak işlenir ve eksik yolları tutarlı bir kullanıcı deneyimiyle ele almayı mümkün hale getirir.

Pages/NotFound.razor:

@page "/not-found"
@layout MainLayout

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

Bileşen NotFound yönlendiricinin NotFoundPage parametresine atanır. NotFoundPage , ara yazılım olmayanlarBlazor da dahil olmak üzere Durum Kodu Sayfaları Yeniden Yürütme Ara Yazılımı arasında kullanılabilecek yönlendirmeyi destekler.

Aşağıdaki örnekte, önceki NotFound bileşen uygulamanın Pages klasöründe bulunur ve parametresine NotFoundPage geçirilir:

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

Bir bileşen genel etkileşimli işleme modunda işlendiğinde NavigationManager.NotFound çağrıldığında, yönlendiriciye Blazor bileşenini işlemesi için NotFound sinyal gönderir.

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

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

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

Bildirimler için OnNotFound olayını, NavigationManager.NotFound çağrıldığında kullanabilirsiniz. Etkinlik yalnızca NavigationManager.NotFound çağrıldığında tetiklenir, herhangi bir 404 yanıtı için tetiklenmez. Örneğin, HttpContextAccessor.HttpContext.Response.StatusCode'yi 404'ye ayarlamak NavigationManager.NotFound/OnNotFound tetiklemez.

Özel yönlendirici uygulayan uygulamalar da kullanabilir NavigationManager.NotFound. Özel yönlendirici, yanıtın durumuna bağlı olarak, bulunamayan içeriği iki kaynaktan görüntüleyebilir:

• Yanıt durumundan bağımsız olarak, sayfanın yeniden yürütme yolu UseStatusCodePagesWithReExecute öğesine aktarılabilir.

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

• Yanıt başlatıldığında, yönlendiriciye abone olarak NotFoundEventArgs.Path kullanılabilir:

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

Etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) benimseyen bileşenler için aşağıdaki örnekte, çağrılan yere OnNotFound bağlı olarak özel içerik işlenir. Olay, bileşen başlatmada bir film bulunamadığında aşağıdaki Movie bileşen tarafından tetiklenirse, özel bir ileti istenen filmin bulunamadığını belirtir. Olay aşağıdaki örnekteki User bileşen tarafından tetikleniyorsa, farklı bir ileti kullanıcının bulunamadığını belirtir.

Aşağıdaki NotFoundContext hizmet, içerik bileşenler tarafından bulunamadığında bağlamı ve iletiyi yönetir.

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

Hizmet sunucu tarafı Program dosyasına kaydedilir:

builder.Services.AddScoped<NotFoundContext>();

NotFound sayfası NotFoundContext öğesini ekler ve başlığı ve iletiyi görüntüler.

Pages/NotFound.razor:

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

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

Routes bileşeni (Routes.razor) parametresi aracılığıyla NotFound bileşenini Bulunamadı sayfası olarak ayarlarNotFoundPage.

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

Aşağıdaki örnek bileşenlerde:

• NotFoundContext hizmet, NavigationManager ile birlikte enjekte edilir.
• OnInitializedAsync, HandleNotFound olayına atanmış bir olay işleyicisidir OnNotFound içinde. HandleNotFound bileşeninde bulunan içerik için başlık ve mesaj ayarlamak amacıyla NotFoundContext.UpdateContext çağrılır.
• Bileşenler normalde veritabanı gibi bir veri deposundan film veya kullanıcı almak için rota parametresinden bir kimlik kullanır. Aşağıdaki örneklerde, bir varlık bulunamazsa ne olacağının benzetimini yapmak için hiçbir varlık döndürülemez (null).
• OnInitializedAsync öğesine hiçbir varlık döndürülmüyorsa NavigationManager.NotFound çağrılır ve bu, OnNotFound olayını ve HandleNotFound olay işleyicisini tetikler. Bulunamadı içeriği yönlendirici tarafından görüntülenir.
• HandleNotFound yöntemi, IDisposable.Dispose içindeki bileşen elden çıkarılırken kancadan çıkarılır.

Movie bileşen (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 bileşen (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; }
    }
}

Bir test uygulamasıyla yerel bir gösterimde önceki bileşenlere ulaşmak için, `NavMenu` ve `NavMenu.razor` bileşenlerine ulaşmak amacıyla `Movie` bileşeninde (User) girdiler oluşturun. Aşağıdaki örnekte, yol parametreleri olarak geçirilen varlık kimlikleri, bileşenler tarafından kullanılmadığı için hiçbir etkisi olmayan sahte değerlerdir ve bu değerler bir film veya kullanıcı bulunamamasını simüle eder.

NavMenu.razor'da:

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

Gelişmiş gezinti ve form işleme

Bu bölüm s için Blazor Web Appgeçerlidir.

Blazor Web Apps, sayfa gezintisi ve form işleme istekleri için iki tür yönlendirme yeteneğine sahiptir:

• Normal gezinti (çapraz belge gezintisi): İstek URL'si için tam sayfa yeniden yükleme tetikleniyor.
• Gelişmiş gezinti (aynı belge gezintisi): Blazor isteği durdurur ve bunun yerine bir fetch istek gerçekleştirir. Blazor ardından yanıt içeriğini sayfanın DOM'una yerleştirir. Blazor'nin gelişmiş gezinti ve form işleme özelliği, tam sayfa yeniden yükleme gereksinimini önler ve sayfa durumunun daha fazlasını korur, bu nedenle sayfalar genellikle kullanıcının sayfadaki kaydırma konumunu kaybetmeden daha hızlı yüklenir.

Gelişmiş gezinti şu durumlarda kullanılabilir:

• Blazor Web App betik (blazor.web.js) kullanılır, Blazor Server betik (blazor.server.js) ya da Blazor WebAssembly betik (blazor.webassembly.js) değil.
• Özellik açıkça devre dışı bırakılmaz.
• Hedef URL, iç temel URI alanı (uygulamanın temel yolu) içindedir ve sayfa bağlantısında data-enhance-nav özniteliği false olarak ayarlanmamıştır.

Sunucu tarafı yönlendirme ve gelişmiş gezinti etkinleştirildiyse, konum değiştirme işleyicileri yalnızca etkileşimli bir çalışma zamanından başlatılan programlı gezinti için çağrılır. Gelecek sürümlerde, bağlantıyı takip etme gibi ek gezinti türleri de konum değiştirme işleyicilerini çağırabilir.

Gelişmiş bir gezinti gerçekleştiğinde, LocationChanged Interactive Server ve WebAssembly çalışma zamanlarına kayıtlı olay işleyicileri genellikle çağrılır. Konum değiştiren işleyicilerin geliştirilmiş bir gezinmeye müdahale etmeyebileceği durumlar vardır. Örneğin, kullanıcı etkileşimli bir çalışma zamanı kullanılabilir duruma gelmeden önce başka bir sayfaya geçebilir. Bu nedenle, işleyicinin yürütülmesi garanti edilmediğinden, uygulama mantığının bir konum değiştirme işleyicisini çağırmaya güvenmemesi önemlidir.

NavigateTo çağrısı yaparken:

• Eğer forceLoadfalse ise, varsayılan değer budur:
  • Ayrıca geçerli URL'de gelişmiş gezinti kullanılabilir, Blazor'nin gelişmiş gezintisi etkinleştirilir.
  • Aksi takdirde, Blazor istenen URL için tam sayfa yeniden yükleme gerçekleştirir.
• Eğer forceLoadtrue ise: Blazor, gelişmiş gezinti kullanılabilir olsun veya olmasın istenen URL için tam sayfa yeniden yükleme gerçekleştirir.

Öğesini çağırarak NavigationManager.Refresh(bool forceLoad = false), varsa her zaman gelişmiş bir gezinme gerçekleştirerek geçerli sayfayı yenileyebilirsiniz. Gelişmiş gezinti kullanılamıyorsa, Blazor tam sayfa yeniden yükleme gerçekleştirir.

Navigation.Refresh();

true parametresine geçin, böylece gelişmiş gezinme kullanılabilir olsa bile tam sayfa yeniden yüklemenin her zaman gerçekleştirildiğinden emin olun:

Navigation.Refresh(true);

Gelişmiş gezinti varsayılan olarak etkindir, ancak HTML özniteliği kullanılarak data-enhance-nav hiyerarşik olarak ve bağlantı başına denetlenebilir.

Aşağıdaki örnekler gelişmiş gezintiyi devre dışı bırakır:

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

Eğer hedef bir uç nokta değilse, gelişmiş navigasyon uygulanmaz ve istemci tarafı JavaScript, tam sayfa yüklemesi olarak yeniden denenir. Bu, çerçevenin mevcut bir sayfaya eklenmemesi gereken dış sayfalar hakkında karışıklığı önler.

Gelişmiş form işlemeyi etkinleştirmek için Enhance parametresini EditForm formlarına veya data-enhance özniteliğini HTML formlarına (<form>) ekleyin.

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

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

Gelişmiş form işleme hiyerarşik değildir ve alt formlara aktarılmaz.

❌ Desteklenmeyen: Formun atası öğesinde gelişmiş gezintiyi ayarlayarak formun gelişmiş gezintisini etkinleştiremezsiniz.

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

Gelişmiş form gönderileri yalnızca Blazor uç noktalarıyla çalışır. Blazor uç noktası olmayan bir yere gelişmiş bir form göndermek hatayla sonuçlanır.

Gelişmiş gezintiyi devre dışı bırakmak için:

• için parametresini kaldırın (veya olarak ayarlayın: ).
• HTML <form> için, form öğesinden data-enhance özniteliğini kaldırın (veya false olarak ayarlayın: data-enhance="false").

Blazor'nin gelişmiş gezintisi ve form işlemesi, güncelleştirilmiş içerik sunucu işlemenin parçası değilse DOM'da yapılan dinamik değişiklikleri geri alabilir. Bir öğenin içeriğini korumak için özniteliğini data-permanent kullanın.

Aşağıdaki örnekte, sayfa yüklendiğinde öğenin içeriği <div> bir betik tarafından dinamik olarak güncelleştirilir:

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

İstemci üzerinde Blazor başlatıldıktan sonra, enhancedload olayını kullanarak gelişmiş sayfa güncellemelerini dinleyebilirsiniz. Bu, gelişmiş bir sayfa güncelleştirmesi tarafından geri alınmış olabilecek dom değişikliklerinin yeniden uygulanmasına olanak tanır.

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

Gelişmiş gezinti ve form işlemeyi genel olarak devre dışı bırakmak için bkz. ASP.NET Core Blazor başlatma.

Gelişmiş gezinti, statik sunucu tarafı işleme (statik SSR) ile JavaScript yüklerken özel dikkat gerektirir. Daha fazla bilgi için bkz . ASP.NET Core Blazor JavaScript ile statik sunucu tarafı işleme (statik SSR).

Temel URI ön ekine göre bir URI oluşturma

Uygulamanın temel URI'sine bağlı olarak, ToBaseRelativePath mutlak bir URI'yi temel URI ön ekine göre bir URI'ye dönüştürür.

Aşağıdaki örneği inceleyin:

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

Uygulamanın temel URI'si ise https://localhost:8000aşağıdaki sonuçlar elde edilir:

• https://localhost:8000/segment değerlerinin inputURI içinde geçirilmesi, bir baseRelativePath sonuç verirsegment.
• https://localhost:8000/segment1/segment2 değerlerinin inputURI içinde geçirilmesi, bir baseRelativePath sonuç verirsegment1/segment2.

Uygulamanın temel URI'si inputURI ile eşleşmiyorsa bir ArgumentException fırlatılır.

https://localhost:8001/segment adlı değerin inputURI içinde iletilmesi, aşağıdaki özel duruma neden olur:

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

Gezinme geçmişi durumu

, NavigationManager uygulama tarafından yapılan her konum değişikliğiyle ilişkili gezinti geçmişi durumunu korumak için tarayıcının Geçmiş API'sini kullanır. Geçmiş durumunu korumak, özelliklegibi dış kimlik sağlayıcılarıyla kullanıcıları doğrularken, dış yeniden yönlendirme senaryolarında yararlıdır. Daha fazla bilgi için Gezinti seçenekleri bölümüne bakın.

Gezinme seçenekleri

NavigationOptions öğesini NavigateTo öğesine aşağıdaki davranışları denetlemek için geçir:

• ForceLoad: İstemci tarafı yönlendirmesini atlayıp tarayıcıyı URI'nin istemci tarafı yönlendiricisi tarafından işlenip işlenmediğine bakılmaksızın yeni sayfayı sunucudan yüklemeye zorlar. Varsayılan değer şudur: false.
• ReplaceHistoryEntry: Geçmiş yığınındaki geçerli girdiyi değiştirin. Eğer false ise, yeni girdiyi geçmiş yığınına ekle. Varsayılan değer şudur: false.
• HistoryEntryState: Geçmiş girdisine eklenecek durumu alır veya ayarlar.

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

Konum değişikliklerini işlerken hedef geçmiş girişiyle ilişkili durumu alma hakkında daha fazla bilgi için Konum değişikliklerini işleme/engelleme bölümüne bakın.

Sorgu dizeleri

Bir bileşen parametresinin [SupplyParameterFromQuery] sorgu dizesinden geldiğini belirtmek için özniteliğini kullanın.

Sorgu dizesinden sağlanan bileşen parametreleri aşağıdaki türleri destekler:

• bool, , DateTimedecimal, , double, float, Guid, int, . longstring
• Önceki türlerin null olabilen varyantları.
• Önceki türlerin dizileri, null değer atanabilir veya null atanamaz olsun.

Verilen tür (CultureInfo.InvariantCulture) için doğru kültür sabiti biçimlendirmesi uygulanır.

Bileşen parametre adından [SupplyParameterFromQuery] farklı bir sorgu parametresi adı kullanmak için özniteliğin Name özelliğini belirtin. Aşağıdaki örnekte, bileşen parametresinin C# adı şeklindedir {COMPONENT PARAMETER NAME}. Yer tutucu için {QUERY PARAMETER NAME} farklı bir sorgu parametresi adı belirtilir:

Bileşen parametresi özelliklerinden ([Parameter]) farklı olarak, [SupplyParameterFromQuery] özellikleri private ek olarak public ile işaretlenebilir.

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

Aşağıdaki örnek, URL'si /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman olan bir örnektir.

• Filter özelliği scifi stars olarak çözülür.
• Page özelliği 3 olarak çözülür.
• Dizi Stars, star (Name = "star") adlı sorgu parametrelerinden doldurulur ve LeVar Burton ile Gary Oldman olarak çözümlenir.

Uyarı

Aşağıdaki yönlendirilebilir sayfa bileşenindeki sorgu dizesi parametreleri, yönergesi olmayan yönlendirilemez bileşende de çalışır (örneğin, diğer bileşenlerde kullanılan paylaşılan bir @page bileşen için).

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

Geçerli URL'de bir veya daha fazla sorgu parametresi eklemek, değiştirmek veya kaldırmak için kullanın GetUriWithQueryParameter :

@inject NavigationManager Navigation

...

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

Yukarıdaki örnek için:

• Yer tutucu, {NAME} sorgu parametresi adını belirtir. Yer tutucu, {VALUE} değeri desteklenen bir tür olarak belirtir. Desteklenen türler bu bölümün ilerleyen bölümlerinde listelenmiştir.
• Tek bir parametreyle geçerli URL'ye eşit bir dize döndürülür:
  • Sorgu parametresi adı geçerli URL'de yoksa eklenir.
  • Sorgu parametresi geçerli URL'de mevcutsa sağlanan değere güncelleştirildi.
  • Sağlanan değerin türü null atanabilir ve değer null ise kaldırılır.
• Verilen tür (CultureInfo.InvariantCulture) için doğru kültür sabiti biçimlendirmesi uygulanır.
• Sorgu parametresi adı ve değeri URL ile kodlanmıştır.
• Eşleşen sorgu parametresi adına sahip tüm değerler, türün birden çok örneği varsa değiştirilir.

GetUriWithQueryParameters ile oluşturulan ve birden çok parametrenin eklenip, güncellenip veya kaldırıldığı bir URI oluşturmak için Uri çağırın. Her bir değer için, value?.GetType() her sorgu parametresinin çalışma zamanı tipini belirlemek ve doğru kültüre bağımsız biçimlendirmeyi seçmek için kullanılır. Çerçeve desteklenmeyen türler için bir hata oluşturur.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

Yer tutucu {PARAMETERS} bir IReadOnlyDictionary<string, object>'dir.

Birden çok parametre eklenmiş, güncellenmiş veya kaldırılmış yeni bir URI oluşturmak için, sağlanan bir URI'den GetUriWithQueryParameters'e bir URI dizesi geçirin. Her bir değer için, value?.GetType() her sorgu parametresinin çalışma zamanı tipini belirlemek ve doğru kültüre bağımsız biçimlendirmeyi seçmek için kullanılır. Çerçeve desteklenmeyen türler için bir hata oluşturur. Desteklenen türler bu bölümün ilerleyen bölümlerinde listelenmiştir.

@inject NavigationManager Navigation

...

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

• Bu {URI} yer tutucu, sorgu dizesi olan veya olmayan URI'dir.
• Yer tutucu {PARAMETERS} bir IReadOnlyDictionary<string, object>'dir.

Desteklenen türler, yol kısıtlamaları için desteklenen türlerle aynıdır:

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

Desteklenen türler şunlardır:

• Önceki türlerin null olabilen varyantları.
• Önceki türlerin dizileri, null değer atanabilir veya null atanamaz olsun.

Uyarı

Varsayılan olarak etkin olan sıkıştırma ile güvenilmeyen kaynaklardan veri işleyen güvenli (kimliği doğrulanmış/yetkilendirilmiş) etkileşimli sunucu tarafı bileşenleri oluşturmaktan kaçının. Güvenilmeyen kaynaklar arasında yol parametreleri, sorgu dizeleri, birlikte çalışma verileri JS ve üçüncü taraf bir kullanıcının denetleyebileceği diğer veri kaynakları (veritabanları, dış hizmetler) bulunur. Daha fazla bilgi için bkz . ASP.NET Core BlazorSignalR kılavuzu ve ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu.

Parametre mevcut olduğunda sorgu parametresi değerini değiştirme

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

Geçerli URL	Oluşturulan 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

Parametre mevcut olmadığında sorgu parametresi ve değeri ekleme

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

Geçerli URL	Oluşturulan 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

Parametre değeri null olduğunda sorgu parametresini kaldırın.

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

Geçerli URL	Oluşturulan 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/

Sorgu parametrelerini ekleme, güncelleştirme ve kaldırma

Aşağıdaki örnekte:

• name varsa kaldırılır.
• age, değeri 25 (int) olarak, eğer mevcut değilse eklenir. Varsa, age değerine 25güncelleştirilir.
• eye color bir değeri olan green olarak eklenir veya güncellenir.

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

Geçerli URL	Oluşturulan 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

Numaralandırılabilir değerler için destek

Aşağıdaki örnekte:

• full name tek bir değer olan Morena Baccarin olarak eklenir veya güncellenir.
• pingparametreleri , 3516 ve 87ile 240eklenir veya değiştirilir.

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

Geçerli URL	Oluşturulan 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

Eklenen veya değiştirilen sorgu dizesiyle gezinme

Eklenen veya değiştirilen bir sorgu dizesiyle gezinmek için oluşturulan URL'yi NavigateTo öğesine geçirin.

Aşağıdaki örnek çağrı yapar:

• GetUriWithQueryParameter parametresini name eklemek veya değiştirmek için Morena Baccarin değerini kullanarak.
• Yeni URL'ye navigasyonu tetiklemek için NavigateTo çağrılır.

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

Adlandırılmış öğelere gitme

Adlandırılmış bir öğeye, aşağıdaki yaklaşımları kullanarak, karma (#) bir referans ile gidin. Bileşen içindeki öğelere yönlendirmeler ve dış bileşenlerdeki öğelere yönlendirmeler kök göreli yolları kullanır. Önde eğik çizgi (/) kullanımı isteğe bağlıdır.

Aşağıdaki yaklaşımların her biri için, idtargetElement ile bir öğeye Counter bileşeni içinde nasıl gezineceğinizi gösteren örnekler verilmiştir.

• <a> olan bir href bağlantı öğesi:

  <a href="/counter#targetElement">
  

• NavLink bileşenine sahip: href

  <NavLink href="/counter#targetElement">
  

• NavigationManager.NavigateTo göreli URL'yi aktarma:

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

Aşağıdaki örnek, bir bileşen içindeki adlandırılmış H2 başlıklarına ve dış bileşenlere gezinmeyi gösterir.

Home (Home.razor) ve Counter (Counter.razor) bileşenlerinde, gezinti hedefleri olarak görev yapmak için mevcut bileşen işaretlemesinin altlarına aşağıdaki işaretlemeyi yerleştirin. , <div> tarayıcı kaydırma davranışını göstermek için yapay dikey alan oluşturur:

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

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

Aşağıdaki FragmentRouting bileşeni uygulamaya ekleyin.

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

Konum değişikliklerini işleme/engelleme

RegisterLocationChangingHandler gelen gezinti olaylarını işlemek için bir işleyici kaydeder. tarafından LocationChangingContext sağlanan işleyici bağlamı aşağıdaki özellikleri içerir:

• TargetLocation: Hedef konumu alır.
• HistoryEntryState: Hedef geçmiş girişiyle ilişkili durumu alır.
• IsNavigationIntercepted: Gezintinin bir bağlantıdan kesilip kesilmediğini belirler.
• CancellationToken: Kullanıcının farklı bir gezinti başlattığını belirlemek gibi nedenlerle gezintinin iptal edilip edilmediğini anlamak için bir CancellationToken alır.
• PreventNavigation: Navigasyonun sürmesini önlemek için çağrılır.

Bir bileşen, yaşam döngüsü yönteminde birden fazla konum değiştirme işleyicisini kaydedebilir. Gezinti, uygulamanın tamamında kayıtlı olan tüm konum değiştirme işleyicilerini çağırır (birden çok bileşen arasında) ve tüm iç gezintiler bunların tümünü paralel olarak yürütür. NavigateTo ek olarak, işleyiciler çağrılır.

• İç bağlantılar, yani uygulamanın temel yolunun altındaki URL'lere işaret eden bağlantılar seçilirken.
• Tarayıcıda ileri ve geri düğmelerini kullanarak gezinirken.

İşleyiciler yalnızca uygulama içindeki dahili gezinme için yürütülür. Kullanıcı farklı bir siteye bağlanan bir bağlantı seçerse veya adres çubuğunu el ile farklı bir siteye değiştirirse, konum değiştirme işleyicileri yürütülemez.

IDisposable ile uygulayıp sonlandırarak kayıtlı işleyicilerin kaydını kaldırın. Daha fazla bilgi için bkz. ASP.NET Core Razor bileşen imhası.

Önemli

Konum değişikliklerini işlerken JavaScript (JS) interop kullanarak DOM temizleme görevlerini yürütmeyi denemeyin. İstemcide MutationObserver düzeniniJS içinde kullanın. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript interoperabilite (JSinterop).

Aşağıdaki örnekte, gezinti olayları için konum değiştirme işleyicisi kaydedilir.

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

İçerik gezintisi zaman uyumsuz şekilde iptal edilebildiği için, kayıtlı işleyicilere birden fazla çakışan çağrı oluşabilir. Örneğin, kullanıcı sayfadaki geri düğmesini hızla seçtiğinde veya gezinti yürütülmeden önce birden çok bağlantı seçtiğinde birden çok işleyici çağrısı oluşabilir. Zaman uyumsuz gezinti mantığının özeti aşağıda verilmiştir:

• Eğer herhangi bir konum değiştirme işleyicisi kaydedilmişse, başlangıçta tüm gezinti iptal edilir ve gezinti iptal edilmemişse tekrar gerçekleştirilir.
• Çakışan gezinti istekleri yapılırsa, en son istek her zaman önceki istekleri iptal eder; bu da aşağıdaki anlamına gelir:
  • Uygulama birden çok geri ve ileri düğmesi seçimini tek bir seçim olarak değerlendirebilir.
  • Kullanıcı gezinti tamamlanmadan önce birden çok bağlantı seçerse, seçilen son bağlantı gezintiyi belirler.

Gezinti geçmişi yığını girdilerini ve durumunu kontrol etmek üzere NavigationOptions'yi NavigateTo'ye iletme hakkında daha fazla bilgi için Gezinti seçenekleri bölümüne bakın.

Ek örnek kod için, NavigationManagerComponent öğesine bakın BasicTestApp (dotnet/aspnetcore başvuru kaynağı).

Uyarı

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dallar veya etiketler arasında geçiş yap açılır listesini kullanın. Daha fazla bilgi için ASP.NET Core kaynak kodu için bir sürüm etiketi nasıl seçilir (dotnet/AspNetCore.Docs #26205) bölümüne bakın.

BileşenNavigationLock, ekranda gösterildiği sürece gezinti olaylarına müdahale eder, devam etme veya iptal etme kararı verilene kadar belirli bir gezinmeyi etkili bir şekilde 'kilitler'. NavigationLock ifadesini, gezinti kesme işleminin kapsamı bir bileşenin yaşam süresine ayarlanabildiğinde kullanın.

NavigationLock Parametre:

• ConfirmExternalNavigation , kullanıcıdan dış gezintiyi onaylamasını veya iptal etmesini isteyen bir tarayıcı iletişim kutusu ayarlar. Varsayılan değer şudur: false. Onay iletişim kutusunun görüntülenmesi için, tarayıcının adres çubuğundaki URL ile dış gezinti tetiklemeden önce sayfayla ilk kullanıcı etkileşimi gerekir. Etkileşim gereksinimi hakkında daha fazla bilgi için bkz. Pencere: beforeunload olay.
• OnBeforeInternalNavigation dahili gezinme olayları için bir geri çağırma ayarlar.

Aşağıdaki NavLock bileşeninde:

• Kullanıcının Microsoft'un web sitesine gitmek için bağlantıyı izleme girişimini onaylaması gerekir, aksi takdirde gezinti https://www.microsoft.com başarılı olmayacaktır.
• PreventNavigation, kullanıcı, JS iletişim kutusunu başlatan aracılığıyla navigasyonu onaylamayı reddederse, navigasyonun gerçekleşmesini engellemek için çağrılır.

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

Ek örnek kodlar için ConfigurableNavigationLock bileşenine BasicTestApp (dotnet/aspnetcore başvuru kaynağı) bakın.

Yansıma aracılığıyla dinamik olarak oluşturulan NavLink bileşenler

NavLink bileşen girişleri, yansıma yoluyla uygulamanın bileşenlerinden dinamik olarak oluşturulabilir. Aşağıdaki örnekte, daha fazla özelleştirmeye yönelik genel yaklaşım gösterilmektedir.

Aşağıdaki gösterimde, uygulamanın bileşenleri için tutarlı, standart bir adlandırma kuralı kullanılır:

• Yönlendirilebilir bileşen dosya adları Pascal case† kullanır, örneğin Pages/ProductDetail.razor.
• Yönlendirilebilir bileşen dosya yolları, bileşenin yol şablonundaki sözcükler arasında görünen kısa çizgilerle kebap stilindeki URL'leriyle eşleşir. Örneğin, rota şablonu ProductDetail olan /product-detail bileşeni (@page "/product-detail") tarayıcıda /product-detail göreli URL'de isteniyor.

†Pascal Biçimi (Deve Büyük Harf) boşluk veya noktalama işareti kullanmaksızın, her sözcüğün, ilk sözcük dahil, ilk harfinin büyük yazıldığı bir adlandırma kuralıdır.
‡Kebab case yazım biçimi, sözcükler arasında küçük harfler ve tireler kullanan, boşluklar ve noktalama işaretleri içermeyen bir adlandırma kuralıdır.

Razor Varsayılan NavMenu sayfanın altındaki bileşenin NavMenu.razor (Home) işaretlemesinde, NavLink bileşenler bir koleksiyondan eklenir:

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

GetRoutableComponents Bloktaki @code yöntemi:

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

Yukarıdaki örnek, işlenen bileşenler listesinde aşağıdaki sayfaları içermez:

• Home page: Sayfa, otomatik olarak oluşturulan bağlantılardan ayrı olarak listelenir çünkü listenin en üstünde görünmesi ve Match parametresini ayarlaması gerektiğinden.
• Error page: Hata sayfasına yalnızca çerçeve erişebilir ve bu sayfa listelenmemelidir.

Bir örnek uygulamadaki önceki kodun gösterimi için veya Blazor Web App örnek uygulamasını edininBlazor WebAssembly.