Logo

Asp.Net Mvc Layout Sayfaları - Render Section (Asp.Net Mvc Yazı Dizisi – 5)

Önceki Yazı : Asp.Net Mvc Layout Sayfaları (Asp.Net Mvc Yazı Dizisi – 4)

Merhaba Arkadaşlar,

Önceki yazımızda, Asp.Net Mvc projelerinde ki Layout sistemine kısa bir giriş yapmıştık. Şimdi ise, yine Layout yapısı üzerinde, görüntüleme yapmamıza yarayan Render Section yapılarını inceliyor olacağız.

Bir site tasarladığımızda, banner vb. kısımları belirli sayfalara eklemek istediğimiz de belirli konumlara, pozisyonlara ihtiyacımız olabilir. Layout yapısını kullandığımızda, esneklik imkanına sahip olamamaktayız. Tüm konumlar önceden belirlenmekte ve içerikler doldurulmaktadır. Oysa biz farklı alanlara farklı içerikler eklemek istediğimizde, Render Section ile istediğimiz sayfalarda, istediğimiz kısımlara eklemeler yapabilmekteyiz.

Daha iyi anlamak için, kodlama kısmımıza geçelim;

  • Önceki yazılarımızda oluşturduğumuz IlkMvcProjesi isimli Mvc projemizi açalım.
  • F5 tuşuna basarak projemizi çalıştıralım. Alttaki resimde işaretli olan kısma çeşitli sayfalarda çeşitli veriler eklemek istediğimizi varsayalım.

Ekleme yapılacak kısım

  • Solution Explorer kısmında Views>Shared>Layout.cshtml dosyamızı açalım. Aşağıdaki gibi bir görünümle karşılaşacağız.Asp.Net Mvc'nin sürümüne ya da projeye göre değişiklik gösterebilir.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body><span>Yeni Eklenen İçeriğim</span>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
  • 36. satırın sonuna
@RenderSection("deneme")

kodunu ekleyelim ve dosyayı kaydedelim.

  • F5 tuşuyla projemizi tekrardan çalıştıralım. Evet, Visual Studio üzerinde aşağıdaki hata ekranıyla karşılaşmış olmamız muhtemel;

Render Section bulunamadı hatası

  • Bu hatanın sebebi;
@RenderSection("deneme")

tanımını yaptığımızda varsayılan halinde, tüm sayfalar da deneme Render Section'un içinin doldurulmuş olmasının zorunlu olması. Biz diğer sayfalarda, herhangi bir ekleme yapmadığımız için bu hatayı aldık. Yukarıda ki kod satırını,

@RenderSection("deneme",false)

olarak değiştirip tekrar projeyi çalıştıralım. Evet, şimdi projemiz hatasız olarak çalıştı. Buradaki false, eklediğimiz Section, sayfada eklenmiş olmasa dahi yoksayıp, çalışmaya devam et anlamına geliyor. 

  • Solution Explorer kısmında Views>Home>Index.cshtml dosyamızı açalım. Aşağıdaki gibi bir görünümle karşılaşacağız.Asp.Net Mvc'nin sürümüne ya da projeye göre değişiklik gösterebilir.
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>
  • 4.satıra
@section deneme{
<span>
Deneme Section
</span>
}

kısmını ekleyin. Projeyi yeniden çalıştırın. Görüldüğü gibi sayfanın alt kısmında Deneme Section yazısı görünmekte. About, Contact gibi diğer sayfalara gittiğinizde eklenen yazı çıkmadı.

  • Şimdi de Solution Explorer kısmında Views>Home>About.cshtml dosyamızı açalım. Aşağıdaki gibi bir görünümle karşılaşacağız.Asp.Net Mvc'nin sürümüne ya da projeye göre değişiklik gösterebilir.
@{
    ViewBag.Title = "About";
}

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Use this area to provide additional information.</p>
  • 6. satıra,
@section deneme{
<span>
About Section
</span>
}

kısmını ekleyelim. Projemizi yeniden çalıştıralım. Ana sayfada Deneme Section yazısını, About sayfasında ise About Section yazısını görüyoruz. Buradan da anlaşılabileceği gibi, Layout sayfası her sayfa da aynı şekil de görünürken, Section mimarisinde her sayfada farklı veri gösterebiliyoruz.

Özet olarak, bizlere veri koyabileceğimiz, sabit pozisyonlar tanımlamamıza imkan veriyor. Bir diğer önemli faydası ise, Section'ları eklediğimiz sayfaların Layout sayfası değil neresine Section'u eklersek ekleyelim, yine de Layout'taki konumda görüntülenir. Yani sayfa içerisinde herhangi bir yerde @section {} blogları arasına yazdığımız kodlar, Layout'taki RenderSection komutunun çağrıldığı yerde sayfaya basılır.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde ise Render Page konusunu işleyeceğiz.  Hepinize kolaylıklar diliyorum.