ASP.NET Temel Blazor yönlendirme ve gezinti

Statik ve etkileşimli yönlendirme

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

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

Bileşene Routes etkileşimli 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.

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.

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

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

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

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

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

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

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

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

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.

Bu bölüm s için Blazor Web Appgeç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);

Etkileşimli yönlendirme

Statik SSR ve sunucuda statik yönlendirmeden sonra yönlendiricinin Routes Blazor 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.

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.

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

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

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

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

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

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

İsteğe bağlı parametreler desteklenir. Aşağıdaki örnekte isteğe bağlı text parametresi, yönlendirme segmentinin değerini Text özelliğine atar. Segment yoksa 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}.

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

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

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

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

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

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

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Server Blazor 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ılan Blazor 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}"

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

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

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

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

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

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

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

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

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

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

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

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

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gelişmiş gezinti ve form işleme

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

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

• Normal gezinti (çapraz belge gezintisi): İstek URL'si için tam sayfa yeniden yükleme tetikleniyor.
• Gelişmiş gezinti (aynı belge gezintisi): Blazor isteği durdurur ve bunun yerine bir fetch istek gerçekleştirir. Blazor ardından yanıt içeriğ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 App Betik (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 forceLoad false, 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 forceLoad true, 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:

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

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

Gelişmiş form gönderileri yalnızca 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).

Gezinme geçmişi durumu

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

Gezinme seçenekleri

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.

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

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

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:

Bileşen parametresi özelliklerinden ([Parameter]) [SupplyParameterFromQuery] farklı olarak, özelliklerine publicek olarak işaretlenebilirprivate.

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

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

[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 Burton Gary Oldmançözümleniyor.

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

@code {
    [SupplyParameterFromQuery]
    private string? Filter { get; set; }

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

    [SupplyParameterFromQuery(Name = "star")]
    private string[]? Stars { get; set; }
}

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

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

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

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[]? Stars { get; set; }
}

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

@inject NavigationManager Navigation

...

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

Yukarıdaki örnek için:

• Yer tutucu, {NAME} sorgu parametresi adını belirtir. Yer tutucu, {VALUE} değeri desteklenen bir tür olarak belirtir. Desteklenen türler bu bölümün ilerleyen bölümlerinde listelenmiştir.
• Tek bir parametreyle geçerli URL'ye eşit bir dize döndürülür:
  • Sorgu parametresi adı geçerli URL'de yoksa eklenir.
  • Sorgu parametresi geçerli URL'de mevcutsa sağlanan değere güncelleştirildi.
  • Sağlanan değerin türü null 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ı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.

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

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

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

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

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

Navigation.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( 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"
    })

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

Eklenen veya değiştirilen sorgu dizesiyle gezinme

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 id targetElement öğ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 geliştirici kodunun OnNavigateAsync iki kez yürütülmesini önlemek için bileşen, Routes kullanım için öğesini kontrol edilebilen yaşam döngüsü yönteminde firstRenderOnAfterRender{Async} depolayabilir.NavigationContext Daha fazla bilgi için bkz . JavaScript birlikte çalışmasıyla ön giriş yapma.

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 bkz . JavaScript birlikte çalışmasıyla ön giriş yapma.

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

Konum değişikliklerini işleme/engelleme

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

• TargetLocation: Hedef konumu alır.
• HistoryEntryState: Hedef geçmiş girişiyle ilişkili durumu alır.
• IsNavigationIntercepted: Gezintinin bağlantıdan kesilip kesildiğini alır.
• CancellationToken: Kullanıcının farklı bir gezinti tetiklediğini belirlemek için gezintinin iptal edilmiş olup olmadığını belirlemek için bir CancellationToken alır.
• PreventNavigation: Gezintinin devam etmesini önlemek için çağrılır.

Bir bileşen, yaşam döngüsü yönteminde birden çok konum değiştirme işleyicisi OnAfterRender{Async} 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ü.

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

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:

• Gezintinin https://www.microsoft.com başarılı olması için önce Microsoft'un web sitesinin bağlantısını izleme girişiminin kullanıcı tarafından onaylanması gerekir.
• PreventNavigation, kullanıcı iletişim kutusunu oluşturan bir JavaScript () birlikte çalışma çağrısı aracılığıyla gezintiyi onaylamayı reddederse gezintinin oluşmasını önlemek için çağrılırconfirmJS.JS

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

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

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

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

ABlazor Web App, ASP.NET Çekirdek Uç Nokta Yönlendirme ile tümleşiktir. ASP.NET Core uygulaması, dosyasındaki etkileşimli bileşenler MapRazorComponents Program 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 MapBlazorHub Program 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.cshtml Pages.

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.