Sayfalar

17 Şubat 2013 Pazar

ASP.NET MVC DERSLERİ ( 3.8 ) LAYOUT & VIEWSTART

LAYOUT

Layout sayfaları web sitesinin temel tasarımını bütün sayfalar için korumaya yarar. Web sayfamızda değişmeyen parçalar vardır. Mesela ana menü, site logosu ve ya site hatitasını gösteren alanlar. Tüm bu alanlar bütün sayfalarımız için ortaktır.

Sitemizde değişmeyen alanları bütün sayfalarda tekrar yazmak yerine, bu alanlardan oluşan bir şablon hazırlayıp biz sadece değişen sayfaları hazırlasak daha iyi bir çözüm olur. Bu çözümün MVC Razor için adı Layout sayfalarıdır.

Web Forms mimarisine yakın olanlar MasterPage kavramını bilirler. Layout ile Master page aynı şeydir. Birden fazla değişen alanlar tasarlanabilir.

Örnek bir Layout sayfası kodu aşağıdadır;
<!DOCTYPE html>
<html>
    <head><title>@ViewBag.Title</title></head>
    <body>
        <h1>@ViewBag.Title</h1>
        <div id="main-content">@RenderBody()</div>
    </body>
</html>

@RenderBody() bu şablonu kullanacak olan sayfayı içerir. Şimdide bu şablonu kullanacak olan View sayfamızın kodlarını yazalım;
@{
    Layout = "~/Views/Shared/SiteLayout.cshtml";
    View.Title = "index sayfası!";
}
<p>Burası index sayfası içeriğidir.</p>

Index sayfasının içerisinde Layout sayfasını tanımladık. Bu sayfa artık SiteLayout sayfasını şablon olarak kullanacaktır. Sayfanın HTML çıktısı aşağıdaki gibidir.
<!DOCTYPE html>
<html>
    <head><title>The Index!</title></head>
    <body>
        <h1>index sayfası!</h1>
        <div id="main-content"><p>Burası index sayfası içeriğidir.</p></div>
    </body>
</html>

Bununla birlikte Layout sayfamız birden çok güncellenen alanda içerebilir. Örneğin;
<!DOCTYPE html>
<html>
    <head><title>@ViewBag.Title</title></head>
    <body>
        <h1>@ViewBag.Title</h1>
        <header>@RenderSection("Header")</header>
        <div id="main-content">@RenderBody()</div>
        <footer>@RenderSection("Footer")</footer>
    </body>
</html>

Bu Layout sayfasını kullanan Index sayfamızın güncellenmiş hali;
@{
    Layout = "~/Views/Shared/SiteLayout.cshtml";
    View.Title = "index sayfası!";
}
@section Footer {
    Burası <strong>header</strong>.
}

<p>Burası index sayfası içeriğidir.</p>

@section Footer {
    Burası <strong>footer</strong>.
}

Eğer Layout sayfasında tanımladığımız section alanını View sayfası içerisinde tanımlamazsak, hata alırız bunu engellemek için
<footer>@RenderSection("Footer", required: false)</footer>

şeklinde bir tanımlama yaparsak View sayfasında tanımlamadığımız section alanları için hata almayız. Peki tanımlanmayan section alanları için varsayılan olarak bir HTML yazdırabilir miyiz? Tanımlanmayan section alanları için varsayılan bir HTML yazdırmak için aşağıdaki gibi bir yöntem kullanabiliriz.
<footer>
@if (IsSectionDefined("Footer")) {
    RenderSection("Footer");
}
else {
    <span>varsayılan footer alanı. Eğer bir section alanı tanımlanmamışsa bu alan gösterilir.</span>
}
</footer>

VIEWSTART

Yukarıda yazdığımız Index sayfası kodlarında Layout sayfasını her defasında tanımladık. Birden çok değişen sayfası kullanacağımız zaman her sayfada Layout sayfasını tanımlamak yerine, bir kere tanımlamak daha mantıklıdır.

Uygulama için varsayılan bir Layout sayfası belirleyip, içerik sayfalarında da her defasında Layout sayfasını tanımlamayı engellemek için _ViewStart.cshtml sayfası belirleyip, uygulamanın kullanacağı varsayılan Layout sayfasını belirleyebiliriz. ViewStart sayfasının içeriği;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Views kalsörünün altında böyle bir sayfa belirlersek artık içerik sayfalarında tekrardan Layout sayfasını tanımlamaya gerek kalmaz. Sadece farklı bir Layout sayfası kullanacak olan View sayfalarında bunu tanımlarız.

6 yorum:

  1. teşekkürler..

    YanıtlaSil
  2. saol gardaşş

    YanıtlaSil
  3. gerçekten mvc adına çok yararlı makaleler bulunuyor. Emeğiniz için teşekkürler

    YanıtlaSil
  4. çok işimize yaracak eline emeğine sağlık kardeşim

    YanıtlaSil
  5. hocam merhaba bir sorum olcaktı
    layoutda
    @RenderSection("Footer") tanımladık
    ve index sayfasında da

    @section Footer {
    Burası footer.
    }

    tanımlandı evet güzelce çalışıyor
    ancak bu bir index sayfası değil sadece bir view olsaydı yani actionı olmasaydı,hata alıyorum
    kısaca action olmayan bir view deki section'ı neden çağıramıyorum
    teşekkürler

    YanıtlaSil
    Yanıtlar
    1. action ile alakası yok. Layout u tanımlanmamış sayda section ı nasıl tanısın ki? oluşturdugunuz index sayfası, _Layout.cshtml yi kullandıgından oradaki sectionları tanıyor. Ne yapmak istiyorsunuz, senaryoyu yazarsanız, belki daha net bir çözüm bulunur.

      Sil