ASP.NET MVC’de yeniden kullanılabilir arayüzler: Layout ve partial view rehberi
Modern web uygulamaları geliştirirken kod tekrarını önlemek ve sürdürülebilir bir yapı kurmak en temel hedeflerden biridir. ASP.NET MVC, bu hedeflere ulaşmak için güçlü araçlar sunar. Bu araçların başında, tüm sayfalarda tutarlı bir görünüm sağlayan Layout sayfaları ve kullanıcı arayüzünün küçük, yeniden kullanılabilir parçalarını oluşturan Partial View‘lar gelir. Bu rehberde, bir web sitesinin iskeletini oluşturan Layout sayfalarının nasıl tasarlandığını ve @RenderBody() metodunun bu yapıdaki rolünü inceleyeceğiz. Ardından, Partial View’ların ne olduğunu, nasıl oluşturulduğunu ve @Html.Partial() ile @Html.RenderPartial() arasındaki temel farkları derinlemesine ele alacağız. Son olarak, bu bileşenleri etkili bir şekilde kullanarak modüler ve bakımı kolay uygulamalar geliştirmenin prensiplerini öğreneceğiz.
Layout sayfaları ile tutarlı bir site yapısı oluşturma
Bir web sitesindeki çoğu sayfa, başlık (header), menü (navigation), alt bilgi (footer) gibi ortak bileşenleri paylaşır. Her sayfada bu HTML kodlarını tekrar tekrar yazmak hem zahmetli hem de hataya açıktır. Layout sayfaları, bu sorunu çözmek için tasarlanmış ana şablonlardır. Genellikle _Layout.cshtml adıyla ve /Views/Shared/ klasöründe bulunurlar, böylece projedeki tüm view’lar tarafından erişilebilirler. Bu şablon, sitenin temel HTML yapısını, CSS ve JavaScript dosyalarına referansları ve ortak arayüz elemanlarını içerir.
Layout sayfasının en kritik parçası @RenderBody() metodudur. Bu metot, Layout’u kullanan belirli bir view’ın (örneğin Index.cshtml veya Contact.cshtml) içeriğinin nereye yerleştirileceğini belirten bir yer tutucudur. Bir view işlendiğinde, içeriği @RenderBody()‘nin bulunduğu yere enjekte edilir ve sonuç olarak tam bir HTML sayfası oluşturulur. Bir Layout sayfasında @RenderBody() yalnızca bir kez kullanılabilir ve kullanılması zorunludur. Bir view’ın bu Layout’u kullanacağını belirtmek için, view dosyasının en başına aşağıdaki kod eklenir:
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Bu yapı sayesinde, menüde bir değişiklik yapmak istediğinizde sadece _Layout.cshtml dosyasını düzenlemeniz yeterli olur ve bu değişiklik tüm sayfalara otomatik olarak yansır.
Partial view’lar ile yeniden kullanılabilir bileşenler
Layout, sayfanın genel iskeletini oluştururken, Partial View’lar ise sayfa içindeki daha küçük ve yeniden kullanılabilir bileşenleri temsil eder. Bir ürün kartı, kullanıcı yorumu bölümü, anket formu veya kenar çubuğundaki popüler yazılar listesi gibi elemanlar Partial View için mükemmel adaylardır. Bu bileşenleri ayrı dosyalara ayırmak, ana view’ların daha temiz ve okunabilir kalmasını sağlar. Ayrıca, aynı bileşeni farklı sayfalarda veya bir sayfa içinde birden çok kez kullanmanıza olanak tanıyarak DRY (Don’t Repeat Yourself – Kendini Tekrar Etme) prensibini uygulamanızı kolaylaştırır.
Partial View’lar genellikle kendilerine ait bir model ile çalışırlar. Örneğin, bir ürün kartını gösteren _ProductCard.cshtml adlı bir Partial View, model olarak bir Product nesnesi alabilir. Bu, bileşenin bağımsız ve taşınabilir olmasını sağlar. Ana view’dan bu Partial View’ı çağırırken, ilgili Product nesnesini parametre olarak geçersiniz. İsimlendirme standardı olarak, Partial View dosyalarının adının alt çizgi (_) ile başlaması, bu dosyaların doğrudan tarayıcı tarafından çağrılmaması gereken parçalar olduğunu belirtir.
Partial view’ları çağırma yöntemleri: @Html.Partial() ve @Html.RenderPartial()
Bir ana view içerisinden Partial View çağırmak için iki temel yardımcı metot (helper method) bulunur. İkisi de aynı işi yapsa da aralarında önemli performans ve kullanım farkları vardır.
@Html.Partial(): Bu metot, belirtilen Partial View’ı işler ve sonucunu bir MvcHtmlString nesnesi olarak döndürür. Yani, HTML çıktısı bir string olarak oluşturulur ve ardından ana view’ın response akışına yazılır. Bir değişkene atanabilme esnekliği sunar, ancak bu genellikle nadiren ihtiyaç duyulan bir senaryodur.
- Kullanımı:
@Html.Partial("_ProductCard", productModel)
@Html.RenderPartial(): Bu metot ise geriye bir değer döndürmez (void). Bunun yerine, Partial View’ın HTML çıktısını doğrudan mevcut response akışına yazar. Arada bir string nesnesi oluşturma adımını atladığı için, teorik olarak @Html.Partial()‘a göre daha performanslıdır, özellikle çok sayıda Partial View’ın render edildiği döngülerde bu fark belirginleşebilir.
- Kullanımı:
@{ Html.RenderPartial("_ProductCard", productModel); }(Süslü parantezler ve noktalı virgül gerektirir çünkü geriye değer döndürmeyen bir metottur.)
Aşağıdaki tablo bu iki metot arasındaki temel farkları özetlemektedir:
| Özellik | @Html.Partial() | @Html.RenderPartial() |
|---|---|---|
| Geri dönüş değeri | MvcHtmlString (HTML çıktısını string olarak döndürür) | void (Doğrudan response’a yazar) |
| Performans | Biraz daha yavaş olabilir çünkü önce string oluşturur. | Daha hızlıdır çünkü doğrudan response akışına yazar. |
| Sözdizimi | @Html.Partial(...) | @{ Html.RenderPartial(...); } |
| Genel tercih | HTML çıktısını bir değişkende manipüle etmek gerekmediği sürece daha az tercih edilir. | Genellikle performans avantajı nedeniyle varsayılan tercih olarak kabul edilir. |
Etkili yeniden kullanılabilir bileşenler oluşturma prensipleri
Sadece Partial View oluşturmak yeterli değildir; bu bileşenleri etkili ve sürdürülebilir kılmak için bazı prensiplere uymak gerekir.
1. Tek sorumluluk: Her Partial View, tek bir işlevi yerine getirmelidir. Örneğin, bir _ProductCard.cshtml sadece ürün bilgilerini göstermeye odaklanmalıdır. İçine “sepete ekle” mantığının yanı sıra “ilgili ürünler” listesini de eklemek, bileşenin yeniden kullanılabilirliğini azaltır. Her bir işlev için ayrı Partial View’lar oluşturmak daha iyi bir yaklaşımdır.
2. Bağımsızlık: Bir Partial View, içinde bulunduğu ana view hakkında bilgi sahibi olmamalıdır. İhtiyaç duyduğu tüm veriyi, kendisine parametre olarak geçirilen strongly-typed bir model üzerinden almalıdır. ViewBag veya ViewData gibi dinamik veri taşıma mekanizmalarından kaçınmak, bileşenin hangi veriye ihtiyaç duyduğunu netleştirir ve onu daha taşınabilir hale getirir.
3. İsimlendirme ve konumlandırma: Yeniden kullanılabilir bileşenleri projenin her yerinden erişilebilir olması için /Views/Shared/ klasöründe saklamak yaygın bir pratiktir. Dosya adlarına alt çizgi (_) ile başlamak, bunların tam bir sayfa olmadığını belirten bir standarttır ve kodun okunabilirliğini artırır.
Sonuç olarak, ASP.NET MVC’deki Layout ve Partial View mekanizmaları, modern web geliştirmenin temel taşları olan modülerlik ve kod tekrarını önleme ilkelerini hayata geçirir. Bu rehberde, _Layout.cshtml ile site genelinde tutarlı bir şablon oluşturmayı ve @RenderBody() kullanarak dinamik içeriği bu şablona nasıl yerleştireceğimizi öğrendik. Ardından, arayüzü küçük ve yönetilebilir parçalara ayırmamızı sağlayan Partial View’ların gücünü keşfettik. @Html.Partial() ve @Html.RenderPartial() arasındaki teknik farkları ve performans etkilerini inceleyerek hangi durumda hangisinin tercih edilmesi gerektiğini anladık. En önemlisi, tek sorumluluk ve bağımsızlık gibi prensipleri benimseyerek sadece çalışan değil, aynı zamanda bakımı kolay, ölçeklenebilir ve esnek bileşenler oluşturmanın yollarını gördük. Bu araçları doğru kullandığınızda, daha temiz ve verimli uygulamalar geliştirebilirsiniz.
Resim Sahibi: RealToughCandy.com
https://www.pexels.com/@realtoughcandy