Blazor yönlendirici bileşenini kullanarak uygulamanızın gezintisini denetleme
- 5 dakika
Blazor'ın yönlendirme sistemi, kullanıcı isteklerinin bunları işleyebilen ve kullanıcının istediği bilgileri döndürebilen bir bileşene ulaşmasını sağlamak için esnek seçenekler sağlar.
Pizza teslim şirketinin web sitesinde çalıştığınızı varsayalım. Siteyi, pizza ayrıntıları ve özel topping ayrıntıları isteklerinin aynı bileşen tarafından işlenmek üzere ayarlamak istiyorsunuz. Bu aşamayı tamamladınız, ancak testiniz toplayan isteklerin bir hata iletisi aldığını gösteriyor. Bu sorunu düzeltmeniz gerekir.
Burada, yönergesini kullanarak Blazor'da yolları yapılandırmayı @page öğreneceksiniz.
Note
Bu ünitedeki kod blokları açıklayıcı örneklerdir. Bir sonraki ünitede kendi kodunuzu yazacaksınız.
Yol şablonlarını kullanma
Kullanıcı web uygulamanızdan sayfa isteğinde bulunurken, URI'deki bilgilerle ne görmek istediğini belirtebilir. Örneğin:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Protokol ve web sitesi adresinden sonra, bu URI kullanıcının margherita pizzaları hakkında bilgi edinmek istediğini gösterir. Ayrıca, soru işaretinden sonraki sorgu dizesi, ek bir ananas toppingi ile ilgilendiklerini gösterir. Blazor'da, her isteğin en iyi yanıt verebilen bileşene gönderilmesini sağlamak için yönlendirmeyi kullanırsınız. Ayrıca, bileşenin kullanıcının istediğini görüntülemek için gereken tüm bilgilere sahip olduğundan emin olmak için yönlendirmeyi de kullanırsınız. Bu durumda, Pizzas bileşenine ve bu bileşenin ananas ekleme hakkında bilgi içeren bir margherita pizza görüntüleme isteğini göndermek isteyebilirsiniz.
Blazor, istekleri Yönlendirici bileşeni adlı özel bir bileşenle yönlendirir. Bileşen App.razor'da şu şekilde yapılandırılır:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, we haven't found any pizzas here.</p>
</NotFound>
</Router>
Uygulama başlatıldığında Blazor, hangi derlemeyi taraması AppAssembly gerektiğini bulmak için özniteliğini denetler. Bu derlemeyi RouteAttribute mevcut olan bileşenler için tarar. Blazor, isteklerin bileşenlere nasıl yönlendirildiğini belirten bir RouteData nesnesi derlemek için bu değerleri kullanır. Uygulamayı kodladığınızda, RouteAttribute'u@pagekullanırsınız.
Yukarıdaki kodda <Found> etiket, çalışma zamanında yönlendirmeyi işleyen bileşeni belirtir: RouteView bileşeni. Bu bileşen RouteData nesnesini ve URI veya sorgu dizesinden tüm parametreleri alır. Ardından belirtilen bileşeni ve düzenini işler. Seçili bileşen yönergesiyle <Found> bir düzen belirtmediğinde kullanılan varsayılan düzeni @layout belirtmek için etiketini kullanabilirsiniz. Bu modülün ilerleyen bölümlerinde düzenler hakkında daha fazla bilgi edineceksiniz.
Bileşende <Router> , etiketi kullanarak <NotFound> eşleşen bir yol olmadığında kullanıcıya ne döndürüleceğini de belirtebilirsiniz. Yukarıdaki örnek tek <p> bir paragraf döndürür, ancak daha karmaşık HTML işleyebilirsiniz. Örneğin, giriş sayfasına bir bağlantı veya site yöneticileri için bir kişi sayfası içerebilir.
yönergesini @page kullanma
Blazor bileşeninde @page yönergesi, bileşenin istekleri doğrudan işlemesi gerektiğini belirtir. Yönergesinde bir dize olarak geçirerek bir @page belirtebilirsiniz. Örneğin, bu öznitelik sayfanın /Pizzas yoluna yönelik istekleri işlediğini belirtir:
@page "/Pizzas"
Bileşene birden fazla yol belirtmek istiyorsanız, aşağıdaki örnekte olduğu gibi iki veya daha fazla @page yönerge kullanın:
@page "/Pizzas"
@page "/CustomPizzas"
Konum bilgilerini alma ve NavigationManager ile gezinme
Kullanıcının istediği URI'yi işlemek için örneğin bir http://www.contoso.com/pizzas/margherita/?extratopping=pineapplebileşen yazdığınızı varsayalım.
Bir bileşen yazarken, aşağıdaki gibi gezinti bilgilerine erişmeniz gerekebilir:
- Gibi geçerli tam URI
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - Temel URI, örneğin
http://www.contoso.com/. - Temel göreli yol, örneğin
pizzas/margherita. - Sorgu dizesi, örneğin
?extratopping=pineapple.
Tüm bu değerleri almak için bir NavigationManager nesnesi kullanabilirsiniz. Nesneyi bileşene eklemelisiniz ve ardından özelliklerine erişebilirsiniz. Bu kod NavigationManager , web sitesinin temel URI'sini almak için nesnesini kullanır ve ardından giriş sayfasına bir bağlantı ayarlamak için bu nesneyi kullanır:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Sorgu dizesine erişmek için tam URI'yi ayrıştırmalısınız. Bu ayrıştırma işlemini yürütmek için derlemeden sınıfını QueryHelpersMicrosoft.AspNetCore.WebUtilities kullanın:
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Önceki bileşen dağıtıldığında, bir kullanıcı URI'yi http://www.contoso.com/pizzas?extratopping=Pineappleistediyse, işlenen sayfada "Bu topping: Pineapple"i eklemek istiyorum" iletisini görür.
Yöntemini çağırarak NavigationManager kullanıcılarınızı koddaki başka bir bileşene göndermek için nesnesini de kullanabilirsinizNavigationManager.NavigateTo():
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Note
yöntemine NavigateTo() geçirdiğiniz dize, kullanıcıyı göndermek istediğiniz mutlak veya göreli URI'dir. Bu adreste ayarlanmış bir bileşeniniz olduğundan emin olun. Yukarıdaki kodda, yönergesine @page "/buypizza" sahip bir bileşen bu yolu işler.
NavLink bileşenlerini kullanma
Önceki örneklerden birinde kod, değeri almak ve etiketin NavigationManager.BaseUrihref özniteliğini giriş sayfasına ayarlamak <a> için kullanmak için kullanılmıştır. Blazor'da, bağlantının bileşenini kullanın. Sınıfını active stil haline getirerek, kullanıcıya geçerli sayfa için hangi gezinti bağlantısının olduğunu açıkça ifade edebilirsiniz.
NavLink kullandığınızda, giriş sayfası bağlantısı örneği aşağıdaki koda benzer:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Match
NavLink bileşenindeki özniteliği, bağlantı vurgulandığında yönetmek için kullanılır. İki seçenek vardır:
-
NavLinkMatch.All: Bu değeri kullandığınızda, bağlantı yalnızca geçerli URL'nin tamamıyla eşleştiğinde
hrefetkin bağlantı olarak vurgulanır. -
NavLinkMatch.Prefix: Bu değeri kullandığınızda, geçerli URL'nin ilk bölümüyle eşleştiğinde
hrefbağlantı etkin olarak vurgulanır. Örneğin, bağlantısına<NavLink href="pizzas" Match="NavLinkMatch.Prefix">sahip olduğunuzu varsayalım. Bu bağlantı, geçerli URL olduğunda ve bu URL'ninhttp://www.contoso.com/pizzasiçindeki herhangi bir konum için (gibihttp://www.contoso.com/pizzas/formaggio) etkin olarak vurgulanır. Bu davranış, kullanıcının web sitesinin şu anda hangi bölümünü görüntülediklerini anlamasına yardımcı olabilir.