Logo

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

Önceki Yazı : İlk Asp.Net Mvc Projesinin Oluşturulması (Asp.Net Mvc Yazı Dizisi – 3)

Merhaba Arkadaşlar,

Önceki yazımızda ilk Mvc projemizi oluşturmuş ve klasör yapılarını incelemiştik. Şimdi ise Mvc siteleri hazırlarken kullanabileceğimiz, tasarım ve yerleşim düzenlerini inceleyeceğiz.

Öncelikle önceki yazımızda bahsettiğimiz şekilde yeni bir Mvc projesi açıyoruz. Projemizi açtıktan sonra,

  • Solution Explorer kısmı altından Controllers klasörünü bulup sağ tıklayarak Add>Controller yolunu takip ediyoruz.

Yeni Controller Ekleme

  • Ardından açılan ekranda biraz farklılıkla karşılaşıyoruz. Bu ekran Mvc 5 sürümü ile birlikte gelmiş bulunmaktadır. Buradaki detaylara ayrıca Controller konusunu incelediğimiz zaman değiniyor olacağız. Biz şimdilik MVC 5 Controller - Empty seçip Add tuşuna tıklıyoruz.

Controller Seçim Ekranı

  • Bizden Controller ismi isteyen bir kutucuk açılıyor. Bu kutucuğa da DenemeController yazarak Add tuşuna tıklıyoruz.

Controller isimlendirme ekranı

  • Yaptığımız işlemler neticesinde yeni Controller'imiz projemize eklenmiş oldu. Solution Explorer kısmında Controllers klasörü altında DenemeController dosyamız görünmektedir.

Controller eklendi

  • Controller'imizi ekledikten sonra Controller'de işlenen verileri görüntüleyecek olan View'imizi eklememiz gerekmektedir. Bunun için public ActionResult Index kod satırında ki Index'in bu kısım farklı adlar alabilir, ileri ki derslerde anlatılacaktır üzerine fare ile sağ tıkladığımızda açılan menüden Add View'i tıklıyoruz.

View ekleme

  • Hiçbir veriyi değiştirmeden Add tuşuna tıklıyoruz.

View adı

  • View dosyamız da projemize eklenmiş bulunuyor. Solution Explorer üzerinden Views>Deneme burada Controller'in adı yazacaktır > Index burada da View'imizin adı yazacaktır dosyamız görünmektedir.

View sayfsı

  • Views>Shared klasörümüzün içindeki dosyalar, tüm sayfalarda ya da bazı sayfalarda görünecek ortak Layout içeriklerdir. Asp.Net Web Forms'da bulunan Master Page ile aynı işi yapmaktadır. Şimdi F5 tuşuna basarak projemizi çalıştıralım.

Layout alanı

Yukarıdaki sayfa açıldı. Sayfada, bordo renkle işaretli alana dikkat edelim. Bu alan menü vb. öğeleri kapsayan alan. Bu alanı muhtemelen tüm sayfalarda kullanacağız. Peki bu kısmı, her sayfada tek tek yeniden yazmak ne kadar mantıklı? Elbette ki mantıklı değil, işte bu noktada devreye Layout sistemi giriyor. 

Layout : Sitenin temelini teşkil eden sayfadır. Bu sayfada ki veriler, bu sayfayı baz alan tüm sayfalar da otomatikman yüklenecektir. Böylelikle menü, alt bilgi vb. bilgiler değiştiğinde her sayfada bu işlemi tek tek yapmak zorunda kalmayacağız.

Şimdi Solution Explorer kısmında Views>Shared>Layout.cshtml do​syasını açalım. 

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

Kodlarımız yukarıdaki gibi geldi. Mvc'nin ya da Visual Studio'nun sürümüne göre değişiklikler olabilir. Şimdi 11.satırda bulunan,

<body>

içeriğinin sonuna,

<span>Yeni Eklenen İçeriğim</span>

içeriğini ekleyelim. Ardından projeyi yeniden F5 ile çalıştıralım. 

Layout değişiklik

Görüldüğü gibi yeni yapılan değişiklik sayfamıza yansıdı. Şimdi menüden diğer sayfaları ziyaret edin. Göreceğiniz gibi tüm sayfalarda değişiklik uygulanmış oldu. Böylelikle tek seferde ortak içeriği rahatlıkla değiştirebildik.

Bir sonraki dersimizde Render Section, Render Page ve Partial View konularını işliyor olacağız.

Hepinize kolaylıklar diliyorum.