Asp.Net Web Forms View Engine’de kullanılan Master Page’lerin yerini Razor View Engine’de Layout Page’ler bulunuyor. Bu makalede önce Razor View Engine ile layout oluşturma ve kullanımını öğrendikten sonra nested (iç içe) layout page oluşturma işlemini inceleyeceğiz.
Razor View Engine Layout Page Oluşturma
Not: Örneklerimizi Asp.Net Web Site (Razor v2) şablonu üzerinden çalışacağız.
1. Projemize yeni bir Layout ekleyelim. Bu layout ikinci aşamada (nested layout) en dışta yer alacağı için _LayoutDis.cshtml olsun.
2. Şimdi projemizde kullanacağımız stylesheet dosyamızı oluşturalım: style.css
body
{
margin: 0;
font-family:Tahoma;
font-size:13px;
}
.geneldis
{
width: 100%;
height: 400px;
min-height:400px;
}
.genelic
{
width: 1000px;
margin: 0 auto;
height: 400px;
background-color:#F2F2F2;
}
.ustlinkler
{
width:100%;
height:50px;
}
.icerik
{
width: 100%;
min-height: 350px;
}
.default
{
background-color: #60D5AC;
min-height: 350px;
}
.sol
{
width: 200px;
height: 100%;
min-height: 350px;
float: left;
background-color:#5DCFC3;
}
.sag
{
width: 800px;
height: 100%;
min-height: 350px;
float: left;
background-color:#35D59D;
}
3. Layout sayfamızı hazırlayalım. Sayfanın üstünde sitedeki sayfaların linkleri yer alsın. Alt tarafta ise sayfa içeriğini yerleştirelim.
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
@RenderSection("head", required: false)
<link href="~/style.css" rel="stylesheet" />
</head>
<body>
<div class="geneldis">
<div class="genelic">
<div class="ustlinkler">
<a href="~/Default">Anasayfa</a>
<a href="~/Hakkimizda">Hakkımızda</a>
<a href="~/Projeler">Projeler</a>
<a href="~/Referanslar">Referanslar</a>
<a href="~/Iletisim">İletişim</a>
</div>
<div class="icerik">
@RenderBody()
</div>
</div>
</div>
</body>
</html>
Burada en önemli nokta RenderBody metodudr. Bu metodun olduğu nokta, _LayoutDis layout sayfasının altında tanımlanan sayfalarda değişken bölümdür. Onun dışında diğer yerler tüm sayfalarda sabittir. (Master Page’de kullandığımız ContentPlaceHolder gibi düşünebilirsiniz)
4. Projenin anasayfasını (Default.cshtml) ekleyelim.
5. Default.cshtml sayfasının layout page’ini tanımlayalım. Bu işlem için sayfanın başına
@{
Layout = "~/_LayoutDis.cshtml";
}
tanımlamasını yapıyoruz. Body içerisinde anasayfada olduğumuzu belirtmek için “Şu an anasayfadasınız” yazısını yazalım.
@{
Layout = "~/_LayoutDis.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="default">
Şu an anasayfadasınız.
</div>
</body>
</html>
Şu ana kadar Razor View Engine’de Layout Page tanımlama ve WebPage’i Layout Page içerisine yerleştirme işlemlerini öğrendik. Şimdi nested (iç içe) layout page oluşturma işlemini inceleyelim.
Razor View Engine Nested (İç İçe) Layout Page Oluşturma
Referanslar sayfanızda referans isimlerini (linklerini) sayfanın sol tarafına yerleştirip tıklanan referans detayını sayfanın kalan kısmında görüntüleyebilirsiniz. Her referans sayfasında sol bölümü tekrar tekrar eklemek yerine referanslar için özel oluşturacağınız bir layout page ile link ve içerik tanımlarını yapabilirsiniz. Yalnız bu işlemi sayfanın bütünlüğünü bozmamak için daha önce hazırladığınız _LayoutDis sayfasının içinde yapmanız gerekecektir. İşte bu noktada nested (iç içe) layout page kullanmanız gerekecektir.
1. Projeye yeni bir Layout Page ekleyelim: _LayoutReferans.cshtml
2. _LayoutReferans sayfasının içerisinde yer alacağı (_LayuotDis) layoutu
@{
Layout = "~/_LayoutDis.cshtml";
}
ile tanımlayabiliriz.
Sayfayı sol ve sağ olarak iki bölüme ayıralım. Sol bölümün genişliği 200px, sağ bölümün genişliği 800px olsun ve refernas linkleri sol bölümde yer alsın.
@{
Layout = "~/_LayoutDis.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
@RenderSection("head", required: false)
</head>
<body>
<div class="sol">
<a href="~/Referans1">Referans 1</a>
<br />
<a href="~/Referans2">Referans 2</a>
<br />
<a href="~/Referans3">Referans 3</a>
</div>
<div class="sag">
@RenderBody()
</div>
</body>
</html>
3. Linkte tanımladığımız ilk referans sayfasını projeye ekleyelim: Referans1.cshtml
4. Referans1 sayfasının layout’unu _LayoutReferans olarak tanımlayıp body kısmına “Referans 1 sayfası” metnini yazalım.
@{
Layout = "~/_LayoutReferans.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Referans 1 sayfası
</body>
</html>
Referans 1 linkine tıklandığında _LayoutReferans içerisinde Referans1 sayfası açılacaktır.
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com