ASP.NET Core Blazor Yönlendirme

Bu makalede, istek yönlendirmeyi yönetme ve NavLink uygulamalarda gezinti bağlantıları oluşturmak için bileşenin nasıl kullanılacağı hakkında bilgi edinin Blazor .

Rota şablonları

RouterBileşen, Razor bir uygulamadaki bileşenlere yönlendirmeyi sağlar Blazor . RouterBileşen, App uygulamalar bileşeninde kullanılır Blazor .

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

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

Uygulama başlatıldığında, yönlendirici olarak belirtilen derleme, AppAssembly uygulamanın bir öğesine sahip olan bileşenleri için rota bilgilerini toplayacak şekilde taranır RouteAttribute .

Çalışma zamanında, RouteView bileşen:

• ' İ RouteData Router herhangi bir rota parametresiyle birlikte alır.
• Daha fazla iç içe yerleştirilmiş düzen dahil olmak üzere, belirtilen bileşeni düzeniyleişler.

İsteğe bağlı olarak DefaultLayout , @layout yönergeylebir düzen belirtmeyen bileşenler için Düzen sınıfı ile bir parametre belirtin. Çerçevenin Blazor Proje şablonları , MainLayout Shared/MainLayout.razor uygulamanın varsayılan düzeni olarak bileşenini () belirtir. Düzenler hakkında daha fazla bilgi için bkz ASP.NET Core Blazor geçtiğinizde ..

Bileşenler birden çok @page yönergelerikullanarak birden çok yol şablonunu destekler. Aşağıdaki örnek bileşen ve için istekleri yükler /BlazorRoute /DifferentBlazorRoute .

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

Gezinti üzerine bir öğe odaklayın

FocusOnNavigateBir sayfadan diğerine gitmeden BIR CSS seçicisine dayalı bir öğeye UI odağı ayarlamak için bileşenini kullanın. FocusOnNavigate App Bir proje şablonundan oluşturulan bir uygulamanın bileşeni tarafından kullanılan bileşeni görebilirsiniz Blazor .

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

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

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

RouterBileşen, istenen rota için içerik bulunmazsa uygulamanın özel içerik belirtmesini sağlar.

AppBileşende bileşen şablonunda özel içerik ayarlayın Router NotFound .

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Diğer etkileşimli bileşenler gibi etiketlerin içeriği olarak rastgele öğeler desteklenir <NotFound> . İçeriğe varsayılan bir düzen uygulamak için NotFound bkz ASP.NET Core Blazor geçtiğinizde ..

Birden çok derlemeden bileşenlere rota

AdditionalAssemblies Router Bileşen için yönlendirilebilir bileşenleri ararken dikkate alınması gereken ek derlemeleri belirtmek için parametresini kullanın. Ek derlemeler, için belirtilen derlemeye ek olarak taranır AppAssembly . Aşağıdaki örnekte, Component1 başvurulan bileşen sınıfı kitaplığındatanımlanan yönlendirilebilir bir bileşendir. Aşağıdaki AdditionalAssemblies örnek, için yönlendirme desteğine neden olur Component1 .

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Rota parametreleri

Yönlendirici, karşılık gelen bileşen parametrelerini aynı adla doldurmak için yol parametrelerini kullanır. Yol parametresi adları büyük/küçük harfe duyarlıdır. Aşağıdaki örnekte text parametresi, yol segmentinin değerini bileşenin Text özelliğine atar. İçin bir istek yapıldığında /RouteParameter/amazing , <h1> etiket içeriği olarak işlenir Blazor is amazing! .

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

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

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

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

Pages/RouteParameter.razor:

@page "/RouteParameter/{text?}"

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

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

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

OnParametersSet OnInitialized{Async} Farklı bir isteğe bağlı parametre değeri ile aynı bileşene uygulama gezintisine izin vermek için yerine kullanın. Önceki örneğe bağlı olarak, Kullanıcı ' dan veya ' den ' a kadar arasında OnParametersSet geziniyor olması gerekir /RouteParameter /RouteParameter/amazing /RouteParameter/amazing /RouteParameter :

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

Yol kısıtlamaları

Yol kısıtlaması bir yönlendirme segmentinde bir bileşene tür eşleştirmeyi zorlar.

Aşağıdaki örnekte, User bileşen yolu yalnızca şu durumlarda eşleşir:

• IdIstek URL 'sinde bir yol kesimi var.
• IdSegment bir Integer ( int ) türüdür.

Pages/User.razor:

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

<h1>User Id: @Id</h1>

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

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

Rota kısıtlamaları isteğe bağlı parametrelerlede çalışır. Aşağıdaki örnekte, Id gereklidir, ancak Option isteğe bağlı bir Boolean yol parametresidir.

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

Noktalar içeren URL 'lerle yönlendirme

Barındırılan Blazor WebAssembly ve Blazor Server uygulamalar için, sunucu tarafı varsayılan yol şablonu, BIR istek URL 'sinin son segmentinin bir dosyanın istendiği nokta () içerdiğini varsayar . . Örneğin, URL, https://localhost.com:5001/example/some.thing yönlendirici tarafından adlı bir dosya için bir istek olarak yorumlanır some.thing . Ek yapılandırma olmadan, bir uygulama bir some.thing yönergeyle bir bileşene yönlendirilecekse @page ve some.thing bir yol parametre değeri Ise, uygulama 404-Found yanıtı döndürür. Bir nokta içeren bir veya daha fazla parametre içeren bir yol kullanmak için, uygulamanın rotayı özel bir şablonla yapılandırması gerekir.

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

Pages/Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

Server Barındırılan bir Blazor WebAssembly çözümün uygulamasının isteği yol parametresindeki bir noktayla yönlendirmesine izin vermek için param , içinde isteğe bağlı parametresine sahip bir geri dönüş dosya yolu şablonu ekleyin Program.cs :

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

Bir uygulamayı, Blazor Server isteği Route parametresinde bir noktayla yönlendirmek üzere yapılandırmak için param , içinde isteğe bağlı parametresine sahip bir geri dönüş sayfası yol şablonu ekleyin Program.cs :

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

Daha fazla bilgi için bkz. ASP.NET Core'de yönlendirme.

Catch-all Route parametreleri

Birden çok klasör sınırlarındaki yolları yakalayan catch-all yol parametreleri, bileşenlerinde desteklenir.

Catch-all Route parametreleri şunlardır:

• Yol segmenti 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.

Pages/CatchAll.razor:

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

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

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

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

URI ve gezinti durumu yardımcıları

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

Konum değişiklikleri

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

• Location: Yeni konumun URL'si.
• IsNavigationIntercepted: true Blazor ise, tarayıcıdan gezintiye müdahale etti. ise, false NavigationManager.NavigateTo gezintinin gerçekleşmesine neden olur.

Aşağıdaki bileşen:

• düğme kullanılarak seçildiğinde Counter uygulamanın Pages/Counter.razor bileşenine ( ) NavigateTo gidin.
• konumu değiştirilen olayı için abone olarak NavigationManager.LocationChanged işler.

  • Çerçeve HandleLocationChanged tarafından çağrıldıklarda Dispose yöntemin kancası unhooked. Yöntemin kancayı geri almak bileşenin çöp toplamaya izin verme.

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

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

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

<h1>Navigate in component code example</h1>

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

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

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

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Bileşen atma hakkında daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü .

Sorgu dizeleri

Yönlendirilebilir [SupplyParameterFromQuery] bir [Parameter] bileşenin bileşen parametresinin sorgu dizesinden gele olduğunu belirtmek için özniteliğini özniteliğiyle kullanın.

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

• bool, DateTime, decimal, double, float, Guid, int, long, string.
• Önceki türlerin null değerlenebilir çeşitlemeleri (null string değere değiştirilebilir bir varyantı olmayan hariç).
• Null değere veya null değere değer verilene kadar önceki türlerin dizileri.

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

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

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

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

• özelliği Filter olarak çözümlemektedir. scifi stars
• özelliği Page olarak çözümlemektedir. 3
• dizisi Stars ( ) adlı sorgu parametrelerinden doldurulur ve ve olarak star Name = "star" LeVar Burton Gary Oldman çözümler.

Pages/Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

<p>Assignees:</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 NavigationManager.GetUriWithQueryParameter URL'de bir veya daha fazla sorgu parametresi eklemek, değiştirmek veya kaldırmak için kullanın:

@inject NavigationManager NavigationManager

...

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

Yukarıdaki örnek için:

• Yer {NAME} tutucu, sorgu parametresinin adını belirtir. Yer {VALUE} tutucu değeri desteklenen bir tür olarak belirtir. Desteklenen türler bu bölümün ilerleyen kısımlarında listelenmiştir.
• Tek bir parametre ile 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 değere sahipse ve değeri ise null kaldırıldı.
• Verilen tür ( ) için doğru kültür sabit biçimlendirmesi CultureInfo.InvariantCulture uygulanır.
• Sorgu parametresi adı ve değeri URL ile kodlanmış.
• Türün birden çok örneği varsa eşleşen sorgu parametresi adına sahip tüm değerler değiştirilir.

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

@inject NavigationManager NavigationManager

...

NavigationManager.GetUriWithQueryParameters({PARAMETERS})

Yer {PARAMETERS} tutucu bir 'dır. IReadOnlyDictionary<string, object>

Sağlanan bir URI'den birden çok parametre eklenmiş, güncelleştirilmiş veya kaldırılmış yeni bir URI oluşturmak için bir GetUriWithQueryParameters URI dizesi iletir. Çerçeve, her bir değer için her sorgu parametresinin çalışma zamanı türünü belirlemek için kullanır ve value?.GetType() doğru kültür sabit biçimlendirmesini seçer. Çerçeve desteklenmeyen türler için hata veriyor. Desteklenen türler bu bölümün ilerleyen kısımlarında listelenmiştir.

@inject NavigationManager NavigationManager

...

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

• Yer {URI} tutucu, sorgu dizesi içeren veya olmayan URI'dir.
• Yer {PARAMETERS} tutucu bir 'dır. IReadOnlyDictionary<string, object>

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

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

Desteklenen türler şunlardır:

• Önceki türlerin null değerlenebilir çeşitlemeleri (null string değere değiştirilebilir bir varyantı olmayan hariç).
• Null değere veya null değere değer verilene kadar önceki türlerin dizileri.

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

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

Parametre mevcut olmayan bir sorgu parametresini ve değerini ekleme

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

Parametre değeri olduğunda sorgu parametresini kaldırma null

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

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

Aşağıdaki örnekte:

• name varsa kaldırılır.
• age , mevcut değilse 25 () int değeriyle eklenir. Varsa, age değerine 25 güncelleştirilir.
• eye color değerine eklenir veya green güncelleştirilir.

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

Numaralanabilir değerler için destek

Aşağıdaki örnekte:

• full name , tek bir değer olarak Morena Baccarin eklenir veya ile güncelleştirilir.
• ping parametreleri , ve ile eklenir 35 veya 16 87 240 değiştirilir.

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

Eklenen veya değiştirilen sorgu dizesiyle gezinme

Eklenen veya değiştirilen sorgu dizesiyle gezinmek için, oluşturulan url'yi adresine NavigateTo iletir.

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

• GetUriWithQueryParameter sorgu parametresini değeri name kullanarak eklemek veya değiştirmek Morena Baccarin için.
• Yeni NavigateTo URL'de gezinmeyi tetiklemek için çağrılar.

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

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

Bileşen Router kullanıcıya sayfa geçişinin oluştuğunu gösteriyor olabilir.

Bileşenin üst kısmında App ( ), ad alanı için bir yönerge App.razor @using Microsoft.AspNetCore.Components.Routing ekleyin:

@using Microsoft.AspNetCore.Components.Routing

Sayfa geçişi <Navigating> olayları sırasında görüntülemek için bileşene işaretleme ile bir etiket ekleyin. Daha fazla bilgi için Navigating bkz. (API belgeleri).

Bileşenin yönlendirici öğesi içeriğinde ( <Router>...</Router> App App.razor ):

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

özelliğini kullanan bir örnek Navigating için bkz. Derlemelerde yavaş yükleme derlemeleri ASP.NET Core Blazor WebAssembly .

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

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

• Doğrudan tarayıcılarında gezinerek bir yolu ilk kez ziyaret edin.
• Bağlantı veya çağrı kullanarak yeni bir NavigationManager.NavigateTo rotaya gidin.

Bileşeninde App ( App.razor ):

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

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

kullanan bir örnek için OnNavigateAsync bkz. Derlemelerde yavaş yükleme derlemeleri ASP.NET Core Blazor WebAssembly .

Bir uygulama veya barındırılan uygulamada sunucuda önceden Blazor Server incelerken Blazor WebAssembly iki OnNavigateAsync kez yürütülür:

• İstenen uç nokta bileşeni başlangıçta statik olarak işlenecek olduğunda.
• Tarayıcının uç nokta bileşenini işlemesi için ikinci bir kez.

içinde geliştirici kodunun iki kez yürütülmesini önlemek için, bileşeni içinde kullanmak üzere depolar ve OnNavigateAsync App burada NavigationContext OnAfterRender/OnAfterRenderAsync firstRender denetlenir. Daha fazla bilgi için Yaşam döngüsü makalesinde uygulamanın ne zaman önceden iş uygulamaya ekli olduğunu algılama Blazor makalesine bakın.

'de iptalleri işleme OnNavigateAsync

Geri NavigationContext çağırmaya geçirilen OnNavigateAsync nesne, yeni CancellationToken bir gezinti olayı oluştuğunda ayarlanmış bir içerir. Bu iptal belirteci, geri çağırmayı süresiz bir gezintide çalıştırmaya devam etmek için OnNavigateAsync OnNavigateAsync ayarlanmak için geri çağırmanın atılması gerekir.

Kullanıcı bir uç noktasına ancak ardından hemen yeni bir uç noktasına gitse, uygulama ilk uç nokta için geri çağırmayı OnNavigateAsync çalıştırmaya devam etmemalıdır.

Aşağıdaki bileşen App örneğinde:

• İptal belirteci çağrısında geçirildi ve kullanıcı uç noktadan uzaklaşıyorsa PostAsJsonAsync POST iptal /about edebilir.
• Kullanıcı uç noktadan uzaklaşıyorsa, iptal belirteci ürün ön alma işlemi sırasında /store ayarlanır.

App.razor:

@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 = [345, 789, 135, 689];

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

NavLink ve NavMenu bileşenleri

Gezinti bağlantıları NavLink oluştururken HTML köprü öğeleri ( ) yerine bir bileşen <a> kullanın. Bileşen bir öğe gibi davranır, ancak geçerli URL ile eş olup olmadığını temel alarak NavLink <a> bir CSS active href sınıfını iki durumlu olarak gösterir. 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 anlarına yardımcı olur. İsteğe bağlı olarak, geçerli yol ile eş olduğunda işlenmiş bağlantıya özel bir CSS sınıfı uygulamak için için bir CSS NavLink.ActiveClass sınıfı adı attayabilirsiniz. href

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

• NavLinkMatch.All: NavLink geçerli URL'nin tamamı ile eşlense etkindir.
• NavLinkMatch.Prefix (varsayılan): NavLink Geçerli URL'nin herhangi bir ön ekiyle eş olduğunda etkindir.

Önceki örnekte, giriş Home NavLink href="" URL'sini eşler ve yalnızca uygulamanın varsayılan temel yol URL'sinde CSS sınıfını alır active (örneğin, https://localhost:5001/ ). İkinci, NavLink kullanıcı ön ekli herhangi bir URL'yi (örneğin, ve ) ziyaret active component edinca https://localhost:5001/component sınıfını https://localhost:5001/component/another-segment alır.

Ek NavLink bileşen öznitelikleri işlenmiş sabit noktası etiketine geçirildi. Aşağıdaki örnekte bileşen NavLink ö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>

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

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

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

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

Blazor Server, uç nokta ASP.NET Core ile tümleştirilmiştir. Bir ASP.NET Core uygulaması, içinde ile etkileşimli bileşenler için gelen bağlantıları kabul etmek üzere MapBlazorHub Program.cs yapılandırılmıştır:

app.UseRouting();

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

Tipik yapılandırma, tüm istekleri uygulamanın sunucu tarafı bölümü için konak olarak hareket edecek Razor bir sayfaya Blazor Server yönlendirmedir. Kural gereği konak sayfası genellikle _Host.cshtml uygulamanın klasöründe Pages adlandırılmıştır.

Ana bilgisayar dosyasında belirtilen yol, yol eşleştirmede düşük önceliğe sahip olarak çalışır, çünkü bir geri dönüş yolu olarak çağrılır. Geri dönüş yolu, diğer yollar eşleşmezken kullanılır. Bu, uygulamanın uygulamanın bileşen yönlendirmesini engellemeden diğer denetleyicileri ve sayfaları kullanmasını Blazor Server sağlar.

Bu makalede, istek yönlendirmeyi yönetmeyi ve uygulamalarda gezinti bağlantıları NavLink oluşturmak için bileşeni kullanmayı Blazor öğrenin.

Rota şablonları

Bileşen, Router bir uygulamanın Razor bileşenlerine yönlendirmeye olanak Blazor sağlar. Bileşen, Router uygulamaların App bileşeninde Blazor kullanılır.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

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

Uygulama başlatıldığında, Yönlendiricinin bileşenleri olarak belirtilen derleme, sahip uygulamanın bileşenleri için yol AppAssembly bilgilerini toplamak üzere RouteAttribute taranır.

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

• tüm RouteData yol Router parametreleriyle birlikte 'den alır.
• Belirtilen bileşeni, diğer iç içe geçmiş düzenlerde dahil olmak üzere düzeniyle işler.

İsteğe bağlı DefaultLayout olarak, yönergesi ile düzen belirtmeden bileşenler için düzen sınıfına sahip bir parametre @layout belirtin. Çerçevenin proje Blazor şablonları, bileşeni MainLayout ( ) Shared/MainLayout.razor uygulamanın varsayılan düzeni olarak belirtir. Düzenler hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor geçtiğinizde .

Bileşenler, birden çok yönerge kullanarak birden çok yol @page şablonunu destekler. Aşağıdaki örnek bileşen ve istekleri üzerine /BlazorRoute /DifferentBlazorRoute yüklenir.

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

Router, sorgu dizesi değerleriyle etkileşim kurmaz. Sorgu dizeleriyle çalışmak için Sorgu dizesi ve parametreleri ayrıştırma bölümüne bakın.

İçerik bulunamasa özel içerik sağlama

Bileşen, Router istenen yol için içerik bulunamasa uygulamanın özel içerik belirtmesi için izin verir.

AppBileşende, bileşenin şablonunda Router özel içerik NotFound ayarlayın.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Rastgele öğeler, diğer etkileşimli bileşenler gibi <NotFound> etiketlerin içeriği olarak desteğe sahiptir. varsayılan düzeni içeriğe uygulamak NotFound için bkz. ASP.NET Core Blazor geçtiğinizde .

Birden çok derlemeden bileşenlere yönlendirme

Yönlendirilebilir AdditionalAssemblies bileşenler aranirken dikkate edilecek bileşen Router için ek derlemeler belirtmek üzere parametresini kullanın. için belirtilen derlemeye ek olarak ek derlemeler AppAssembly taranır. Aşağıdaki örnekte, Component1 başvurulan bir bileşen sınıfı kitaplığında tanımlanan yönlendirilebilir bir bileşendir. Aşağıdaki örnek AdditionalAssemblies için yönlendirme desteğiyle sonuç Component1 verir.

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Yol parametreleri

Yönlendirici, ilgili bileşen parametrelerini aynı adla doldurmak için yol parametrelerini kullanır. Yol parametresi adları büyük/büyük/büyük harfe duyarlı değildir. Aşağıdaki örnekte parametresi, text rota kesiminin değerini bileşenin özelliğine Text atar. için bir /RouteParameter/amazing istekte, etiket içeriği olarak <h1> Blazor is amazing! işlenir.

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

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

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

İsteğe bağlı parametreler desteğe bağlıdır. Aşağıdaki örnekte isteğe text bağlı parametresi, yol kesiminin değerini bileşenin özelliğine Text atar. Segment yoksa değeri olarak Text fantastic ayarlanır.

Pages/RouteParameter.razor:

@page "/RouteParameter/{text?}"

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

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

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

Farklı OnParametersSet bir OnInitialized{Async} isteğe bağlı parametre değeriyle aynı bileşene uygulama gezintisi yapmak için yerine kullanın. Önceki örneği temel alarak, kullanıcının 'den 'ye veya 'den 'ye OnParametersSet /RouteParameter /RouteParameter/amazing gide ne zaman gidi gerektiğini /RouteParameter/amazing /RouteParameter kullanın:

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

Yol kısıtlamaları

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

Aşağıdaki örnekte, bileşenin yolu User yalnızca aşağıdakiler için eş olur:

• İstek Id URL'sinde bir yol kesimi vardır.
• Segment Id bir tamsayı ( ) t int değeridir.

Pages/User.razor:

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

<h1>User Id: @Id</h1>

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

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

Rota kısıtlamaları isteğe bağlı parametrelerlede çalışır. Aşağıdaki örnekte, Id gereklidir, ancak Option isteğe bağlı bir Boolean yol parametresidir.

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

Noktalar içeren URL 'lerle yönlendirme

Barındırılan Blazor WebAssembly ve Blazor Server uygulamalar için, sunucu tarafı varsayılan yol şablonu, BIR istek URL 'sinin son segmentinin bir dosyanın istendiği nokta () içerdiğini varsayar . . Örneğin, URL, https://localhost.com:5001/example/some.thing yönlendirici tarafından adlı bir dosya için bir istek olarak yorumlanır some.thing . Ek yapılandırma olmadan, bir uygulama bir some.thing @page yönergeyle bir bileşene yönlendirilecekse ve some.thing bir yol parametre değeri ise, uygulama 404-Found yanıtı döndürür. Bir nokta içeren bir veya daha fazla parametre içeren bir yol kullanmak için, uygulamanın rotayı özel bir şablonla yapılandırması gerekir.

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

Pages/Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

Server Barındırılan bir Blazor WebAssembly çözümün uygulamasının isteği yol parametresindeki bir noktayla yönlendirmesine izin vermek için param , içinde isteğe bağlı parametresine sahip bir geri dönüş dosya yolu şablonu ekleyin Startup.Configure .

Startup.cs:

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

Bir uygulamayı, Blazor Server isteği Route parametresinde bir noktayla yönlendirmek üzere yapılandırmak için param , içinde isteğe bağlı parametresine sahip bir geri dönüş sayfası yol şablonu ekleyin Startup.Configure .

Startup.cs:

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

Daha fazla bilgi için bkz. ASP.NET Core'de yönlendirme.

Catch-all Route parametreleri

Birden çok klasör sınırlarındaki yolları yakalayan catch-all yol parametreleri, bileşenlerinde desteklenir.

Catch-all Route parametreleri şunlardır:

• Yol segmenti 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.

Pages/CatchAll.razor:

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

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

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

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

URI ve gezinti durumu yardımcıları

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

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

• Location: Yeni konumun URL 'SI.
• IsNavigationIntercepted: Varsa true , Blazor Tarayıcıdan gezinme ele geçirilebilir. Varsa false , NavigationManager.NavigateTo gezintinin oluşmasına neden oldu.

Aşağıdaki bileşen:

• CounterDüğme seçildiğinde uygulamanın bileşenine () gider Pages/Counter.razor NavigateTo .
• Abone olunarak konum değişti olayını işler NavigationManager.LocationChanged .

  • HandleLocationChangedYöntemi, Dispose Framework tarafından çağrıldığında yok edilir. Yöntemi kaldırmak, bileşenin çöp toplamasına izin verir.

  • Düğme seçildiğinde günlükçü uygulama aşağıdaki bilgileri günlüğe kaydeder:

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

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

<h1>Navigate in component code example</h1>

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

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

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

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Bileşen elden çıkarma hakkında daha fazla bilgi için bkz RazorASP.NET Core bileşen yaşam döngüsü ..

Sorgu dizesi ve ayrıştırma parametreleri

Bir isteğin sorgu dizesi özelliğinden elde edilir NavigationManager.Uri :

@inject NavigationManager NavigationManager

...

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

Bir sorgu dizesinin parametrelerini ayrıştırmak için, URLSearchParams JAVASCRIPT (js) birlikte çalışabilirliğinesahip bir yaklaşım kullanılır:

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

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

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

RouterBileşen, kullanıcıya bir sayfa geçişinin gerçekleştiğini gösterebilir.

Bileşenin en üstünde App ( App.razor ), @using ad alanı için bir yönerge ekleyin Microsoft.AspNetCore.Components.Routing :

@using Microsoft.AspNetCore.Components.Routing

<Navigating>Sayfa geçişi olayları sırasında görüntülenecek işaretlerle bileşene bir etiket ekleyin. Daha fazla bilgi için bkz Navigating . (API belgeleri).

Bileşeninin () yönlendirici öğesi içeriğinde ( <Router>...</Router> ) App App.razor :

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

Özelliğini kullanan bir örnek için Navigating bkz Derlemelerde yavaş yükleme derlemeleri ASP.NET Core Blazor WebAssembly ..

Zaman uyumsuz gezinti olaylarını işle OnNavigateAsync

RouterBileşen bir özelliği destekler OnNavigateAsync . OnNavigateAsyncİşleyici, Kullanıcı şunları yaparken çağrılır:

• Doğrudan tarayıcısında gezinerek bir yolu ilk kez ziyaret edin.
• Bağlantı veya çağırma kullanarak yeni bir yola gider NavigationManager.NavigateTo .

AppBileşende ( App.razor ):

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

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

Kullanan bir örnek için OnNavigateAsync bkz Derlemelerde yavaş yükleme derlemeleri ASP.NET Core Blazor WebAssembly ..

Bir Blazor Server uygulamadaki veya barındırılan Blazor WebAssembly uygulamadaki prerendering, OnNavigateAsync iki kez yürütülür:

• İstenen uç nokta bileşeni başlangıçta statik olarak işlendiğinde.
• Son nokta bileşenini tarayıcıda işleyen ikinci bir zaman.

' Deki geliştirici kodunun OnNavigateAsync iki kez yürütülmesini engellemek için, App bileşen ' NavigationContext de kullanım için OnAfterRender/OnAfterRenderAsync ' i saklayabilir, burada firstRender denetlenebilirler. Daha fazla bilgi için bkz. Blazor yaşam döngüsü makalesinde uygulamanın ne zaman prerendering algılar .

Üzerinde iptalleri işle OnNavigateAsync

NavigationContextGeri çağırmaya geçirilen nesne, OnNavigateAsync CancellationToken Yeni bir gezinti olayı gerçekleştiğinde ayarlanmış bir içerir. OnNavigateAsyncBu iptal belirteci, OnNavigateAsync geri çağırma işlemini eski bir gezinmede çalıştırmaya devam etmeden kaçınmak üzere ayarlandığında, geri çağırma işlemi throw olmalıdır.

Bir Kullanıcı bir uç noktaya gider, ancak hemen yeni bir uç noktaya gider, uygulama OnNavigateAsync ilk uç nokta için geri çağırma çalıştırmaya devam edememelidir.

Aşağıdaki App bileşen örneğinde:

• İptal belirteci öğesine öğesine geçirilir PostAsJsonAsync , bu, Kullanıcı uç noktadan UZAKLAŞTıĞıNDA gönderiyi iptal edebilir /about .
• İptal belirteci, Kullanıcı uç noktadan uzaklaştığında bir ürünün önceden getirme işlemi sırasında ayarlanır /store .

App.razor:

@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 = [345, 789, 135, 689];

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

NavLink ve NavMenu bileşenleri

NavLinkGezinti bağlantıları oluştururken, HTML köprü öğelerinin () yerine bir bileşen kullanın <a> . Bir NavLink bileşen <a> , active href geçerli URL ile eşleşip eşleşmediğini temel alarak bir CSS sınıfına geçiş yaptığı sürece bir öğesi gibi davranır. activeSınıfı, bir kullanıcının hangi sayfanın etkin sayfa olduğunu anladığı gezinti bağlantıları arasında yardımcı olur. İsteğe bağlı olarak, NavLink.ActiveClass geçerli yol ile eşleştiğinde işlenen bağlantıya özel bır CSS sınıfı uygulamak için BIR CSS sınıfı adı atayın href .

NavLinkMatchÖğesinin özniteliğine atayabilmeniz için kullanabileceğiniz iki seçenek vardır Match <NavLink> :

• NavLinkMatch.All: NavLink GEÇERLI URL 'nin tamamı eşleştiğinde etkin olur.
• NavLinkMatch.Prefix (varsayılan): NavLink geçerli URL 'nin herhangi bir önekiyle eşleştiğinde etkin olur.

Yukarıdaki örnekte, Home NavLink href="" ana URL ile eşleşir ve yalnızca active uygulamanın varsayılan temel yol URL 'sindeki CSS sınıfını alır (örneğin, https://localhost:5001/ ). İkincisi, NavLink active Kullanıcı ön eki olan herhangi bir URL 'yi ziyaret ettiğinde sınıfı alır component (örneğin, https://localhost:5001/component ve https://localhost:5001/component/another-segment ).

Ek NavLink bileşen öznitelikleri, işlenen tutturucu etiketine geçirilir. Aşağıdaki örnekte, NavLink bileşen target özniteliğini içerir:

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

Aşağıdaki HTML biçimlendirmesi işlenir:

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

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

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

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

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

Blazor Server, uç nokta ASP.NET Core ile tümleştirilmiştir. Bir ASP.NET Core uygulaması, içinde ile etkileşimli bileşenler için gelen bağlantıları kabul etmek üzere MapBlazorHub Startup.Configure yapılandırılır.

Startup.cs:

using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

Tipik yapılandırma, tüm istekleri uygulamanın sunucu tarafı bölümü için konak olarak hareket edecek Razor bir sayfaya Blazor Server yönlendirmedir. Kural gereği konak sayfası genellikle _Host.cshtml uygulamanın klasöründe Pages adlandırılmıştır.

Ana bilgisayar dosyasında belirtilen yol, yol eşleştirmede düşük önceliğe sahip olduğu için bir geri dönüş yolu olarak çağrılır. Geri dönüş yolu, diğer yollar eşleşmezken kullanılır. Bu, uygulamanın uygulamanın bileşen yönlendirmesini engellemeden diğer denetleyicileri ve sayfaları kullanmasını Blazor Server sağlar.

Bu makalede, istek yönlendirmeyi yönetmeyi ve uygulamalarda gezinti bağlantıları NavLink oluşturmak için bileşeni kullanmayı Blazor öğrenin.

Rota şablonları

Bileşen, Router bir uygulamanın Razor bileşenlerine yönlendirmeye olanak Blazor sağlar. Bileşen, Router uygulamaların App bileşeninde Blazor kullanılır.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

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

Uygulama başlatıldığında, Yönlendiricinin bileşenleri olarak belirtilen derleme, sahip uygulamanın bileşenleri için yol AppAssembly bilgilerini toplamak üzere RouteAttribute taranır.

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

• tüm RouteData yol Router parametreleriyle birlikte 'den alır.
• Belirtilen bileşeni, iç içe geçmiş diğer düzenlerde dahil olmak üzere düzeniyle işler.

İsteğe bağlı DefaultLayout olarak, yönergesi ile düzen belirtmeden bileşenler için düzen sınıfına sahip bir parametre @layout belirtin. Çerçevenin proje Blazor şablonları, bileşeni MainLayout ( ) Shared/MainLayout.razor uygulamanın varsayılan düzeni olarak belirtir. Düzenler hakkında daha fazla bilgi için bkz. ASP.NET Core Blazor geçtiğinizde .

Bileşenler, birden çok yönerge kullanarak birden çok yol @page şablonunu destekler. Aşağıdaki örnek bileşen ve istekleri üzerine /BlazorRoute /DifferentBlazorRoute yüklenir.

Pages/BlazorRoute.razor:

@page "/BlazorRoute"
@page "/DifferentBlazorRoute"

<h1>Blazor routing</h1>

Router, sorgu dizesi değerleriyle etkileşim kurmaz. Sorgu dizeleriyle çalışmak için Sorgu dizesi ve parametreleri ayrıştırma bölümüne bakın.

İçerik bulunamasa özel içerik sağlama

Bileşen, Router istenen yol için içerik bulunamasa uygulamanın özel içerik belirtmesi için izin verir.

AppBileşende, bileşenin şablonunda Router özel içerik NotFound ayarlayın.

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h1>Sorry</h1>
        <p>Sorry, there's nothing at this address.</p> b
    </NotFound>
</Router>

Rastgele öğeler, diğer etkileşimli bileşenler gibi <NotFound> etiketlerin içeriği olarak desteğe sahiptir. varsayılan düzeni içeriğe uygulamak NotFound için bkz. ASP.NET Core Blazor geçtiğinizde .

Birden çok derlemeden bileşenlere yönlendirme

Yönlendirilebilir AdditionalAssemblies bileşenler aranirken dikkate edilecek bileşen Router için ek derlemeler belirtmek üzere parametresini kullanın. için belirtilen derlemeye ek olarak ek derlemeler AppAssembly taranır. Aşağıdaki örnekte, Component1 başvurulan bir bileşen sınıfı kitaplığında tanımlanan yönlendirilebilir bir bileşendir. Aşağıdaki örnek AdditionalAssemblies için yönlendirme desteğiyle sonuç Component1 verir.

App.razor:

<Router
    AppAssembly="@typeof(Program).Assembly"
    AdditionalAssemblies="new[] { typeof(Component1).Assembly }">
    @* ... Router component elements ... *@
</Router>

Yol parametreleri

Yönlendirici, ilgili bileşen parametrelerini aynı adla doldurmak için yol parametrelerini kullanır. Yol parametresi adları büyük/büyük/büyük harfe duyarlı değildir. Aşağıdaki örnekte parametresi, text rota kesiminin değerini bileşenin özelliğine Text atar. için bir /RouteParameter/amazing istekte, etiket içeriği olarak <h1> Blazor is amazing! işlenir.

Pages/RouteParameter.razor:

@page "/RouteParameter/{text}"

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

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

İsteğe bağlı parametreler desteklenmiyor. Aşağıdaki örnekte iki @page yönerge uygulanmıştır. İlk yönerge, bileşende parametre olmadan gezinmeye izin verilmiştir. İkinci yönerge, yol {text} parametresi değerini bileşenin özelliğine Text atar.

Pages/RouteParameter.razor:

@page "/RouteParameter"
@page "/RouteParameter/{text}"

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

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

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

Farklı OnParametersSet bir OnInitialized{Async} isteğe bağlı parametre değeriyle aynı bileşene uygulama gezintisi yapmak için yerine kullanın. Önceki örneği temel alarak, kullanıcının 'den 'ye veya 'den 'ye OnParametersSet /RouteParameter /RouteParameter/amazing gide ne zaman gidi gerektiğini /RouteParameter/amazing /RouteParameter kullanın:

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

Yol kısıtlamaları

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

Aşağıdaki örnekte, bileşenin yolu User yalnızca aşağıdakiler için eş olur:

• İstek Id URL'sinde bir yol kesimi vardır.
• Segment Id bir tamsayı ( ) t int değeridir.

Pages/User.razor:

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

<h1>User Id: @Id</h1>

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

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

Noktalar içeren URL'lerle yönlendirme

Barındırılan ve uygulamalar için, sunucu tarafı varsayılan yol şablonu, bir istek URL'sinin son kesiminin bir dosyanın istenen bir nokta Blazor WebAssembly Blazor Server ( ) . içerdiğini varsayır. Örneğin, URL https://localhost.com:5001/example/some.thing yönlendirici tarafından adlı bir dosyaya istek olarak yorumlanır. some.thing Ek yapılandırma olmadan, yönergesi olan bir bileşene yönlendirilen ve yol parametresi değeri olan bir uygulama 404 - Bulunamadı some.thing yanıtı @page some.thing döndürür. Bir yolu nokta içeren bir veya daha fazla parametreyle kullanmak için, uygulamanın yolu özel bir şablonla yapılandırması gerekir.

ExampleURL'nin son segmentinde bir yol parametresi al aşağıdaki bileşeni göz önünde bulundurabilirsiniz.

Pages/Example.razor:

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

<p>
    Param: @Param
</p>

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

Barındırılan bir çözümün uygulamasının isteği yönlendirme parametresinde bir noktayla yönlendirmesi için, içinde isteğe bağlı parametresiyle bir geri dönüş Server Blazor WebAssembly dosyası yol şablonu param Startup.Configure ekleyin.

Startup.cs:

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

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

Startup.cs:

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

Daha fazla bilgi için bkz. ASP.NET Core'de yönlendirme.

Tüm catch rota parametreleri

Tüm catch yol parametreleri 5.0 veya ASP.NET Core için de destek sağlar. Daha fazla bilgi için bu makalenin 5.0 sürümünü seçin.

URI ve gezinti durumu yardımcıları

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

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

• Location: Yeni konumun URL'si.
• IsNavigationIntercepted: true Blazor ise, tarayıcıdan gezintiye müdahale etti. ise, false NavigationManager.NavigateTo gezintinin gerçekleşmesine neden olur.

Aşağıdaki bileşen:

• düğme kullanılarak seçildiğinde Counter uygulamanın Pages/Counter.razor bileşenine ( ) NavigateTo gidin.
• için abone olarak konum değiştirme olayı NavigationManager.LocationChanged işleme.

  • Çerçeve HandleLocationChanged tarafından çağrıldıklarda Dispose yöntemin kancası unhooked. Yöntemin kancası unhooking bileşenin çöp toplamaya izin sağlar.

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

    BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:5001/counter

Pages/Navigate.razor:

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

<h1>Navigate in component code example</h1>

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

@code {
    private void NavigateToCounterComponent()
    {
        NavigationManager.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

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

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Bileşen atma hakkında daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü .

Sorgu dizesi ve ayrıştırma parametreleri

bir isteğin sorgu dizesi özelliğinden NavigationManager.Uri elde edilir:

@inject NavigationManager NavigationManager

...

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

Bir sorgu dizesinin parametrelerini ayrıştırmak için yaklaşımlardan biri URLSearchParams JavaScript (JS)birlikte çalışma ile kullanmaktır:

NavLink ve NavMenu bileşenleri

Gezinti bağlantıları NavLink oluştururken HTML köprü öğeleri ( ) yerine bir bileşen <a> kullanın. Bileşen bir öğe gibi davranır, ancak geçerli URL ile eş olup olmadığını temel alarak NavLink <a> bir CSS active href sınıfını iki durumlu olarak gösterir. 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 anlarına yardımcı olur. İsteğe bağlı olarak, geçerli yol ile eş olduğunda işlenmiş bağlantıya özel bir CSS sınıfı uygulamak için için bir CSS NavLink.ActiveClass sınıfı adı attayabilirsiniz. href

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

• NavLinkMatch.All: NavLink geçerli URL'nin tamamı ile eşlense etkindir.
• NavLinkMatch.Prefix (varsayılan): NavLink Geçerli URL'nin herhangi bir ön ekiyle eş olduğunda etkindir.

Önceki örnekte, giriş Home NavLink href="" URL'sini ile eşler ve yalnızca uygulamanın varsayılan temel yol URL'sinde CSS sınıfını alır active (örneğin, https://localhost:5001/ ). İkinci, NavLink kullanıcı ön ekli herhangi bir URL'yi (örneğin, ve ) ziyaret active component edinca https://localhost:5001/component sınıfını https://localhost:5001/component/another-segment alır.

Ek NavLink bileşen öznitelikleri işlenmiş sabit noktası etiketine geçirildi. Aşağıdaki örnekte bileşen NavLink ö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>

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

@foreach(var c in Enumerable.Range(0,10))
{
    <li ...>
        <NavLink ... href="@c">
            <span ...></span> @c
        </NavLink>
    </li>
}

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

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

Blazor Server, uç nokta ASP.NET Core ile tümleştirilmiştir. Bir ASP.NET Core uygulaması, içinde ile etkileşimli bileşenler için gelen bağlantıları kabul etmek üzere MapBlazorHub Startup.Configure yapılandırılır.

Startup.cs:

using Microsoft.AspNetCore.Builder;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

Tipik yapılandırma, tüm istekleri uygulamanın sunucu tarafı bölümü için konak olarak hareket edecek Razor bir sayfaya Blazor Server yönlendirmedir. Kural gereği konak sayfası genellikle _Host.cshtml uygulamanın klasöründe Pages adlandırılmıştır.

Ana bilgisayar dosyasında belirtilen yol, yol eşleştirmede düşük önceliğe sahip olarak çalışır, çünkü bir geri dönüş yolu olarak çağrılır. Geri dönüş yolu, diğer yollar eşleşmezken kullanılır. Bu, uygulamanın uygulamanın bileşen yönlendirmesini engellemeden diğer denetleyicileri ve sayfaları kullanmasını Blazor Server sağlar.