Layout Nedir? Section Nedir? Kullanımı – ASP.NET MVC

Layout Nedir ve Nasıl Kullanılır?

İlk web sitesi oluşturulduğundan ve tek bir sayfadan birkaç sayfaya genişletildiğinden beri, sayfaların belirli bölümlerini ortak paylaşımda kullanım ihtiyacı ortaya çıktı. Bunun için kullanım durumları, aynı web sitesine ait
her sayfanın altında aynı altbilgiye sahip olmaktan, çok karmaşık düzenleri, meta verileri ve bir web sayfasının gerçek içeriği etrafındaki diğer her şeyi yeniden kullanmaya kadar uzanır.

Kısacası Layout, bir web sayfasından sık kullanılan merkezi/ortak öğeleri (örneğin navigation menü ve footer bar gibi) tek bir yapıda tanımlamayı ve her yeni sayfa ihtiyacı ortaya çıktığında ortak yapıların tekrar tekrar kodlanmasını önlemek için kullanılan bir yapıdır.

Yukarıda ki örneği incelediğimiz zaman çoğu web sitesinde karşımıza çıkan şablon bulunmaktadır. Bizler her sayfamızda Header, Footer ve Left Navigation alanlarını tekrar tekrar kodlamak istemeyiz. Çünkü genellikle projemizde değişen tek yer Content kısmı olur işte bu yapıp sağlamak için Layout kullanırız.

Çeşitli sunucu tarafı teknolojileri, bu sorunu PHP’nin include() ifadesinden ASP.NET WebForms’un
MasterPages teknolojisine kadar farklı şekillerde çözmüştür. Hepsinin kendi avantajları ve dezavantajları vardır, ancak hepsi aynı sorunu çözer.

ASP.NET MVC’de, genellikle Layout’larla birlikte Sections adı verilen bir şey kullanabilirsiniz. Projenizde bir veya birkaç Section olabilir ve her biri sıfır veya daha fazla Layout içerebilir

MVC Layout Ekleme

Projenize bir Layout eklemek View eklemekle de aynı derecede kolaydır. Ancak önce bilmenizi istediğim birkaç yönerge var:

  • Layout’lar genellikle View’ler klasörünün Shared adlı bir alt klasörüne yerleştirilir. Bu, Layout dosyanızın tam yolunu belirtmezseniz ASP.NET’in otomatik olarak arama yapacağı yerlerden biridir.
  • Layout View’lerinin dosya adının önüne, bunun normal bir View olmadığını belirtmek için genellikle bir alt çizgi eklenir. Yalnızca bir Layout kullanmayı planlıyorsanız, basitçe _Layout.cshtml olarak adlandırılabilirsiniz – aksi takdirde, Düzenin ne için kullanılacağın belirtmek için bir ad kullanın, örn. _AuthenticatedUserLayout.cshtml.

Şimdi bir layout ekleyelim.

Views/Shared klasörüne sağ tıklayalım.

Dialog kutusunda, adı doldurmanız ve partial/layout seçeneklerinin işaretli olmadığından emin olmanız yeterlidir:

Şimdi, temel HTML’den ve üstte boş bir düzen ifadesinden oluşan _Layout.cshtml adlı bir dosya oluşturulacak. Tek yapmanız gereken kendi html yapınızı eklemek ve ardından Layout’dan türetilen sayfalarda yeni içeriğinin oluşturulmasını istediğiniz yerde RenderBody() metodunu aşağıdaki gibi eklemeyi unutmayın:

RenderBody() metodu Layout’dan türetilen viewlerde eklenecek olan kod alanını temsil eder.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>
    <div>Üst Menü</div>

        @RenderBody()

    <div>Alt Menü</div>
</body>
</html>

Artık yeni bir View oluşturmaya çalıştığımız zaman “Use a layout page” sekmesini kullanarak hazırladığımız ortak şablonu kullanabiliriz.

Artık tasarladığınız view sadece RenderBody() metodunun temsil ettiği alanı içerisini yansıtır.

@{
    ViewData["Title"] = "Contact";
    //Kullanılan Layout...
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Contact</h1>
<p>İletişim sayfası...</p>

Section Nedir ve Nasıl Kullanılır?

Layout, ortak içeriği birden çok sayfada yeniden kullanmanıza olanak tanır, ancak bazen gerçek sayfaya bağlı olarak Layout’dan oluşturulan içeriği biraz değiştirmeniz gerekebilir. Kısacası Layout sayfamızda daha fazla esneklik sağlamak veya farklı alanları da duruma göre değiştirmek isteyebiliriz. Ancak bir sayfada yalnızca bir adet RendeBody() metodu kullanabileceğimizi yukarıda belirtmiştik. İşte bu noktada biz section yani RenderSection metodu karşılar.

RenderSection() metodu – RenderBody()’ye çok benzer, çünkü yalnızca belirli bir içerik türünün oluşturulacağı yeri tanımlar. Bu durumda, view’in altına yakın bir yerde “Footer” adlı bir Section oluşturmak istiyoruz. Şimdi pages/view içerisinde Layout’u kullanarak Section tanımlayalım.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>
    <div>Üst Menü</div>

        @RenderBody()

    <div>Alt Menü</div>


    @RenderSection("Footer")

</body>
</html>

RenderSection metot tanımlanırken bizden bir value ister bizde burada sayfamızın alt alanına footer adlı bir section tanımlıyoruz. RenderSection metodun RenderBody() gibi tek kullanımlık bir sınırı yoktur sayfamızda istediğimiz kadar section ekleyebiliriz. Yalnız eklediğimiz her section da Layout page den türettiğimiz sayfada default olarak kullanmak zorundayız.

Şimdi tanımladığımız section’ı Layout’tan türettiğimiz sayfada kullanalım.

{
ViewData["Title"] = "About";
}

<h2>About</h2>
<p>Lots of Layout content goes here...</p>

@section Footer {
 Hello from the About page!
}

Yukarıda ki sayfa örneğimizde kullandığımız etiketler h2 ve p RenderBody() nin içerisinde yer alır. RenderSection’ı ise türettiğimiz sayfada yukarıda ki örnek te olduğu gibi belirtmek zorundayız.

Section Footer bölümü için içerik tanımladığımız orta kısma dikkat edin – sözdizimi oldukça basittir: Razor-@
karakteri, ardından section anahtar sözcüğü ardından tanımlamak istediğimiz Section value değeri ve kıvrımlı
parantezlerin içinde, Section ait içeriğini tanımlayabiliriz.

Yukarıda ki tanımda sizlere bir section eklediğimiz zaman defualt olarak zorunlu bir halde geldiğinden bahsetmiştim. Yani türetilen sınıfta sectionu belirtmezseniz sayfanız hata verecektir. Bunu section’ının required özelliğini kullanarak engelleyebiliriz.

İsteğe Bağlı Section

Varsayılan olarak, tıpkı body gibi tüm section’lar gereklidir. Bu, sayfanız bir veya daha fazla tanımlanmış Section içeren bir Layout kullanıyorsa, page/view bu section’ların tümüne tanımlaması gerektiği anlamına gelir – yoksa bir hata alırsınız. Bu, tüm sayfalarınızın gerekli section’ları uyguladığından emin olmanın harika bir yoludur. Ancak, gerekli bir section tanımlarken çok kolay bir şekilde isteğe bağlı bir section’a dönüştürebilirsiniz:

@RenderSection("Footer", required : false)

RenderSection() metodunu çağırırken ekstra parametreye dikkat edin – bu sadece bu bölümün artık gerekli olmadığını belirtir, yani sayfalarınız bu section’u tanımlayabilir veya tanımlayamaz. Section tanımlı değilse, hiçbir şey oluşturulmaz.

Section’ının Tanımlanıp Tanımlanmadığını Kontrol Etme

Bir Section isteğe bağlı olarak ilan ederken, çağıran page/view’in bu Section’ı tanımlayıp tanımlamadığını bilmek faydalı olabilir. Bu, içeriğin page/view tarafından sağlanmaması durumunda aşağıdaki gibi bazı varsayılan içerik tanımlamanıza olanak tanır.

@RenderSection("Footer", required : false)

@if(!IsSectionDefined("Footer"))
{
 <span>Generic footer message!</span>
}

Yukarıda ki örnekte, Footer Section page/view tarafından tanımlanmadıysa, bunun yerine varsayılan olarak if bloğunun içerisinde kodlar view/page yansıyacaktır.