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.

14.07.2013

Yazar: Veysel Uğur KIZMAZ (Google+)

Kategori: ASP.NET

4887

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

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Razor View Engine Layout Page Oluşturma

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

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar