Düzenleri kullanarak yeniden kullanılabilir Blazor bileşenleri oluşturma
- 7 dakika
Blazor, uygulamanızdaki birçok sayfada görünen ortak kullanıcı arabirimi (UI) öğelerini kodlamayı kolaylaştıran düzenler içerir.
Pizza teslim şirketinin web sitesinde çalıştığınızı ve ana sayfaların çoğunun içeriğini bir dizi Blazor bileşeni olarak oluşturduğunuzu varsayalım. Bu sayfaların aynı marka, gezinti menüleri ve alt bilgi bölümüne sahip olduğundan emin olmak istiyorsunuz. Ancak, bu kodu kopyalayıp birden çok dosyaya yapıştırmak zorunda kalmak istemezsiniz.
Burada Blazor'daki düzen bileşenlerini kullanarak birden çok sayfada ortak HTML oluşturmayı öğreneceksiniz.
Note
Bu ünitedeki kod blokları açıklayıcı örneklerdir. Bir sonraki ünitede kendi kodunuzu yazacaksınız.
Blazor düzenleri nedir?
Çoğu web sitelerinde kullanıcı arabirimi öğelerinin düzeni birden çok sayfada paylaşılır. Örneğin, sayfanın üst kısmında markalı bir başlık, sol tarafta ana site gezinti bağlantıları ve alt kısımda bir yasal uyarı olabilir. Bu yaygın kullanıcı arabirimi öğelerini bir sayfada kodladıktan sonra, bunları diğer tüm sayfaların koduna kopyalayıp yapıştırmak yorucu olur. Daha da kötüsü, daha sonra sitenin bağlanılacak yeni bir ana bölümü veya site yeniden markalama gibi bir değişiklik olursa, aynı değişiklikleri tek tek tüm bileşenlerde tekrarlamanız gerekir. Bunun yerine, yaygın kullanıcı arabirimi öğelerini kolaylaştırmak ve yeniden kullanmak için bir düzen bileşeni kullanın.
Blazor'daki düzen bileşeni, işlenen işaretlemesini ona başvuran tüm bileşenlerle paylaşan bileşendir. Gezinti menüleri, markalama ve alt bilgiler gibi yaygın kullanıcı arabirimi öğelerini düzene yerleştirirsiniz. Ardından bu düzene diğer birden çok bileşenden başvurursunuz. Sayfa işlendiğinde, benzersiz öğeler, örneğin istenen pizzanın ayrıntıları, referans alan bileşenden gelir. Ancak, ortak öğeler düzenden gelir. Ortak kullanıcı arabirimi öğelerini düzende yalnızca bir kez kodlasanız iyi olur. Ardından siteyi yeniden markalamalısınız veya başka bir değişiklik yapmanız gerekiyorsa, yalnızca düzeni düzeltmeniz yeterlidir. Değişiklik, atıfta bulunan tüm bileşenlere otomatik olarak uygulanır.
Blazor düzeni kodla
Blazor düzeni belirli bir bileşen türüdür, bu nedenle Blazor düzeni yazmak, uygulamanızda kullanıcı arabirimini işlemek için diğer bileşenleri yazmaya benzer bir görevdir. Örneğin, @code bloğunu ve birçok yönergeyi aynı şekilde kullanırsınız. Düzenler, uzantılı .razor dosyalarda tanımlanır. Dosya genellikle uygulamanızın içindeki Paylaşılan klasöründe depolanır, ancak dosyayı kullanan bileşenler tarafından erişilebilen herhangi bir konumda depolamayı seçebilirsiniz.
Blazor düzen bileşenlerine özgü iki gereksinim vardır:
-
LayoutComponentBasesınıfını devralmalısınız. -
@Bodyyönergesini referans verdiğiniz bileşenlerin içeriğini görüntülemek istediğiniz konuma eklemeniz gerekir.
@inherits LayoutComponentBase
<header>
<h1>Blazing Pizza</h1>
</header>
<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>
@Body
<footer>
@new MarkdownString(TrademarkMessage)
</footer>
@code {
public string TrademarkMessage { get; set; } = "All content is © Blazing Pizzas 2021";
}
Note
Düzen bileşenleri, istekleri doğrudan işlemediği ve kendileri için bir rota oluşturulmaması gerektiği için @page direktifi içermez. Bunun yerine, başvuran bileşenler @page direktifini kullanır.
Blazor uygulamanızı bir Blazor proje şablonundan oluşturduysanız, uygulamanın varsayılan düzeni Shared/MainLayout.razor bileşenidir.
Blazor bileşeninde layout kullanma
Başka bir bileşenden düzen kullanmak için, uygulanacak düzenin adıyla birlikte @layout yönergesini ekleyin. Bileşen HTML'si, @Body yönergesinin bulunduğu konumda işlenir.
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Bu diyagramda, bir bileşenin ve düzenin son HTML'yi işlemek için nasıl bir araya getirildiği gösterilmektedir:
Bir klasördeki tüm Blazor bileşenlerine şablon uygulamak istiyorsanız, _Imports.razor dosyasını kısayol olarak kullanabilirsiniz. Blazor derleyicisi bu dosyayı bulduğunda, klasördeki tüm bileşenlere yönergelerini otomatik olarak ekler. Bu teknik, yönergesini @layout her bileşene ekleme gereksinimini ortadan kaldırır ve _Imports.razor dosyası ve tüm alt klasörleriyle aynı klasördeki bileşenlere uygulanır.
Important
Projelerinizin kök klasöründeki
Web uygulamanızın tüm klasörlerindeki her bileşene varsayılan bir düzen uygulamak istiyorsanız, bunu 2. ünitede öğrendiğiniz gibi Yönlendirici bileşenini yapılandırdığınız App.razor bileşeninde yapabilirsiniz. etiketinde <RouteView> özniteliğini DefaultLayout kullanın.
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
Kendi @layout yönergesinde veya _Imports.razor dosyasında belirtilen bir düzene sahip bileşenler, bu varsayılan düzen ayarını geçersiz kılar.