Ay: Nisan 2021

MVC Proje Kampı || 2

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.

_Deneme isimli oluşturulan layout

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

MVC Proje Kampı || 1

Bu serimizde Murat Yücedağ ile birlikte 3 ay sürecek olan bu MVC projesini geliştirmeye ve öğrendiklerimi aktarmaya çalışacağım. Sonunu güzel bir şekilde getirebileceğim bir proje olması dileğiyle🌸

C# programlama dili altında çalışacağız bu nedenle Visual Basic değil, C# altında bulunan Asp .NET projesini seçiyoruz. Burada Controller dosyalarımız .cs uzantılı olacak. Visual basic ile açsaydık .vb uzantılı olacaktı. Ayrıca .NET Framework ile çalışacağız. .NET Core ile değil.

Boş bir şablon seçince klasör ve çekirdek başvuruları seçilmemiş oluyor.
  • Empty: Boş bir ASP projesi oluşturup bütün yapıyı kendimiz dizayn edebiliriz.
  • Web Forms: Microsoft artık destek vermiyor. Bu nedenle artık çok fazla tercih edilmiyor.
  • MVC: Aktif bir şekilde kullanılmaya devam ediliyor. Yerini her geçen gün .NET Core’a (.NET 5) doğru bırakarak ilerliyor.
Web forms şablonunu seçince klasör ve çekirdek başvuruları kısmında Web Forms seçilmiş oluyor.
MVC şablonunu seçince klasör ve çekirdek başvuruları kısmında MVC seçilmiş oluyor.
Web API şablonunu seçince klasör ve çekirdek başvuruları kısmında MVC ve Web API seçilmiş oluyor.
Tek SAyfalı Uygulama şablonunu seçince klasör ve çekirdek başvuruları kısmında MVC ve Web API seçilmiş oluyor.

Biz ilk aşama olarak MVC yapısını tanımak amacıyla MVC şablonunu seçerek bunun üzerinde ilerleyeceğiz.

Solution Explorer (Çözüm Gezgini) kısmından projemizin katmanlarına ulaşabileceğiz.

MVC şablonu üzerinde bir proje oluşturduk. Bu proje şu an bir katmanlı (katman ismi: MvcProjeKampi). Bu katmanın ismi bazıları tarafından “User Interface (Kullanıcı Ara Yüzü)”, bazıları tarafından ise “Presentation (Sunum)” katmanı olarak adlandırılıyor. Bu katman içerisinde klasörler bulunuyor.

MVC 3 temel yapıya dayanıyor:

  1. Model: Veri tabanına ait, entity adı verilen kavramların tanımlandığı kısım.
  2. View: Tasarım (Front-end) kısmı.
  3. Controller: Back-end (C# kodlama) kısmı.

HomeController içerisinde Index, About ve Contact gibi ActionResult türünde (integer, string, json gibi türler de tanımlanabilir) bazı metodlar bulunuyor.

Metodların içerisinde return View() ile görüntülenmek üzere sayfa döndürülüyor.

Index metodu genellikle listeleme işi için kullanılıyor. Veriler listelenirken Index isimli bir isimle adlandırılıyor.

HomeController içerisinde tanımlanan metodlar varsa bu metodların mutlaka View tarafında karşılığı olmalı.

View > Home içerisinde ifadeler alfabetik olarak sıralanıyor. Bu sayfalar içerisinde HTML (Front-end) tarafı yazılıyor.

Projeyi derleyip istediğimiz tarayıcı üzerinde çalıştırıyoruz.

Projemiz alan adı almadığımız ve sunucu kiralamadığımız için localhost (yerel sunucu) üzerinde yükleniyor. Burada benim için 44370 şeklinde bir port numarası tanımlamış.

Bu çalışan proje içerisinde Application name (Uygulama adı) ve Home (Giriş Sayfası) kısımları aynı linklere gidiyor.

Sayfalar değişse bile sabit kalan bir alan var. Content (içerik) alanı değişken, Layout (eski adıyla Master Page) sabit kalıyor. HTML tarafında burası (üstteki alan) Navbar (Navigation Bar) şeklinde adlandırılıyor. Footer ise altta kalan değişmeyen alandır (2021 – ASP.NET Uygulamam yazan kısım).

Controller kısmında ActionResult türünde Test adında yeni bir metod tanımlayıp içerisinde sayfa döndürüyoruz.

Test metodunun üstüne gelip sağ tıklayarak Add View (Görünüm Ekle) kısmına tıklıyoruz.

Önümüze çıkan pencerede “Use a layout page (Bir düzen sayfası kullan)” seçeneğini işaretleyerek Test ismindeki sayfayı bir layout ile bağlı şekilde çalıştıracağımızı belirtiyoruz.

Layout dosyasını Views > Shared altında Layout.cshtml seçerek ekliyoruz.

Bu işlemin ardından Test sayfamız Views > Home altına eklenmiş oluyor.

Test sayfasını görüntülemek için tarayıcıda açık olan sayfamızı yenilemek yetmez. Controller veya sınıflar (Views) kısmında bir değişiklik gerçekleştirirsek projeyi yeniden. derlememiz gerekir. Derledikten sonra projeyi tarayıcıda görüntülersek (çalıştırırsak) Test sayfası gelmiş olacaktır.

Ders videolarına ulaşmak isterseniz: https://www.youtube.com/watch?v=yFToRUL6h8A