Merhaba arkadaşlar bu makalemde Asp.NET MVC de layout kullanımından bahsedeceğim. Layout Asp.NET deki MasterPage ile aynı mantıktadır. Yani sayfanın kalıp kısımlarını tek bir yerde tutup(header, nav, sidebar, footer) diğer tüm içerik sayfalarının bu kalıbın içerisinde çalışmasını sağlar. Örnek ile anlatacak olursan önce Visual Studio ile yeni bir ASP.NET MVC 4 Web Application oluşturuyoruz. Projemiz oluşturulduktan sonra Solition Explorer’da bir önceki yazımda bahsettiğim klasörlerin oluştuğunu göreceksiniz. Ancak şablonu Empty seçmemizden dolayı sadece MVC nin temel klasörleri gelmiş oldu. Şimdi Controller klasörüne sağ tıklıyoruz ve Add/New Controller’a tıklıyoruz ve adına SharedController verdikten sonra OK’a tıklıyoruz. Sonra açılan controller sayfamda gelen kodlarda ActionResult’ı Index ten _Layout’a çeviriyoruz. Sonra _Layout’un üzerine gelip sağ tık Add View… e tıklıyoruz. Açılan sayfada “Use a layout or master page” seçeneğini kaldırıyoruz çünkü bu sayfamız Layout olacaktır sonrada Add butonuna tıklıyoruz. Solition Explorer’ımıza baktığımız zaman _Layout.cshtml sayfamızın oluştuğunu görüyoruz. Layout sayfamızın kodları aşağıdaki gibi geldi
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
</head>
<body>
<div>
</div>
</body>
</html>
Burada <title > </ title> tagları arasındaki _Layout’u silerek @ViewBag.Title yazıyoruz. Bunun sebebi bu Layout’u kullanan sayfaların title’ın okuyabilmek . Ardından<body> etiketinin içerisindeki <div> taglarını siliyoruz ve @RenderBody() yazıyoruz. Bunun sebebi ise diğer sayfalarımın <body> tagları içerisindeki kısmı @RenderBody() kısmında gösterebilmek. Son olarak da sayfanın en üstünde bulunan aşağıdaki kodu siliyoruz.
@{
Layout = null;
}
Bu işlemlerden sonra Layout sayfamızın son hali aşağıdaki gibi oluyor.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>
Şimdi bu sayfayı Layout olarak kullanacağımız bir sayfa yapalım. Controller’ı sağ tıklayarak Add/New Controller’ı tıklıyoruz ve adına HomeController diyoruz. Sonra controllerımızın içeriğinde bulunan ActitonResult'a sağ tık yapıp Add View... e tıklıyoruz
public ActionResult Index()
{
return View();
}
Bu sefer Use a layout or masterpage kutucuğunu işaretliyoruz ve . . . adlı butona tıklıyoruz. Buradan _Layout.cshtml dosyasını seçiyoruz ve OK’a tıklıyoruz. Son olarak Add View penceremiz aşağıdaki şekle geldi. Burada yaptığımız ana sayfa içeriğinin layout'tan okunmasını sağlamak. Bu şekilde Layout yolunu belirttikten sonra Add'e tıklayın. Views klasörünün içerisine Home adlı bir klasörün eklendiğini ve onun içerisinde de Index.cshtml adlı bir dosyanın olduğunu göreceksiniz. Bu bizim ana sayfamızın içeriğinin olduğu sayfa olacak. İçeriği ise aşağıdaki şekilde gelmelidir.
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
Ben <h2> tagları arasındaki yazıyı sildim ve ekremozer.com yazdım. Sayfanın title’ınıda Ana Sayfa olarak değiştirdim.
@{
ViewBag.Title = "Ana Sayfa";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ekremozer.com</h2>
Projemizi debug ettiğimizde sayfamızın geldiğini göreceksiniz. Layout’un faydasını anlamak adına üst tarafa temsili bir menü koyuyorum ve Layout sayfamızdaki kodlar aşağıdaki gibi oluyor.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div><a href="#">Ana Sayfa</a> | <a href="#">Hakkımda</a> | <a href="#">İletişim</a></div>
@RenderBody()
</body>
</html>
Yukarıdaki kodlarda @RenderBody() kısmı her sayda için değişkenlik gösterirken Layout’a eklediğimiz menü her sayfada sabit kalacaktır. Örnek projeyi indirmek için tıklayın. Bu yazımda kısaca Layout mantığından bahsetmeye çalıştım umarım faydalı olmuştur.