MVC Layout Sayfası
Layout
Layout Oluşturma
Bunun için Views > Shared klasöründe _Layout.cshtml isminde bir layout sayfası oluşturuyoruz.
Burda iki metod dikkatimizi çekiyor. Bunlar RenderBody() ve RenderSection()
RenderBody()
Layout sayfamızı kullanacak olan View sayfalarının içeriklerinin gösterileceği yer olarak tanımlayabiliriz.
HomeController adında bir controller oluşturalım ve Mvc nin doğası gereği, Index View sayfasının açılması için gerekli olan kodu yazalım.
Şimdide Index View sayfamızı oluşturalım. Oluşturduktan sonra otomatik olarak aşağıdaki kodlar oluşmaktadır.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Başka bir Layout sayfasında Index sayfamızı göstermek istiyorsak yukarıdakine benzer kodu Index sayfamızın Layout = null olarak tanımlanan yerine yazmamız gerekir.
RenderSection()
Layout sayfamızı bölümlemek için kullanılır. Oluşturduğumuz _Layout.cshtml sayfamızda aşağıdaki gibi bir RenderSection metodu kullanalım. Burada div taglarının içerisinde pozisyon sağ taraf olarak ayarlayıp içine RenderSection komutunu yazdık. Bundan sonra bu komutu kullanacak olan Viewler sağ taraftaki bölümde gözükecektir.
Daha önceden Asp Web form uygulamalarında kullanığımız .aspx uzantılı dosyalarımızın tasarımını kolayalaştırmak için kullandığımız Master Page lerin yerini Mvc Razor View Engine yerini Layout sayfalar almakta. Layout kod yazmak daha kolay ve esnektir.
Layout Oluşturma
Bunun için Views > Shared klasöründe _Layout.cshtml isminde bir layout sayfası oluşturuyoruz.
Oluşan _Layout.cshtml sayfası aşağıdaki gibidir.
Burda iki metod dikkatimizi çekiyor. Bunlar RenderBody() ve RenderSection()
RenderBody()
Layout sayfamızı kullanacak olan View sayfalarının içeriklerinin gösterileceği yer olarak tanımlayabiliriz.
HomeController adında bir controller oluşturalım ve Mvc nin doğası gereği, Index View sayfasının açılması için gerekli olan kodu yazalım.
Şimdide Index View sayfamızı oluşturalım. Oluşturduktan sonra otomatik olarak aşağıdaki kodlar oluşmaktadır.
Burada Layout = null olarak yazdığını görüyoruz. Bunun anlamı herhangi bir Layout sayfası atanmamış olmasıdır. Eğer biz @{ Layout = null;} kodlarını silersek _ViewStart.cshtml sayfasında bulunan aşağıdaki kod otomatik olarak çağrılır.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Başka bir Layout sayfasında Index sayfamızı göstermek istiyorsak yukarıdakine benzer kodu Index sayfamızın Layout = null olarak tanımlanan yerine yazmamız gerekir.
RenderSection()
Layout sayfamızı bölümlemek için kullanılır. Oluşturduğumuz _Layout.cshtml sayfamızda aşağıdaki gibi bir RenderSection metodu kullanalım. Burada div taglarının içerisinde pozisyon sağ taraf olarak ayarlayıp içine RenderSection komutunu yazdık. Bundan sonra bu komutu kullanacak olan Viewler sağ taraftaki bölümde gözükecektir.
Şimdide Layout sayfasında oluşturduğumuz RenderSection metodunu Index sayfasında kullanalım.
Ekran çıktısı
Yorumlar
Yorum Gönder