01.02. Razor Pages: Layout

Tutarlı bir düzen (Layout) sayesinde bir web sitesi yaratmak kolaylaşır. Her web sayfasında kullanılacak blokları (header ve footer gibi)farklı dosyalarda saklayabilir ve bu dosyaları bir web sayfasında kullanabilirsiniz. PHP’de include ve require kullanarak bunu nasıl yapabileceğimizi görmüştük. Bu bölümde layout işlemlerini Razor Pages’ta nasıl yapabileceğimizi göreceğiz.
Öncelikle tutarlı kelimesini açarak başlayalım.

Tüm web sayfalarının aynı header (sayfanın üst bölümü) olması
Tüm sayfaların aynı footer (sayfanın alt bölümü) olması
Hatta aynı menülere sahip olması
Her sayfanın aynı style ve layout’lara sahip olması

Layout düzeni iki şekilde yapılır.

Content Block
Layout Page

01.02.01. Content Block: RenderPartial

İçerik bloğu (başka sayfadan) bir web sayfasında her hangi bir yerleştirilebilir ve sanki mevcut sayfa içindeymiş gibi metin, etiket ve kodlama içerebilir. Aynı header ve footer’ları kullanmak size çok zaman kazandıracaktır. Aynı içerikleri tüm sayfalara yazmak yerine sadece bir içeriği değiştirerek tüm sayfalarınızdaki header ve footer gibi kısımları güncellenebilir.

Öncelikle bir header ve bir de footer hazırlayalım. Bu dosyalarımızı Shared klasörünü ekliyoruz. Başına “_” ekleyerek iki dosya oluşturalım.

_header.cshtml

<h1>Burası header, resim, başlık, slogan vs.</h1>

1	<h1>Burası header, resim, başlık, slogan vs.</h1>

_footer.cshtml

<p>Burası footer, copyright, güncelleme tarihi, açıklamalar, vs.</p>

1	<p>Burası footer, copyright, güncelleme tarihi, açıklamalar, vs.</p>

“_” sayesinde dışarıdan bu dosyalara ulaşılması engellenmiş olur. Örneğin, https://localhost:5001/_header veya https://localhost:5001/shared/_header gibi bir erişim mümkün değildir. Şimdi istediğimiz bir sayfadan bu dosyaları çağıralım.

@page
@{
    Layout = "";    
}

@{ Html.RenderPartial("_header"); }

<p>İçerik burada olacak</p>

@{ Html.RenderPartial("_footer"); }

@page

Layout = "";

}

@{ Html.RenderPartial("_header"); }

<p>İçerik burada olacak</p>

@{ Html.RenderPartial("_footer"); }

Öncelikle mevcut Layout’ı temizledik. Boş layout yaptık. Sonra Html.RenderPartial kullanarak istediğimiz sayfaları ekledik. Burada .cshtml uzantısını kullanılmaz, direkt dosya ismi yazılır. Çıktı:

<h1>Burası header, resim, başlık, slogan vs.</h1>
<p>İçerik burada olacak</p>

<p>Burası footer, copyright, güncelleme tarihi, açıklamalar, vs.</p>

<h1>Burası header, resim, başlık, slogan vs.</h1>

<p>İçerik burada olacak</p>

<p>Burası footer, copyright, güncelleme tarihi, açıklamalar, vs.</p>

Aslında PHP’de çok benzer bir yaklaşım kullanmıştık. Razor Pages, farklı ve sıklıkla kullanılan diğer bir yaklaşım vardır.

01.02.02. Layout Page: RenderBody()

RenderPartial() sayesinde aynı içerikleri farklı web sayfalarında gösterebildiğinizi gördük. Tutarlı bir görünüm elde etmek için kullanılan bir diğer yaklaşım Layout Page kullanmaktır. Bir Layout Page’i bir yapı içerir, ama içerik içermez. Bir web sayfası layoutpage’e bağlandığı zaman, layoutpage’e göre düzenlenir. Layout Page içinde @RenderBody() metodu kullandığı yere içerik sayfası yerleşir. Her içerik sayfasında Layout olarak kullanılacak sayfa belirtilmelidir.

Öncelikle _mylayout.cshtml shared klasörüne yaratalım.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Örnek</title>
</head>
<body>
    <header>
        <h1>Site başlığı</h1>
    </header>
    <div>
        <main>
            @RenderBody()
        </main>
    </div>

    <footer>
        <div class="container">
            &copy; 2018 - RazorPages
        </div>
    </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Örnek</title>

</head>

<body>

<h1>Site başlığı</h1>

</header>

<div>

<main>

@RenderBody()

</main>

</div>

</div>

</footer>

</body>

</html>

Biraz ayrıntılı bir dosya oldu. HTML5 etiketleri kullandık. Ancak, hala çok eksik, css, javascript bağlantıları bu bölümde yapılmalıdır. Şimdi klasik bir razor dosyasından bu içeriği çağıralım.

@page
@{
    Layout = "_mylayout";    
}

<p>Bu örnekte layout içeriği bir dosyadan alınıyor. 
Buraya yazılanlar RenderBody() bölümüne gönderiliyor.</p>

@page

Layout = "_mylayout";

}

<p>Bu örnekte layout içeriği bir dosyadan alınıyor.

Buraya yazılanlar RenderBody() bölümüne gönderiliyor.</p>

RenderPage()’e göre farklı kullanımı vardır. Çalışma mantığı açısından birbirilerine zıt kullanımlardır. Tasarım bir Layout kullanılır ve içerik sayfasının Layout içinde gösterileceği kısım için RenderBody() metodu çağrılır. Örnekte _mylayout.cshtml yaratılmıştır. Layout etiketi bu değer sayfa başında gönderilmiştir. Eğer Layout ataması yapılmaz ise _ViewStart.cshtml dosyasındaki Layout tanımı devreye girer. Genelde “_Layout” değerine sahiptir, yani _Layout.cshtml dosyası iaşret eder. Eğer bu dosya yoksa çıktı aynen üretilir.

Layout tasarımının en güzel tarafı CSS (Bootstrap), Javascript gibi eklentileri direkt bir sayfaya yaptığınızda tüm sayfalara uygulanmasıdır. Burada mantık, programlamada karşımıza çıkan: Don’t Repeat Yourself (DRY) felsefisidir. Eğer web sayfanızda bazı bölümleri çok sık şekilde tekrar ediyorsanız bir sorun vardır. Özellikle bu bölümler oluşturulurken çok sayıda kopyala-yapıştır yapılıyorsa ekstra bir çözüm düşünmenin zamanı gelmiş demektir. Bu bölümler ileride bir değişikliğe uğradığında gidip tüm sayfaları bulup değiştirmek büyük bir hamallıktır. Özellikle Layout Page türünden kullanım ile tasarımını daha hızlı şekilde yapmak mümkündür.