Web Programlama - 3. Sınıf - 3. Ünite Özet

Ders Notları

Layout ve Razor View Engine

Web Programlama 2 - Ünite 3: Sunum Katmanı Mimarisi

Sunum Katmanını Organize Etmek

Bu ünite, web uygulamasının "Sunum Katmanı"nı (Presentation Layer) nasıl organize edeceğimizi ve statik HTML yapılarını dinamik C# kodlarıyla nasıl harmanlayacağımızı öğretir. DRY (Kendini Tekrar Etme) prensibi üzerine kuruludur.

1

Layout (Düzen) Mimarisi

Temel Sorun ve Çözüm

Her sayfada menü ve footer kodlarını tekrar yazmak DRY prensibine aykırıdır. Layout, uygulamanın değişmeyen iskeletidir.

• Konum

  Genellikle Views/Shared/_Layout.cshtml yolunda bulunur.

• @RenderBody()

  Layout içindeki bu metot, "Değişen içeriği (View) tam buraya koy" emridir.

• _ViewStart.cshtml

  Tüm sayfaların varsayılan olarak hangi Layout'u kullanacağını otomatik bildirir.

_Layout.cshtml (Sabit Çerçeve)

Header / Menü (Sabit)

Index.cshtml (Değişen İçerik)

@RenderBody()
(Buraya İletişim, Hakkımızda vs. gelir)

Footer / Alt Bilgi (Sabit)

2

Razor View Engine

HTML ile C# kodunu birleştiren motordur. Geçiş anahtarı @ sembolüdür.

Tek Satır Kod

HTML içinde değişken yazdırma.

<p>Tarih: @DateTime.Now</p>

Kod Bloğu

Çok satırlı C# işlemleri.

@{
  var isim = "Ali";
  var yas = 20;
}

Gizli Yorumlar

Kullanıcıya gönderilmez.

@* Bu yorum tarayıcıda (source code) görünmez *@

3

Koşullu İfadeler (If-Else)

Karar Mekanizması

Standart C# if-else ve switch yapıları kullanılır. HTML çıktısı şarta göre değişir.

Switch: Çok fazla "else if" durumu varsa daha temiz kod için switch tercih edilir.

// Örnek: Not Kontrolü

@if (OgrenciNotu > 50)
{
  <p class="text-green">Geçti</p>
}
else
{
  <p class="text-red">Kaldı</p>
}

4

Döngüler (Loops)

Foreach (En Popüler)

Bir listenin (koleksiyonun) eleman sayısı kadar döner. Hata riski azdır.

For

Döngü sayısı kesin bilindiğinde (indeks tabanlı) kullanılır.

While / Do-While

Koşul doğru olduğu sürece döner. Do-While en az 1 kez çalışır.

Views/Sinif/Liste.cshtml Razor

<ul> <!-- HTML Listesi Başlangıcı -->

    @foreach (var isim in OgrenciListesi)
    {
        // Her isim için bir madde üretilir
        <li>
            @isim
        </li>
    }

</ul>

Çıktı (HTML):

• Ahmet
• Mehmet
• Ayşe

Web Programlama 2 © 2024

Ünite 3: Layout Kavramı ve Razor View Engine - Akademik Ders Notları