Aracılığıyla paylaş

ASP.NET Temel Blazor yönlendirme ve gezinti

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 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 8 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 8 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 eklenen NavigationManager üzerinde Navigationadlı yöntemleri gösterir.

Statik ve etkileşimli yönlendirme

Bu bölüm Web Apps için Blazor geçerlidir.

Ön kayıt devre dışı bırakılmazsa, 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 bir işleme modu atandığında, Blazor sunucuda statik yönlendirme ile statik SSR'nin ardından yönlendirici etkileşimli hale gelir. 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.

Bileşen Router , bileşenlere yönlendirmeyi Razor etkinleştirir. BileşenRouter( bileşeninde AppApp.razorkullanılır.

Yönergesi olan bir Razor@page bileşen (.razor) derlendiğinde, oluşturulan bileşen sınıfına bileşenin yol şablonunu belirten bir RouteAttribute sağlanır.

Uygulama başlatıldığında, Yönlendirici AppAssembly olarak belirtilen derleme, uygulamasına sahip RouteAttributeolan bileşenlerinin yol bilgilerini toplamak için taranır.

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

İsteğe bağlı olarak, yönergesiyle bir düzen belirtmeyen bileşenler için düzen sınıfına@layoutsahip bir parametre belirtinDefaultLayout. Çerçevenin Blazor proje şablonları, uygulamanın varsayılan düzeni olarak bileşeni (MainLayout.razor) belirtirMainLayout. 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 ve /different-blazor-routeisteklerine /blazor-route 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"

<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ümlenmesi için uygulamanın özniteliğinde belirtilen uygulama temel yolunu içeren bir <base> etiket (içerik konumu<head>) içermesi href gerekir. Daha fazla bilgi için bkz . ASP.NET Core'u Blazorbarındırma ve dağıtma.

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

Yönergesiyle yol şablonunu dize değişmez değeri olarak belirtmeye @page alternatif olarak, yönergesiyle @attributesabit tabanlı yol şablonları belirtilebilir.

Aşağıdaki örnekte, @page bir bileşendeki yönergesi, içindeki yönergesi ve uygulamasındaki başka bir yerde "/counter" olarak ayarlanan sabit tabanlı yol şablonuyla @attributeConstants.CounterRoutedeğiştirilir:

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

Not

ASP.NET Core 5.0.1 sürümünün yayınlanmasıyla ve diğer 5. x sürümleri için Router bileşeni, @true olarak ayarlanan PreferExactMatches parametresini içerir. Daha fazla bilgi için, bkz. ASP.NET Core 3.1'den 5.0'a geçiş.

Bir öğeyi gezintiye odaklama

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 zamanFocusOnNavigate, 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. İçeriğe varsayılan düzen uygulamak için NotFound bkz . ASP.NET Çekirdek Blazor düzenleri.

Önemli

Blazor Web Apps parametresini NotFound (<NotFound>...</NotFound> işaretleme) kullanmaz, ancak çerçevede hataya neden olan bir değişikliği önlemek için geriye dönük uyumluluk için parametresi desteklenir. 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. Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

Birden çok derlemeden bileşenlere yönlendirme

Bu bölüm Web Apps için Blazor geçerlidir.

Ek derlemelerdeki Router yönlendirilebilir bileşenleri bulmak için bileşenin AdditionalAssemblies parametresini ve uç nokta kuralı 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

Yönlendirici daha sonra etkileşimli işleme için etkileşimli hale gelse bile statik sunucu tarafı işleme (statik SSR) için ek derlemelerden yönlendirilebilir bileşenleri bulmak için derlemelerin çerçeveye Blazor açıklanması gerekir. Sunucu projesinin AddAdditionalAssemblies dosyasında zincirlenmiş MapRazorComponents ek derlemeler ile yöntemini çağırın Program .

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

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

Not

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ında (KCL'ler) bulunur.

Etkileşimli yönlendirme

Statik SSR ve sunucuda statik yönlendirmeden sonra yönlendiricinin RoutesBlazor etkileşimli hale gelmesini sağlayan bileşene (Routes.razor) etkileşimli bir işleme modu atanabilir. Örneğin, <Routes @rendermode="InteractiveServer" /> bileşene etkileşimli sunucu tarafı işleme (etkileşimli SSR) Routes atar. Bileşen, Router etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) bileşenden devralır Routes . 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 ön kayıt gerçekleşmez. 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="new[] { typeof(BlazorSample.Client._Imports).Assembly }">
    ...
</Router>

için belirtilen AppAssemblyderlemeye ek olarak ek derlemeler taranır.

Not

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ış projede .Client bulunur ve Routes bileşen sunucu projesinde değil projede .Client tanımlanı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 Router yönlendirilebilir bileşenleri bulmak için bileşenin AdditionalAssemblies parametresini ve uç nokta kuralı 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>

için belirtilen AppAssemblyderlemeye ek olarak ek derlemeler 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}"

<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 değeri Text olarak fantasticayarlanı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 atar{text}.

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?}"

<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} yerine yöntemi kullanıldığındaOnParametersSet, kullanıcı aynı bileşen içinde gezinirse özelliğinin Textfantastic varsayılan ataması gerçekleşmez. Örneğin, kullanıcı adresine /route-parameter-2/amazing/route-parameter-2gittiği zaman bu durum ortaya çıkar. Bileşen örneği devam edip yeni parametreleri kabul ettikçe OnInitialized yöntemi yeniden çağrılmıyor.

Not

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

Not

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 Sabit
kültür
eşleştirme
bool {active:bool} true, FALSE Hayır
datetime {dob:datetime} 2016-12-31, 2016-12-31 7:32pm Yes
decimal {price:decimal} 49.99, -1,000.01 Yes
double {weight:double} 1.234, -1,001.01e8 Yes
float {weight:float} 1.234, -1,001.01e8 Yes
guid {id:guid} CD2C1638-1638-72D5-1638-DEADBEEF1638, {CD2C1638-1638-72D5-1638-DEADBEEF1638} Hayır
int {id:int} 123456789, -123456789 Yes
long {ticks:long} 123456789, -123456789 Yes

Uyarı

URL'yi doğrulayan ve CLR türüne (veya DateTimegibiint) 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; }
}

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 adlı some.thingbir dosya için istek olarak yorumlanır. Ek yapılandırma olmadan, bir yönergesi olan bir bileşene yönlendirmek için bir uygulama 404 - Bulunamadı yanıtı some.thing döndürür ve some.thing bir @page yol parametresi değeridir. 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 isteği yönlendirme parametresinde param bir noktayla yönlendirmesine izin vermek için, dosyaya Program isteğe bağlı parametresiyle bir geri dönüş dosyası yol şablonu ekleyin:

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

Bir Blazor Server uygulamayı yönlendirme parametresinde param bir noktayla isteği yönlendirecek şekilde yapılandırmak için, dosyada Program isteğe bağlı parametresiyle 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ılanBlazor WebAssemblyçözümün Server uygulamasının isteği yönlendirme parametresinde param bir noktayla yönlendirmesine izin vermek için, içinde isteğe bağlı parametresiyle Startup.Configurebir geri dönüş dosyası yol şablonu ekleyin.

Startup.cs:

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

Bir Blazor Server uygulamayı yönlendirme parametresinde param bir noktayla isteği yönlendirecek şekilde yapılandırmak için, içinde isteğe bağlı parametresiyle Startup.Configurebir geri dönüş sayfası yol şablonu ekleyin.

Startup.cs:

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

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

Tümünü yakala rota parametreleri

Birden çok klasör sınırındaki yolları yakalayan tümünü yakala yol parametreleri bileşenlerde desteklenir.

Tümünü yakala yol parametreleri şunlardır:

  • Rota kesimi adıyla eşleşecek şekilde adlandırılır. Adlandırma büyük/küçük harfe duyarlı değildir.
  • Bir string tür. Çerçeve otomatik atama 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}"

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

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

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

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 <base> öğesindeki href özniteliğine (içeriğin konumu<head>) karşılık gelir.
NavigateTo Belirtilen URI'ye gider. ise forceLoadfalse:
  • 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.
ise forceLoadtrue:
  • İstemci tarafı yönlendirmesi atlandı.
  • 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.

ise replacetrue, tarayıcı geçmişindeki geçerli URI, geçmiş yığınına yeni bir URI göndermek yerine değiştirilir.
LocationChanged Gezinti konumu değiştiğinde tetikleyen bir olay. 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. Örneğin, Temel URI önekine göre URI oluşturma bölümüne bakın.
RegisterLocationChangingHandler Gelen gezinti olaylarını işlemek için bir işleyici kaydeder. Çağrısı NavigateTo her zaman işleyiciyi çağırır.
GetUriWithQueryParameter Eklenen, güncelleştirilen veya kaldırılan tek bir parametreyle güncelleştirilerek NavigationManager.Uri güncelleştirmesi yapılan 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 <base> öğesindeki href özniteliğine (içeriğin konumu<head>) karşılık gelir.
NavigateTo Belirtilen URI'ye gider. ise forceLoadtrue:
  • İstemci tarafı yönlendirmesi atlandı.
  • 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.
ise replacetrue, tarayıcı geçmişindeki geçerli URI, geçmiş yığınına yeni bir URI göndermek yerine değiştirilir.
LocationChanged Gezinti konumu değiştiğinde tetikleyen bir olay. 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. Örneğin, Temel URI önekine göre URI oluşturma bölümüne bakın.
RegisterLocationChangingHandler Gelen gezinti olaylarını işlemek için bir işleyici kaydeder. Çağrısı NavigateTo her zaman işleyiciyi çağırır.
GetUriWithQueryParameter Eklenen, güncelleştirilen veya kaldırılan tek bir parametreyle güncelleştirilerek NavigationManager.Uri güncelleştirmesi yapılan 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 <base> öğesindeki href özniteliğine (içeriğin konumu<head>) karşılık gelir.
NavigateTo Belirtilen URI'ye gider. ise forceLoadtrue:
  • İstemci tarafı yönlendirmesi atlandı.
  • 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.
ise replacetrue, tarayıcı geçmişindeki geçerli URI, geçmiş yığınına yeni bir URI göndermek yerine değiştirilir.
LocationChanged Gezinti konumu değiştiğinde tetikleyen bir olay. 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. Örneğin, Temel URI önekine göre URI oluşturma bölümüne bakın.
GetUriWithQueryParameter Eklenen, güncelleştirilen veya kaldırılan tek bir parametreyle güncelleştirilerek NavigationManager.Uri güncelleştirmesi yapılan 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 <base> öğesindeki href özniteliğine (içeriğin konumu<head>) karşılık gelir.
NavigateTo Belirtilen URI'ye gider. ise forceLoadtrue:
  • İstemci tarafı yönlendirmesi atlandı.
  • 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 Gezinti konumu değiştiğinde tetikleyen bir olay.
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. Örneğin, Temel URI önekine göre URI oluşturma bölümüne bakın.

Konum değişiklikleri

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

Aşağıdaki bileşen:

  • kullanılarak düğme seçildiğinde NavigateTouygulamanın Counter bileşenine (Counter.razor) gider.
  • konumuna abone NavigationManager.LocationChangedolarak değiştirilen olayı işler.

    • Çerçeve HandleLocationChanged tarafından çağrıldığında Dispose yöntemin kancası kaldırılır. yönteminin kancasını kaldırma, bileşenin atık 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"
@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şenin elden çıkarılması hakkında daha fazla bilgi için bkz . ASP.NET Core Razor bileşen yaşam döngüsü.

Gelişmiş gezinti ve form işleme

Bu bölüm Web Apps için Blazor geçerlidir.

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

  • 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ğine sayfanın DOM'una düzeltme eki ekler. 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 Uygulaması betiği (blazor.web.js) kullanılır, Blazor Server betik (blazor.server.js) veya Blazor WebAssembly betik (blazor.webassembly.js).
  • Ö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şmiş bir gezintiye 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.

çağrısı NavigateToyaparken:

  • ise forceLoadfalse, 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.
  • ise forceLoadtrue, Blazor gelişmiş gezinti kullanılabilir olsun veya olmasın istenen URL için tam sayfa yeniden yükleme gerçekleştirir.

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

Navigation.Refresh();

forceLoad Gelişmiş gezinti kullanılabilse bile tam sayfa yeniden yüklemenin her zaman gerçekleştirildiğinden emin olmak için parametresine geçintrue:

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>

Hedef uç nokta değilseBlazor , gelişmiş gezinti uygulanmaz ve istemci tarafı JavaScript tam sayfa yükü olarak yeniden denenir. Bu, mevcut bir sayfaya düzeltme eki uygulanmaması gereken dış sayfalar hakkında çerçevede karışıklık olmamasını sağlar.

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

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

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

Gelişmiş form işleme hiyerarşik değildir ve alt formlara akışı yoktur:

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 uç noktalarla Blazor çalışır. Gelişmiş formu uç nokta olmayanBlazor bir forma göndermek hatayla sonuçlanır.

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

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

Blazor'nin gelişmiş gezintisi ve form teslimi, 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>

İstemcide başlatıldıktan sonra Blazor , gelişmiş sayfa güncelleştirmelerini dinlemek için olayını kullanabilirsiniz enhancedload . 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.

Statik sunucu tarafı işleme (statik SSR) ile gelişmiş gezinti, JavaScript yüklenirken ö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 Geçiş, inputURI bir baseRelativePath ile sonuç alırsegment.
  • https://localhost:8000/segment1/segment2 Geçiş, inputURI bir baseRelativePath ile sonuç alırsegment1/segment2.

Uygulamanın temel URI'si temel URI'sine inputURIuymuyorsa bir ArgumentException oluşturulur.

https://localhost:8001/segmentinputURI Geçiş 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, dış kimlik sağlayıcılarıyla kullanıcıların kimliğini doğrularken olduğu gibi dış yeniden yönlendirme senaryolarında özellikle yararlıdır. Daha fazla bilgi için Gezinti seçenekleri bölümüne bakın.

Aşağıdaki davranışları denetlemek için öğesine NavigateTo geçinNavigationOptions:

  • 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. ise false, yeni girdiyi geçmiş yığınına ekler. 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

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

Not

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 alttan alınmasından kaçınmak ve hem çerçeve hem de uygulama tarafından parametre işleme sırasını net 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, , decimalDateTime, , double, float, Guid, int, . stringlong
  • Önceki türlerin null atanabilir varyantları.
  • Null değer atanabilir veya null atanamaz olsun, önceki türlerdeki diziler.

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:

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

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

Aşağıdaki örnekte url'si:/search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman

  • Filter özelliği olarak scifi starsçözümler.
  • Page özelliği olarak 3çözümler.
  • Dizi Stars , (Name = "star") adlı star sorgu parametrelerinden doldurulur ve ve olarak LeVar BurtonGary Oldmançözümleniyor.

Not

Aşağıdaki yönlendirilebilir sayfa bileşenindeki sorgu dizesi parametreleri, yönergesi olmayan yönlendirilebilir olmayan bir @pagebileşende de çalışır (örneğin, Search.razor diğer bileşenlerde kullanılan paylaşılan Search bir 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]
    public string? Filter { get; set; }

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

    [SupplyParameterFromQuery(Name = "star")]
    public 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 NavigationManager.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 atanabilirse ve değer ise nullkaldı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.

Birden çok parametre eklenmiş, güncelleştirilmiş veya kaldırılmış bir URI Uri oluşturmak için çağrısıNavigationManager.GetUriWithQueryParameters. Her değer için çerçeve, her sorgu parametresi için çalışma zamanı türünü belirlemek için kullanır value?.GetType() ve doğru kültür sabiti biçimlendirmesini seçer. Çerçeve desteklenmeyen türler için bir hata oluşturur.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

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

Sağlanan bir URI'den birden çok parametre eklenmiş, güncelleştirilmiş veya kaldırılmış yeni bir URI oluşturmak için GetUriWithQueryParameters bir URI dizesi geçirin. Her değer için çerçeve, her sorgu parametresi için çalışma zamanı türünü belirlemek için kullanır value?.GetType() ve doğru kültür sabiti biçimlendirmesini seçer. Ç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})
  • Yer {URI} tutucu, sorgu dizesi olan veya olmayan URI'dir.
  • Yer {PARAMETERS} tutucu bir IReadOnlyDictionary<string, object>'dir.

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

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

Desteklenen türler şunlardır:

  • Önceki türlerin null atanabilir varyantları.
  • Null değer atanabilir veya null atanamaz olsun, önceki türlerdeki diziler.

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 olduğunda sorgu parametresini kaldırma null

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 25intvarsa eklenir. Varsa, age değerine 25güncelleştirilir.
  • eye color değerine eklenir veya güncelleştirilir green.
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 öğesine eklenir veya tek bir değer güncelleştirilir Morena Baccarin.
  • pingparametreleri , 1687 ve 240ile 35eklenir 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 öğesine NavigateTogeçirin.

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

  • GetUriWithQueryParameter değerini kullanarak sorgu parametresini eklemek veya değiştirmek name için Morena Baccarin.
  • Yeni URL'ye gezintiyi tetikleme çağrıları NavigateTo .
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 javascript (JS) birlikte çalışma ile kullanmak URLSearchParams 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 yönlendirme

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

Aşağıdaki yaklaşımların her birine örnek olarak, bileşeninde öğesini içeren bir idtargetElement öğeye gezinti gösterilmektedir Counter :

  • bir ile hrefanchor öğesi (<a>) :

    <a href="/counter#targetElement">

  • NavLinkbileşenine sahip:href

    <NavLink href="/counter#targetElement">

  • NavigationManager.NavigateTo göreli URL'yi geçirme:

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

Aşağıdaki örnekte, bir bileşen içindeki adlandırılmış H2 başlıklarına ve dış bileşenlere karma yönlendirme gösterilmektedir.

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.

Bileşeni belirten Router bileşenin en üstüne ad alanı için Microsoft.AspNetCore.Components.Routing bir @using yönerge 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 örnek için bkz . ASP.NET Core'da Blazor WebAssemblygecikmeli yük derlemeleri.

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

Bileşen Router bir OnNavigateAsync özelliği destekler. İşleyici OnNavigateAsync , kullanıcı:

  • Doğrudan tarayıcısında bu rotaya giderek bir yolu ilk kez ziyaret eder.
  • Bağlantı veya çağrı kullanarak yeni bir NavigationManager.NavigateTo yola 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)
    {
        ...
    }
}

kullanan OnNavigateAsyncbir örnek için bkz . ASP.NET Core'da Blazor WebAssemblygecikmeli yükleme derlemeleri.

Sunucuda OnNavigateAsync prerendering yapılırken iki kez yürütülür:

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

içindeki OnNavigateAsync geliştirici kodunun iki kez yürütülmesini önlemek için bileşen, Routes içinde kullanılmak OnAfterRender{Async}üzere öğesini depolayabilir NavigationContext ve burada firstRender denetlenebilir. Daha fazla bilgi için Yaşam Döngüsü makalesindeki JavaScript birlikte çalışma ile ön giriş yapma makalesineBlazorbakın.

içindeki OnNavigateAsync geliştirici kodunun iki kez yürütülmesini önlemek için bileşen, App içinde kullanılmak OnAfterRender{Async}üzere öğesini depolayabilir NavigationContext ve burada firstRender denetlenebilir. Daha fazla bilgi için Yaşam Döngüsü makalesindeki JavaScript birlikte çalışma ile ön giriş yapma makalesineBlazorbakın.

uygulamasındaki iptalleri işleme OnNavigateAsync

NavigationContext Geri çağırmaya OnNavigateAsync geçirilen nesne, yeni bir CancellationToken gezinti olayı gerçekleştiğinde ayarlanan bir içerir. Geri OnNavigateAsync çağırmanın güncel olmayan bir gezintide çalıştırılmasını önlemek için bu iptal belirteci ayarlandığında geri çağırmanın OnNavigateAsync atılması 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 çağrısında PostAsJsonAsyncgeçirilir ve kullanıcı uç noktadan uzaklaşırsa /about POST'u iptal edebilir.
  • İptal belirteci, kullanıcı uç noktadan uzaklaşırsa /store ürün ön oluşturma 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);
            }
        }
    }
}

Not

içindeki NavigationContext iptal belirteci iptal edilirse atılmaması, önceki gezintiden bir bileşeni işleme gibi istenmeyen davranışlara neden olabilir.

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, veya OnAfterRenderAsync yöntemlerinde birden çok konum değiştirme işleyicisi OnAfterRender 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. İşleyicilere NavigateTo ek olarak çağrılır:

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

İşleyiciler yalnızca uygulama içindeki iç gezinti 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 Kayıtlı işleyicileri uygulayıp atarak bunların kaydını kaldırın. Daha fazla bilgi için bkz. ASP.NET Core Razor bileşeni yaşam döngüsü.

Önemli

Konum değişikliklerini işlerken JavaScript (JS) birlikte çalışma aracılığıyla DOM temizleme görevlerini yürütmeyi denemeyin. İstemcide MutationObserver içindeki JS deseni kullanın. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

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

İç gezinti zaman uyumsuz olarak iptal edilebildiğinden, kayıtlı işleyicilere birden çok ç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:

  • İşleyicileri değiştiren herhangi bir konum kaydedilirse, başlangıçta tüm gezinti geri döndürülür, ardından gezinti iptal edilmediyse yeniden oynatılır.
  • Ç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.

Girdileri denetlemeye geçiş NavigationOptions ve gezinti geçmişi yığınının durumu hakkında daha fazla bilgi için Gezinti seçenekleri bölümüne bakın.NavigateTo

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

Not

.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 etiketleri değiştir açılan 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, işlendiği sürece gezinti olaylarını durdurur, devam etme veya iptal etme kararı verilene kadar belirli bir gezintiyi etkili bir şekilde "kilitler". Gezinti kesme işleminin kapsamı bir bileşenin yaşam süresine göre ayarlanabildiğinde kullanın NavigationLock .

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 (MDN belgeleri).
  • OnBeforeInternalNavigation iç gezinti olayları için bir geri çağırma ayarlar.

Aşağıdaki NavLock bileşeninde:

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 kod için ( başvuru kaynağı) içindeki bileşene BasicTestApp bakınConfigurableNavigationLock.dotnet/aspnetcore

Gezinti bağlantıları oluştururken HTML köprü öğelerinin (<a>) yerine bir NavLink bileşen kullanın. Bir NavLink bileşen, bir CSS sınıfını geçerli URL ile eşleşip eşleşmediğine bağlı olarak değiştirmesi activehref dışında bir <a> öğe gibi davranır. 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 yol ile eşleştiğinde işlenen bağlantıya özel bir CSS sınıfı uygulamak için öğesine bir CSS sınıf adı NavLink.ActiveClass atayın href.

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

Yukarıdaki örnekte, HomeNavLinkhref="" giriş URL'si ile eşleşir ve yalnızca uygulamanın varsayılan temel yolunda (/) CSS sınıfını alır.active İkinci NavLink sınıf, kullanıcı ön ek içeren herhangi bir component URL'yi (örneğin ve /component/component/another-segment) ziyaret ettiğinde alıractive.

İşlenen tutturucu etiketine ek NavLink bileşen öznitelikleri geçirilir. 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ği işleme yönteminden Blazor dolayı, bir for döngü içindeki bileşenlerin işlenmesiNavLink, (alt) bileşenin içeriğinde NavLink artımlı döngü değişkeni kullanılıyorsa yerel bir dizin değişkeni gerektirir:

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

Bu senaryoda dizin değişkeni kullanmak, yalnızca NavLink bileşen için değil, alt içeriğinde döngü değişkeni kullanan tüm alt bileşenler için bir gereksinimdir.

Alternatif olarak, ile Enumerable.Rangebir foreach döngü kullanın:

@foreach (var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="product-number/@c">
            <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ı kebap durumundaki URL'leriyle eşleşiyor‡ bileşenin yol şablonundaki sözcükler arasında görünen kısa çizgilerle. Örneğin /product-detail yönlendirme şablonu olan ProductDetail bileşeni (@page "/product-detail") tarayıcıda /product-detail göreli URL'sinde istendi.

†Pascal büyük/küçük harf yazımı (camel büyük harf) boşluk ve noktalama işareti içermeyen, ilk sözcük de dahil olmak üzere her sözcüğün ilk harfinin büyük yazıldığı bir adlandırma kuralıdır.
‡Kebap olayı, 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 Home sayfanın altındaki bileşenin NavMenu (NavMenu.razor) 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()
{
    return 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ü sayfanın listenin en üstünde görünmesi ve parametresini ayarlaması Match gerekir.
  • Error page: Hata sayfasına yalnızca çerçeve tarafından gidilir ve listelenmemelidir.

Yerel olarak çalıştırabileceğiniz bir örnek uygulamadaki önceki kod örneği için Web Uygulamasını veya örnek uygulamayı edininBlazor.Blazor WebAssembly

ASP.NET Core uç nokta yönlendirme tümleştirmesi

Bu bölüm, bir bağlantı hattı üzerinde çalışan Web Apps için Blazor geçerlidir.

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

Blazor Web Uygulaması, ASP.NET Çekirdek Uç Nokta Yönlendirme ile tümleşiktir. ASP.NET Core uygulaması, dosyasındaki etkileşimli bileşenler MapRazorComponentsProgram 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ı, dosyasındaki etkileşimli bileşenler MapBlazorHubProgram için gelen bağlantıları kabul etmek üzere 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ı, ile MapBlazorHub etkileşimli bileşenler için gelen bağlantıları kabul etmek üzere yapılandırılmıştır Startup.Configure.

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, konak sayfası genellikle uygulamanın klasöründe adlandırılır _Host.cshtmlPages.

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'u Blazorbarındırma ve dağıtma.