reklam

Asp.Net Mvc layout kullanımı

coder
|
18.06.2018
|
95 okunma
|
0 Yorum

Bu dersimizde layout kullanımı ile ilgili bilgiler paylaşacağım. Asp.Net kullananlar Master Page'lerin ne işe yaradığını iyi bilirler. Bir web tasarım hayal edin, üst tarafta banner var ortada içerik var alt tarafta ise footer var. Bu sitenin hangi sayfasına giderseniz gidin üst kısım ve footor kısmı hep aynı kalıyor ama ortada bulunan içerik kısmı değişkenlik gösterebiliyor. O zaman şunu diyebiliriz, üst kısmın ve footer kısmın tasarımı layout sayfada yapılmış ortası ise layouta bağlı bir sayfada yapılmış.

 

Konuyu daha iyi anlamak adına mutlaka bir örnek yapmak zorundayız. Öncelikle yeni boş bir mvc projesi oluşturalım.  Projeyi oluşturduktan sonra Controllers klasörüne sağ tıklayıp Add > Controller  yolunu izleyin. Karşınıza çıkan pencerede MVC 5 Controller - Empty seçin ve Add deyiverin. Karşınıza gelen yeni pencerede Controller'a yeni bir isim vermeniz isteniyor. Controller ismine Home adını verirseniz RouteConfig dosyasında ayar yapmanız gerekmeyecek. HomeController şeklinde olacak. İsmin sonundaki Controller ifadesini silmiyoruz.

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace layaot_kullanımı.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult iletisim()
        {
            return View();
        }
        public ActionResult hakkimizda()
        {
            return View();
        }
    }
}

 

Oluşturduğumuz Home Controller'imizin kaynak kodları yukarıdaki gibi. Index() metodu varsayılan olarak gelir, hakkimizda() ve iletisim() metotlarını ben sonradan ekledim. Sizde bu metodları ekleyebilirsiniz.

Şimdi artık layout sayfamızı oluşturabiliriz. Views klasörüne sağ tıklayın ve Add > View yolunu izleyin. 

 

layout oluşturma

 

Bu sayfanın kendisi bir layout sayfası olacağı için Use a layout page seçeneğini seçmemize gerek yok. Yukarıdaki pencere görünümüne Add derseniz layout.cshtml sayfasını eklemiş olursunuz.

 

Şimdi sıra geldi oluşturduğumuz bu layout sayfasına bağlı olacak sayfaları oluşturmaya. Bunun için Home adında bir Controller oluşturmuştuk. Oluşturduğumuz Home adında Controller'da 3 tane metodumuz vardı. Index metodu, iletisim metodu ve hakkimizda metodu idi. Şimdi bu her metod için bir tane View oluşturacağız ve bu sayfaları layout sayfasına bağlayacağız.

 

Tabi tüm bunları yapmadan önce layout sayfamıza bir tasarım hazırlamamız gerekiyor.

 

 


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Layout Kullanımı</title>
   
</head>
<body>
    <div >
        <div >
            @Html.ActionLink("Anasayfa","Index","Home")
            @Html.ActionLink("İletişim","iletisim","Home")
            @Html.ActionLink("Hakkımızda","hakkimizda","Home")
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
</body>
</html>

 

Layout sayfasının kodlarını yukarıdaki gibi düzenledim. Üç tane link oluşturdum: Anasayfa, İletişim, Hakkımızda. Yukarıda @RenderBody() diye bir kod var. Bu kod ise diğer sayfalardan gelecek olan içeriğin yerini temsil ediyor burada.

 

Şimdi Home adında oluşturduğumuz Controller'ımızı açıyoruz ve ve oluşturduğumuz metodlara örneğin(Index() metoduna) sağ tıklayıp Add View diyoruz. Karşımıza aşağıdaki gibi bir pencere gelir. Anlamamış olabilirsiniz diye bir daha söylim Index() yazısına sağ tıklayın demek istiyorum.

 

Layout Oluşturma

 

Use a layout page seçeneğini seçin ve 3 noktaya tıklayın ve layout.cshtml sayfasını seçin ve ok deyin. Tamam dedikten sonra aşağıdaki gibi kodları olan bir sayfa gelir.

 

 



@{
    ViewBag.Title = "Index";
    Layout = "~/Views/layout.cshtml";
}

<h2>Burası benim anasayfam</h2>



 

İşte burası değişkenlik gösterecek olan sayfadır. Bu Index sayfası layout.cshtml sayfasındaki tasarıma bağlıdır. Ama kendisininde bir tasarımı olabilir. Layout sayfamızda nasıl bir tasarım vardı. Üç tane linkimiz vardı başka da bir şey yoktu. 

 

Aynı işlemi diğer metotlar için yapabilirsiniz sanırım. Diğer metotlar içinde aynı işlemleri yaptıktan sonra projeyi çalıştırıp deneyebilirsiniz. 

Tüm Hakları Saklıdır. © 2018 Geliştirici Mehmet Tanrıverdi & Tasarım Oktay Karakaya