"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net Razor View Engine Nested (iç içe) Layout Page Oluşturma

Asp.Net Razor View Engine ile nested (iç içe) layout page (master page) oluşturma işleminin nasıl yapılacağını öğrenelim.

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.

Asp.Net MVC Layout Ekleme

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.

Asp.NET MVC web page ekleme

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>

Asp.Net MVC Layout and Web Page

Ş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>

Asp.Net MVC Razor View Engine Nested (İç İçe) Layout Page Oluşturma

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.

Razor View Engine Nested (İç İçe) Layout Page Oluşturma

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com

 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.