Aracılığıyla paylaş

ASP.NET Temel Blazor yönlendirme ve gezinti

Dikkat

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 9 sürümüne bakın.

Bu makalede, uygulama isteği yönlendirmesinin nasıl yönetileceğini Blazor ve gezinti bağlantıları oluşturmak için bileşenin NavLink nasıl kullanılacağı açıklanmaktadır.

Önemli

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

Statik ve etkileşimli yönlendirme

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

Prerendering etkinleştirilirse, Blazor yönlendirici (Router bileşeni, <Router> içindeRoutes.razor) statik sunucu tarafı işleme (statik SSR) sırasında bileşenlere statik yönlendirme gerçekleştirir. Bu tür bir yönlendirme statik yönlendirme olarak adlandırılır.

Bileşene Routes etkileşimli işleme modu atandığında, sunucuda statik yönlendirme ile statik SSR'nin ardından Blazor yönlendirici etkileşimli olarak çalışmaya başlar. Bu tür bir yönlendirme, etkileşimli yönlendirme olarak adlandırılır.

Statik yönlendiriciler, hangi bileşenin işleneceğini belirlemek için uç nokta yönlendirmesini ve HTTP istek yolunu kullanır. Yönlendirici etkileşimli hale geldiğinde, hangi bileşenin işleneceğini belirlemek için belgenin URL'sini (tarayıcının adres çubuğundaki URL) kullanır. Bu, belgenin URL'si başka bir geçerli iç URL'ye dinamik olarak değişirse etkileşimli yönlendiricinin hangi bileşenin işlendiğini dinamik olarak değiştirebileceği ve yeni sayfa içeriğini getirmek için bir HTTP isteği gerçekleştirmeden bunu gerçekleştirebileceği anlamına gelir.

Sunucudan normal bir sayfa isteğiyle yeni sayfa içeriği istenmediğinden etkileşimli yönlendirme de ön kayıt işlemini engeller. Daha fazla bilgi için bkz . Prerender ASP.NET Core Razor bileşenleri.

Yol şablonları

Bileşen Router , bileşenlere yönlendirmeyi Razor etkinleştirir ve uygulamanın Routes bileşeninde (Components/Routes.razor) bulunur.

Router bileşeni, Razor bileşenlerine yönlendirmeyi etkinleştirir. Router bileşeni, App bileşeninin içinde (App.razor) kullanılır.

Bir Razor bileşeni (.razor) @page yönergesiyle derlendiğinde, oluşturulan bileşen sınıfına bileşenin rota şablonunu belirten bir sağlanır.

Uygulama başladığında, Yönlendirici AppAssembly olarak belirtilen derleme, RouteAttribute içeren bileşenlerin yol bilgilerini toplamak için taranır.

Çalışma zamanında RouteView bileşeni:

  • RouteData ve herhangi bir yol parametresiyle birlikte Router öğesini alır.
  • Belirtilen bileşeni, diğer iç içe geçmiş düzenler de dahil olmak üzere kendi düzeniyle çizer.

İsteğe bağlı olarak, içermeyen bileşenler için yönergesiyle bir düzen sınıfı içeren bir parametre belirtin. Çerçevenin Blazor proje şablonları, uygulamanın varsayılan düzeni olarak bileşeni (MainLayout) belirtirMainLayout.razor. Düzenler hakkında daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor düzenleri.

Bileşenler, birden çok yönerge kullanarak birden çok @page yol şablonunu destekler. Aşağıdaki örnek bileşen, /blazor-route ve /different-blazor-route istekleri yapıldığında yüklenir.

BlazorRoute.razor:

@page "/blazor-route"
@page "/different-blazor-route"

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

@page "/blazor-route"
@page "/different-blazor-route"

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

Önemli

URL'lerin doğru çözülmesi için, özniteliğinde belirtilen uygulamanın temel yolunu içeren etiketi ( içeriğin konumu) uygulamada yer almalıdır. Daha fazla bilgi için bkz. ASP.NET Core Blazor uygulama temel yolu.

sorgu Router dizesi değerleriyle etkileşim kurmaz. Sorgu dizeleriyle çalışmak için Sorgu dizeleri bölümüne bakın.

Dize değişmez değeri olarak yol şablonunu @page yönergesiyle belirtmeye alternatif olarak, sabitlere dayalı yol şablonları @attribute yönergesiyle belirtilebilir.

Aşağıdaki örnekte, bir bileşendeki @page yönergesi, @attribute yönergesi ile ve uygulamadaki başka bir yerde "Constants.CounterRoute" olarak ayarlanan sabit tabanlı yol şablonuyla /counter değiştirilir:

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

Dikkat

.NET 5.0.1 sürümünün çıkışı ve ek 5.x sürümleri için, Router bileşeni PreferExactMatches parametresini @true olarak ayarlayacaktır. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den .NET 5'e geçiş.

Bir öğeyi gezinmede odaklamak

Bileşen, FocusOnNavigate bir sayfadan diğerine geçtikten sonra kullanıcı arabirimi odağını CSS seçicisine göre bir öğeye ayarlar.

<FocusOnNavigate RouteData="routeData" Selector="h1" />

Router bileşen yeni bir sayfaya gittiği zaman FocusOnNavigate, bileşen, odağı sayfanın en üst düzey üst bilgisine (<h1>) ayarlar. Bu, ekran okuyucu kullanılırken sayfa gezintisi duyurulmasını sağlamaya yönelik yaygın bir stratejidir.

İçerik bulunamadığında özel içerik sağlama

Bileşen, Router istenen yol için içerik bulunamazsa uygulamanın özel içerik belirtmesine olanak tanır.

Bileşenin RouterNotFound parametresi için özel içerik ayarlayın:

<Router ...>
    ...
    <NotFound>
        ...
    </NotFound>
</Router>

Rastgele öğeler, diğer etkileşimli bileşenler gibi parametre içeriği NotFound olarak desteklenir. Varsayılan bir düzeni NotFound içeriğe uygulamak için bkz. ASP.NET Core Blazor düzenleri.

Önemli

Blazor Web App NotFound parametresini (<NotFound>...</NotFound> işaretleme) kullanmaz, ancak çerçevede hataya neden olan bir değişikliği önlemek için geriye dönük uyumluluk amacıyla desteklenmektedir. Sunucu tarafı ASP.NET Core ara yazılım işlem hattı, sunucudaki istekleri işler. Hatalı istekleri işlemek için sunucu tarafı tekniklerini kullanın.

†Bu bağlamda desteklenen, <NotFound>...</NotFound> işaretlemesinin bir özel durumla sonuçlanmadığı, ancak işaretlemenin kullanımının da etkili olmadığı anlamına gelir.

Hatalı istekleri işlemek için önerilen bir yaklaşım da dahil olmak üzere daha fazla bilgi için bkz. ASP.NET Core Blazor işleme modları.

Birden çok derlemeden bileşenlere yön verme

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

Ek derlemelerdeki yönlendirilebilir bileşenleri bulmak için Router bileşenin AdditionalAssemblies parametresini ve uç nokta çağrı sözleşmesi oluşturucusunu AddAdditionalAssemblies kullanın. Aşağıdaki alt bölümlerde her API'nin ne zaman ve nasıl kullanılacağı açıklanmaktadır.

Statik yönlendirme

Statik sunucu tarafı işleme (statik SSR) için ek derlemelerden yönlendirme yapılabilir bileşenleri keşfetmek amacıyla, yönlendirici daha sonra etkileşimli işleme için etkileşimli hale gelse bile derlemelerin Blazor çerçevesine tanıtılması gerekir. Sunucu projesinin AddAdditionalAssemblies dosyasında MapRazorComponents yöntemini, Program ile zincirlenmiş ek derlemelerle çağırın.

Aşağıdaki örnek, BlazorSample.Client projesinin _Imports.razor dosyasını kullanarak projenin derlemesinde bulunan yönlendirilebilir bileşenleri içerir:

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

Dikkat

Yukarıdaki kılavuz, bileşen sınıfı kitaplığı senaryolarında da geçerlidir. Sınıf kitaplıkları ve statik SSR için ek önemli yönergeler, statik sunucu tarafı işleme (statik SSR) ile ASP.NET Core Razor sınıf kitaplıkları (SKK'ler) içinde bulunur.

Etkileşimli yönlendirme

Routes bileşenine Routes.razor etkileşimli bir render modu atanabilir, bu da sunucuda statik SSR ve statik yönlendirmeden sonra Blazor yönlendiricinin etkileşimli hale gelmesini sağlar. Örneğin, etkileşimli sunucu tarafı işleme (etkileşimli SSR) <Routes @rendermode="InteractiveServer" /> bileşenine Routes atar. Router bileşeni, Routes bileşeninden etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) devralır. Yönlendirici, sunucuda statik yönlendirmeden sonra etkileşimli hale gelir.

Etkileşimli yönlendirme için iç gezinti, sunucudan yeni sayfa içeriği istemeyi içermez. Bu nedenle, iç sayfa istekleri için önceden render yapılmaz. Daha fazla bilgi için bkz . Prerender ASP.NET Core Razor bileşenleri.

Routes Bileşen sunucu projesinde tanımlanmışsa, AdditionalAssemblies bileşenin Router parametresi projenin derlemesini .Client içermelidir. Bu, yönlendiricinin etkileşimli olarak işlendiğinde düzgün çalışmasını sağlar.

Aşağıdaki örnekte, Routes bileşen sunucu projesindedir ve _Imports.razor projenin dosyası BlazorSample.Client yönlendirilebilir bileşenleri aramak için derlemeyi gösterir:

<Router
    AppAssembly="..."
    AdditionalAssemblies="[ typeof(BlazorSample.Client._Imports).Assembly ]">
    ...
</Router>

Belirtilen AppAssembly derlemeye ek olarak, ek derlemeler de taranır.

Dikkat

Yukarıdaki kılavuz, bileşen sınıfı kitaplığı senaryolarında da geçerlidir.

Alternatif olarak, yönlendirilebilir bileşenler yalnızca genel Etkileşimli WebAssembly veya Otomatik işleme uygulanmış .Client projesinde bulunur ve Routes bileşeni, sunucu projesinde değil, .Client projesinde tanımlanmıştır. Bu durumda, yönlendirilebilir bileşenlere sahip dış derlemeler yoktur, bu nedenle için AdditionalAssembliesbir değer belirtmek gerekmez.

Bu bölüm uygulamalar için Blazor Server geçerlidir.

Ek derlemelerdeki yönlendirilebilir bileşenleri bulmak için Router bileşenin AdditionalAssemblies parametresini ve uç nokta çağrı sözleşmesi oluşturucusunu AddAdditionalAssemblies kullanın.

Aşağıdaki örnekte, Component1 adlı başvuruda bulunan bir bileşen sınıf kitaplığında tanımlanan yönlendirilebilir bir ComponentLibrarybileşen verilmiştir:

<Router
    AppAssembly="..."
    AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }">
    ...
</Router>

Belirtilen AppAssembly derlemeye ek olarak, ek derlemeler de taranır.

Yönlendirme parametreleri

Yönlendirici, ilgili bileşen parametrelerini aynı adla doldurmak için yol parametrelerini kullanır. Yol parametresi adları büyük/küçük harfe duyarlı değildir. Aşağıdaki örnekte parametresi, text yol kesiminin değerini bileşenin Text özelliğine atar. için /route-parameter-1/amazingistekte bulunulduğunda içerik olarak Blazor is amazing!işlenir.

RouteParameter1.razor:

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

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

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

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

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

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

@page "/route-parameter-1/{text}"

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

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

@page "/route-parameter-1/{text}"

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

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

@page "/route-parameter-1/{text}"

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

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

@page "/route-parameter-1/{text}"

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

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

İsteğe bağlı parametreler desteklenir. Aşağıdaki örnekte isteğe bağlı text parametresi, yönlendirme segmentinin değerini Text özelliğine atar. Segment yoksa Text'ın değeri fantastic olarak ayarlanır.

İsteğe bağlı parametreler desteklenmez. Aşağıdaki örnekte iki @page yönerge uygulanır. İlk yönerge, parametre olmadan bileşene gezinmeye izin verir. İkinci yönerge, yol parametresi değerini bileşenin {text} özelliğine atarText.

RouteParameter2.razor:

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

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

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

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

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

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

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

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

@page "/route-parameter-2/{text?}"

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

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

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

@page "/route-parameter-2/{text?}"

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

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

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

@page "/route-parameter-2/{text?}"

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

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

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

@page "/route-parameter-2"
@page "/route-parameter-2/{text}"

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

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

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

OnInitialized{Async} yaşam döngüsü yöntemi yerine OnParametersSet{Async} yaşam döngüsü yöntemi kullanıldığında, kullanıcı aynı bileşen içinde gezinirse Text özelliğinin fantastic varsayılan ataması gerçekleşmez. Örneğin, kullanıcı /route-parameter-2/amazing konumundan /route-parameter-2 konumuna gittiğinde bu durum ortaya çıkar. Bileşen örneği devam edip yeni parametreleri kabul ettikçe OnInitialized yöntemi yeniden çağrılmıyor.

Dikkat

Yol parametreleri sorgu dizesi değerleriyle çalışmaz. Sorgu dizeleriyle çalışmak için Sorgu dizeleri bölümüne bakın.

Yol kısıtlamaları

Yol kısıtlaması, bir bileşene giden yol kesiminde tür eşleştirmeyi zorlar.

Aşağıdaki örnekte, bileşene giden User yol yalnızca aşağıdaki durumlarda eşleşir:

  • Id İstek URL'sinde bir yol kesimi var.
  • Segment Id bir tamsayı (int) türüdür.

User.razor:

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

<PageTitle>User</PageTitle>

<h1>User Example</h1>

<p>User Id: @Id</p>

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

Dikkat

Yol kısıtlamaları sorgu dizesi değerleriyle çalışmaz. Sorgu dizeleriyle çalışmak için Sorgu dizeleri bölümüne bakın.

Aşağıdaki tabloda gösterilen yol kısıtlamaları kullanılabilir. Sabit kültürle eşleşen yol kısıtlamaları için daha fazla bilgi için tablonun altındaki uyarıya bakın.

Kısıtlama Örnek Örnek Eşleşmeler Değişmez
kültür
eşleştirme
bool {active:bool} true, FALSE Hayır
datetime {dob:datetime} 2016-12-31, 2016-12-31 7:32pm Evet
decimal {price:decimal} 49.99, -1,000.01 Evet
double {weight:double} 1.234, -1,001.01e8 Evet
float {weight:float} 1.234, -1,001.01e8 Evet
guid {id:guid} 00001111-aaaa-2222-bbbb-3333cccc4444, {00001111-aaaa-2222-bbbb-3333cccc4444} Hayır
int {id:int} 123456789, -123456789 Evet
long {ticks:long} 123456789, -123456789 Evet
nonfile {parameter:nonfile} Değil BlazorSample.styles.css, hayır favicon.ico Evet

Uyarı

URL'yi doğrulayan ve CLR türüne (veya intgibiDateTime) dönüştürülen yol kısıtlamaları her zaman sabit kültürü kullanır. Bu kısıtlamalar URL'nin yerelleştirilebilir olmadığını varsayar.

Yol kısıtlamaları, isteğe bağlı parametrelerle de çalışır. Aşağıdaki örnekte Id gereklidir, ancak Option isteğe bağlı bir boole yol parametresidir.

User.razor:

@page "/user/{id:int}/{option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

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

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

Yol parametresinde dosya yakalamayı önleme

Aşağıdaki yol şablonu isteğe bağlı yol parametresinde (Optional ) yanlışlıkla statik varlık yollarını yakalar. Örneğin, uygulamanın stil sayfası (.styles.css) yakalanır ve bu da uygulamanın stillerini bozar:

@page "/{optional?}"

...

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

Bir yol parametresini dosya olmayan yolları yakalamaya kısıtlamak için yol şablonundaki kısıtlamayı :nonfile kullanın:

@page "/{optional:nonfile?}"

Nokta içeren URL'lerle yönlendirme

Sunucu tarafı varsayılan yol şablonu, istek URL'sinin son kesiminde bir nokta (.) bulunduğunda dosyanın istendiğini varsayar. Örneğin, göreli URL /example/some.thing yönlendirici tarafından some.thing adlı bir dosyası için bir istek olarak yorumlanır. Ek yapılandırma olmadan, bir uygulama, içinde bir yönerge bulunan bir some.thing yanıtı döndürür. Nokta içeren bir veya daha fazla parametre içeren bir yol kullanmak için uygulamanın yolu özel bir şablonla yapılandırması gerekir.

URL'nin son kesiminden bir yol parametresi alabilen aşağıdaki Example bileşeni göz önünde bulundurun.

Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

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

<p>
    Param: @Param
</p>

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

Barındırılan ServerBlazor WebAssembly çözümün uygulamasının, param yönlendirme parametresinde bir nokta bulunan isteği yönlendirmesine izin vermek için, Program dosyasına isteğe bağlı bir parametre ile geri dönüş dosyası yol şablonu ekleyin.

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

Blazor Server uygulamasını, param yol parametresinde bir nokta bulunan isteği yönlendirecek şekilde yapılandırmak için, Program dosyasına isteğe bağlı bir parametreyle bir geri dönüş sayfası yol şablonu ekleyin:

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

Daha fazla bilgi için, bkz. ASP.NET Core’da Yönlendirme.

Barındırılan ServerBlazor WebAssemblyün uygulamasının, rota parametresinde bir nokta bulunan isteği yönlendirmesine izin vermek için, isteğe bağlı bir parametre içeren bir geri dönüş dosyası yol şablonu ekleyin param.

Startup.cs:

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

Bir Blazor Server uygulamasını, yönlendirme parametresinde bir nokta bulunan isteği yönlendirecek şekilde yapılandırmak için, isteğe bağlı parametre içeren bir geri dönüş sayfası yol şablonu param ekleyin.

Startup.cs:

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

Daha fazla bilgi için, bkz. ASP.NET Core’da Yönlendirme.

Genel rota parametreleri

Kapsayıcı yol parametreleri, klasör sınırları boyunca yolları kapsayan, bileşenlerde desteklenir.

Hepsini yakala rota parametreleri şunlardır:

  • Rota kesiminin adıyla eşleşecek şekilde adlandırılmıştır. Adlandırma büyük/küçük harfe bağlı değildir.
  • Bir string tür. Çerçeve otomatik dönüştürme sağlamaz.
  • URL'nin sonunda.

CatchAll.razor:

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

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

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

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

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

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

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

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

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

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

Rota şablonuna /catch-all/this/is/a/test sahip URL /catch-all/{*pageRoute} için PageRoute değeri this/is/a/test olarak ayarlanır.

Yakalanan yolun eğik çizgileri ve kesimleri çözümlenmektedir. Bir /catch-all/{*pageRoute} yol şablonu için, /catch-all/this/is/a%2Ftest%2A URL'si this/is/a/test* verir.

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 Açıklama
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.
Üye Açıklama
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.
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.
Üye Açıklama
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 forceLoadtrue ise:
  • İstemci tarafı yönlendirmesi devre dışı bırakıldı.
  • Tarayıcı, URI'nin normalde istemci tarafı yönlendiricisi tarafından işlenip işlenmediğine bakılmaksızın yeni sayfayı sunucudan yüklemeye zorlanır.
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.
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.
Üye Açıklama
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 forceLoadtrue ise:
  • İstemci tarafı yönlendirmesi devre dışı bırakıldı.
  • Tarayıcı, URI'nin normalde istemci tarafı yönlendiricisi tarafından işlenip işlenmediğine bakılmaksızın yeni sayfayı sunucudan yüklemeye zorlanır.
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.
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.
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.
Üye Açıklama
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 forceLoadtrue ise:
  • İstemci tarafı yönlendirmesi devre dışı bırakıldı.
  • Tarayıcı, URI'nin normalde istemci tarafı yönlendiricisi tarafından işlenip işlenmediğine bakılmaksızın yeni sayfayı sunucudan yüklemeye zorlanır.
LocationChanged Gezinme konumu değiştiğinde tetiklenen bir olaydır.
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.

Konum değişiklikleri

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

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

<PageTitle>Navigate</PageTitle>

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

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

<PageTitle>Navigate</PageTitle>

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

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

<h1>Navigate in component code 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;
    }
}

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

<h1>Navigate in component code 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;
    }
}

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

<h1>Navigate in component code 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;
    }
}

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

<h1>Navigate in component code 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.

Bulunamadı yanıtları

.NET 10 Preview 4'te, 'Bulunamadı' yanıt durumları yalnızca statik SSR ve küresel etkileşimli işleme için kullanılabilir. Haziran 2025'te Önizleme 5 için sayfa başına/bileşen işleme desteği planlanıyor.

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ı NotFound http durum kodunu 404 olarak ayarlar.
  • Akış işleme: Yanıt zaten başlatıldıysa bir özel durum oluşturur.
  • Etkileşimli işleme: Yönlendiriciye Blazor (Router bileşen) Bulunamadı içeriğini işlemesi için sinyal gönderir.

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.

Dikkat

Proje Blazor şablonu varsayılan olarak bir NotFound.razor sayfa içerir. Bu sayfa NavigationManager.NotFound her çağrıldığında otomatik olarak işlenir ve bu, tutarlı bir kullanıcı deneyimi sağlayarak eksik yolların işlenmesini kolaylaştırır.

NotFound.razor:

<h1>Not Found</h1>

<p>Sorry! Nothing to show.</p>

NotFound Bileşeni yönlendiricinin parametresine atayınNotFoundPage. NotFoundPage, ara yazılım olmayanlar da dahil, yeniden yürütme ara yazılımları arasında kullanılabilecek yönlendirmeyi destekler. NotFound İşleme parçası ile NotFoundPagebirlikte tanımlanırsa, sayfa daha yüksek önceliğe sahiptir.

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 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ı, NotFound çağrıldığında kullanabilirsiniz. Etkinlik yalnızca NotFound çağrıldığında tetiklenir, herhangi bir 404 yanıtı için tetiklenmez. Örneğin, HttpContextAccessor.HttpContext.Response.StatusCode'yi 404'ye ayarlamak NotFound/OnNotFound tetiklemez.

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 bileşen tarafından User 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; } = "Not Found";
    public string Message { get; private set; } = 
        "Sorry, the page that you requested couldn't be found.";

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

Hizmet sunucu tarafı Program dosyasına kaydedilir:

builder.Services.AddScoped<NotFoundContext>();

Bileşen Routes (Routes.razor):

  • NotFoundContext hizmetini enjekte eder.
  • Başlık (Heading) ve ileti (Message), OnNotFound çağrısıyla NotFound tetiklendiğinde görüntülenir.
@inject NotFoundContext NotFoundContext

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(Layout.MainLayout)">
            <h1>@NotFoundContext.Heading</h1> 
            <div>
                <p>@NotFoundContext.Message</p>
            </div>
        </LayoutView>
    </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, NotFoundContext.UpdateContext bileşenindeki Router bileşeni tarafından görüntülenen Bulunamadı içeriği için bir başlık ve mesaj ayarlamak üzere Routes öğesini çağırır (Routes.razor).
  • 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ı içindedir (uygulamanın temel yolu).

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.

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. Gelişmiş bir formu uç nokta olmayan bir yere 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 öznitelik data-enhance’i 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/'.'

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

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.

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

Dikkat

Bileşen parametreleri yalnızca yönergesi @page olan yönlendirilebilir bileşenlerde sorgu parametresi değerlerini alabilir.

Yukarıdan aşağıya bilgi akışının özellikle bozulmasını önlemek ve hem framework hem de uygulama tarafından parametrelerin işlenme sırasını belirgin hale getirmek için yalnızca yönlendirilebilir bileşenler doğrudan sorgu parametrelerini alır. Bu tasarım, uygulama kodunda belirli bir parametre işleme sırası varsayılarak yazılmış küçük hataları önler. Sorgu parametresi değerlerini yönlendirilemeyen bileşenlere geçirmek için özel basamaklı parametreler tanımlayabilir veya doğrudan normal bileşen parametrelerine atayabilirsiniz.

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

Bileşen parametresi özelliklerinde ([Parameter] ) olduğu gibi, [SupplyParameterFromQuery] özellikler de her zaman public .NET 6/7'deki özelliklerdir. .NET 8 veya sonraki sürümlerinde, [SupplyParameterFromQuery] özellikler public veya private olarak işaretlenebilir.

[Parameter]
[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
public 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.

Dikkat

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

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 {
    [Parameter]
    [SupplyParameterFromQuery]
    public string? Filter { get; set; }

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

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public 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 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"));

bir isteğin sorgu dizesi şu özellikten NavigationManager.Uri alınır:

@inject NavigationManager Navigation

...

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

Sorgu dizesinin parametrelerini ayrıştırmak için URLSearchParams ile JavaScript (JS) interop kullanmak bir yaklaşımdır:

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

JavaScript modülleriyle JavaScript yalıtımı hakkında daha fazla bilgi için bkz . ASP.NET Core'da Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma.

Adlandırılmış öğelere karma tabanlı yönlendirme

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 yönelik hash tabanlı yönlendirmeyi göstermektedir.

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 HashedRouting bileşeni uygulamaya ekleyin.

HashedRouting.razor:

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

<PageTitle>Hashed routing</PageTitle>

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

<ul>
    <li>
        <a href="/hashed-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="/hashed-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");
    }
}

İçerikle <Navigating> kullanıcı etkileşimi

Gezinti sırasında, örneğin bir Blazor WebAssembly uygulamadaki derlemeleri yavaş yüklerken veya sunucu tarafı uygulamasına yavaş ağ bağlantısı yaparken önemli bir Blazor gecikme olursa, Router bileşen kullanıcıya bir sayfa geçişinin gerçekleştiğini gösterebilir.

"Router bileşenini tanımlayan bileşenin en üstüne, @using ad alanı için bir Microsoft.AspNetCore.Components.Routing yönergesi ekleyin."

@using Microsoft.AspNetCore.Components.Routing

Sayfa geçişi olayları sırasında görüntülenmesi için parametresine Navigating içerik sağlayın.

Yönlendirici öğesi (<Router>...</Router>) içeriğinde:

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

Özelliğini kullanan Navigating bir örneği için bkz. ASP.NET Core'da Blazor WebAssembly gecikmeli yük derlemeleri.

Zaman uyumsuz gezinti olaylarını OnNavigateAsync ile işleme

Bileşen Router bir OnNavigateAsync özelliği destekler. OnNavigateAsync işleyici, kullanıcı bir işlem yaptığında çalıştırılır.

  • Tarayıcısında doğrudan bu rotaya giderek bir rotayı ilk kez ziyaret eder.
  • Bir bağlantı veya NavigationManager.NavigateTo çağrısı kullanarak yeni bir rotaya gider.
<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

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

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

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

Örnek olarak OnNavigateAsync kullanan bir uygulama için, ASP.NET Core'da Blazor WebAssembly 'Gecikmeli yükleme derlemeleri'ne bakın.

Sunucuda OnNavigateAsync önceden render yapılırken iki kez yürütülür:

  • İstenen uç nokta bileşeni ilk kez statik olarak işlendiğinde.
  • Tarayıcı uç nokta bileşenini ikinci kez işlerken.

İçindeki geliştirici kodunun iki kez yürütülmesini önlemek için, bileşeni, kullanılacak olan , yaşam döngüsü yönteminde depolayabilir, burada kontrol edilebilir. Daha fazla bilgi için bkz JavaScript birlikte çalışmasıyla önceden işleme.

OnNavigateAsync içindeki geliştirici kodunun iki kez çalışmasını önlemek için, App bileşeni, NavigationContext'yi OnAfterRender{Async} içinde kullanılmak üzere depolayabilir ve burada firstRender kontrol edilebilir. Daha fazla bilgi için bkz JavaScript birlikte çalışmasıyla önceden işleme.

OnNavigateAsync uygulamasında iptalleri işleme

Geri çağırma NavigationContext 'e geçirilen OnNavigateAsync nesnesi, yeni bir navigasyon olayı meydana geldiğinde ayarlanan bir CancellationToken içerir. OnNavigateAsync geri çağırmasının, güncel olmayan bir gezintide OnNavigateAsync geri çağırmanın çalışmasını önlemek için bu iptal belirteci ayarlandığında bir istisna atması gerekir.

Kullanıcı bir uç noktaya gider ancak hemen yeni bir uç noktaya geçerse, uygulama ilk uç nokta için geri çağırmayı OnNavigateAsync çalıştırmaya devam etmemelidir.

Aşağıdaki örnekte:

  • İptal belirteci, kullanıcı PostAsJsonAsync uç noktasından uzaklaşırsa POST'u iptal edebilecek şekilde, /about çağrısında geçirilir.
  • İptal belirteci, kullanıcı /store son noktasından uzaklaşırsa ürün ön yükleme işlemi sırasında ayarlanır.
@inject HttpClient Http
@inject ProductCatalog Products

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

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

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

@inject HttpClient Http
@inject ProductCatalog Products

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

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

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

Dikkat

Eğer NavigationContext içindeki durdurma belirteci iptal edilirse, bu durumu göz ardı etmek, önceki bir gezintiden bir bileşeni render etme gibi istenmeyen davranışlara yol açabilir.

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:

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ğı).

Dikkat

.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 bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

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.

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.

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.

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

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ı, NavLink ön eki içeren herhangi bir URL'yi (örneğin active ve component) ziyaret ettiğinde, ikinci /component/component/another-segment sınıfını alır.

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

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.

Farklı bir uygulamayı yerel olarak çalıştırmak için daha önce bahsedilen kod örneği içeren örnek uygulamayı Blazor Web App veya Blazor WebAssembly edinin.

ASP.NET Core endpoint yönlendirme entegrasyonu

Bu bölüm bir devre üzerinde çalışan Blazor Web App için geçerlidir.

Bu bölüm uygulamalar için Blazor Server geçerlidir.

ABlazor Web App, ASP.NET Core Uç Nokta Yönlendirme ile tümleşiktir. ASP.NET Core uygulaması, MapRazorComponents dosyasındaki Program ile etkileşimli bileşenler için gelen bağlantıları kabul etmek üzere yapılandırılır. Varsayılan kök bileşen (yüklenen ilk bileşen) bileşenidir App (App.razor):

app.MapRazorComponents<App>();

Blazor ServerASP.NET Çekirdek Uç Nokta Yönlendirme ile tümleşiktir. ASP.NET Core uygulaması, MapBlazorHub dosyasında Program ile etkileşimli bileşenler için gelen bağlantıları kabul edecek şekilde yapılandırılır.

app.UseRouting();

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

Blazor ServerASP.NET Çekirdek Uç Nokta Yönlendirme ile tümleşiktir. Bir ASP.NET Core uygulaması, MapBlazorHub içinde Startup.Configure ile etkileşimli bileşenler için gelen bağlantıları kabul edecek şekilde yapılandırılmıştır.

Tipik yapılandırma, tüm istekleri uygulamanın sunucu tarafı bölümü için konak görevi gören bir Razor sayfaya yönlendirmektir Blazor Server . Kural gereği, uygulamanın klasöründe _Host.cshtml olarak adlandırılan Pages genellikle bulunur.

Ana bilgisayar dosyasında belirtilen yol, yol eşleştirmede düşük öncelikli çalıştığından geri dönüş yolu olarak adlandırılır. Geri dönüş yolu, diğer yollar eşleşmediğinde kullanılır. Bu, uygulamanın uygulamadaki bileşen yönlendirmesini engellemeden diğer denetleyicileri ve sayfaları kullanmasına Blazor Server olanak tanır.

Kök olmayan URL sunucusu barındırma için yapılandırma MapFallbackToPage hakkında bilgi için bkz. ASP.NET Core Blazor uygulama temel yolu.