Bu kısımda View, Controller ve Layout kavramlarını öğreneceğiz.
Kendimiz layout ve Controller oluşturacağız. Controller içerisinde oluşturacağımız metod için bir View oluşturacağız.
Her bir menü alanı Controller olarak tutulacak. Bu kamp projesinden örnek verirsek ekşi sözlük tarzı bir web projesi geliştirleceği için başlıklar, kullanıcılar, yazılar, admin vb. birer Controller olacak.
Controller üzerinde sağ tıklayıp Add (Ekle) > Controller(Denetleyici) ile boş bir Controller (MVC 5 Controller – Empty) ekliyoruz.
İsmini TestController yapıyoruz.
Burada Index ActionResult’ı hazır olarak geliyor. Bunu bir View oluşturmak için kullanacağız.
Bunlardan önce bir layout oluşturacağız. Layout, web sitelerinde sayfalar değişse bile sabit kalan alanlardır. View içerisindeki Shared isimli klasörün içinde layout’u tanımlıyoruz.
Shared üzerinde sağ tıklayıp Add (Ekle) > View (Görünüm) ile View ekleyip “Use a layout page (Bir düzen sayfası kullanın)” seçeneğini işaretlemezsek bu View’ın (Görünüm’ün) kendisi bir layout haline gelecektir.
- Proje bu adımda View üzerinden çalıştırılamaz. Projenin buradan çalıştırılabilmesi için bu sayfanın bir Controller’ı olması gerekiyor.
TestController içerisindeki Index üxerine sağ tıklayıp Add View ile Index isimli bir View oluşturuyoruz. Bu View, Shared klasörü içindeki _Deneme isimli layout’u kullanacak şekilde işaretliyoruz.
Views > Test altında Index.cshtml oluşuyor.
Sayfalar yüklenirken sayfaların layout’un içerisinde nereye yükleneceğini belirtmezsek hata alırız.
Örenğin Index isimli sayfamızı tarayıcıda çalıştırırsak _Deneme isimli layout sayfası için RenderBody isimli metodun çağrılmadığı hatasıyla karşılaşırız.
Sayfaların yerini layout’da gösterirken bunu Render metodu ile yapacağız. Bunun için de Razor Syntax’ını kullanacağız. Razor Syntax, HTML tarafında C# komutlarını kullanmamızı sağlayacak. Bunu yapmak için C# kodlarının başına @ sembolünü ekliyoruz.
Bu değişiklikleri yaptıktan sonra sayfayı yenilememiz yeterli olacaktır.Projeyi yeniden derlemeye gerek yoktur. Bunun sebebi yapılan değişikliklerin Front-end tarafında olmasıdır.
Layout içerisinde oluşturduğumuz div içerisinde sayfaımızda görünecek olan layout kısmını da tanımlayabiliriz.
Değişiklikleri görüntülerken bu değişiklikler View kısmında olduğu için derleme yapmadan sayfayı kaydederek tarayıcıda yenilememiz yeterli olacaktır.
Şimdi 2. bir sayfa oluşturacağız.
TestController’da Test2 adlı bir ActionResult metodu oluşturuyoruz.
Üzerine sağ tıklayıp View oluşturuyoruz ve bu View’ı _Deneme isimli layout’a bağlıyoruz.
Derleyip tarayıcıda çalıştırıyoruz. Derleme sebebimiz Controller tarafında değişiklikler yapmış olmamız.
Test içerisinde hangi sayfayı görüntülemek istediğimizi arama kısmından değiştirebiliriz.
Sayfanın daha önce _Deneme olan başlığını (title’ını) layout içerisinden değiştirebiliriz.
Ders videolarına ulaşmak isterseniz: https://www.youtube.com/watch?v=VnfpRjs7j7E
Rumeysa❀ 