Asp.Net Mvc Razor View Engine Bölüm 3 (Asp.Net Mvc Yazı Dizisi – 10)

Asp.net mvc Razor view engine

Önceki Yazı : Asp.Net Mvc Razor View Engine Bölüm 2 (Asp.Net Mvc Yazı Dizisi – 9)

Merhaba Arkadaşlar,

Razor yazı dizimize tam gaz devam ediyoruz. Önceki yazılarımızda, Razor'a bakış atıp, genel olarak kavradıktan sonra, yorum satırı nasıl yapılır, değişkenler nasıl kullanılır, @ operatörü nedir ve if, else, switch kontrol yapılarını incelemiştik. Bugün ise döngüler ve dosya yolları nasıl verilir? Bunları inceleyeceğiz.

Önceki yazılarımızda da bahsettiğimiz gibi, C# veya Vb.Net kodlarını Razor üzerinde kullanmaktayız. Aynı kural, döngülerde de geçerli olmaktadır. Hemen bir örnek yapalım;

  • Önceki yazılarımızda kullandığımız projemizi açalım.
  • Solution Explorer>Views>Home>About.cshtml dosyamızı açalım.

For Döngüsü

  • Sayfamızın en altında, dinamik olarak (veri, veritabanından, xml dosyasından vs. gelebilir) bir liste oluşturacağımızı düşünelim. Verileri sıralı şekilde yazdırmak için, bir döngüye ihtiyacımız olacak. Bu döngüyü oluşturmak için, sayfamızın alt kısmına şu kodlarımızı ekleyelim ve daha sonra üzerinde tartışalım.
<h3>Yazılım Dilleri</h3>
<ul>
@{
    string[] dizi = new string[4];
    dizi[0] = "C#";
    dizi[1] = "PHP";
    dizi[2] = "Java";
    dizi[3] = "Phyton";
    for (int i = 0; i < dizi.Length; i++)
    {
     <li>@dizi[i]</li>   
    }

}
</ul>

Kodumuzu ekleyip, projemizi çalıştırdığımızda, aşağıdaki görüntüyü alacağız.

Razor for döngüsü

Şimdi biraz da, ne yaptığımızı inceleyelim. 

 string[] dizi = new string[4];
    dizi[0] = "C#";
    dizi[1] = "PHP";
    dizi[2] = "Java";
    dizi[3] = "Phyton";

Yukarıdaki kısımda, önce 4 elemanlı bir dizi oluşturduk ve içerisini doldurduk. Şu an elimizde bir veri kaynağı var. Bu kaynak veritabanından da geliyor olabilirdi. Biz olayı basitleştirmek adına, string dizisi oluşturmuş olduk. Daha sonra ise;

 for (int i = 0; i < dizi.Length; i++)
    {
     <li>@dizi[i]</li>   
    }

kısmında, döngümüz, dizideki tüm elemanlarımızı, tek tek dönmeye başlıyor. Dikkat edileceği üzere, <li>@dizi[i]</li> kısmında, her bir eleman geldiğinde <li> tagı ile html listesi oluşturuluyor. Bir diğer dikkat edilmesi gereken husus, <li></li> kısmı arasında, dizi[...] değişkenini çağırırken başına @ koyuyor olmamız. Çünkü biz html tagını çağırdığımız an, html kısmına geçmiş oluyoruz. Yeniden sunucu taraflı bir ekleme yapmamız gerektiğinde ise, tekrardan @ kısmını yazıp, Razor View Engine'ye sunucu taraflı kod yazımına geçtiğimizi bildirmemiz gerekiyor. Şimdi aynı döngüleri, foreach ve while ile yapalım;

Foreach Döngüsü

<h3>Yazılım Dilleri</h3>
<ul>
    @{
        string[] dizi = new string[4];
        dizi[0] = "C#";
        dizi[1] = "PHP";
        dizi[2] = "Java";
        dizi[3] = "Phyton";
        foreach (var item in dizi)
        {
            <li>@item</li>
        }
    }
</ul>

Projemizi çalıştırdığımızda bir önceki ile aynı ekranla karşılaştık.

While Döngüsü

<h3>Yazılım Dilleri</h3>
<ul>
    @{
        string[] dizi = new string[4];
        dizi[0] = "C#";
        dizi[1] = "PHP";
        dizi[2] = "Java";
        dizi[3] = "Phyton";
        byte i = 0;
        while (i < dizi.Length)
        {
            <li>@dizi[i]</li>
            i++;
        }
    }
</ul>

Projemizi çalıştırdığımızda, while döngüsü ile de aynı çıktıya ulaşmış olduk.

Dosyaların ve Klasörlerin Yollarına Ulaşmak

Asp.Net Mvc web sitelerimize resim eklediğimizde, yada bir dosyanın konumunu vermek istediğimizde kullandığımız sunucunun yoluna erişmek isteyeceğiz. Çoğu zaman bunun yerine html ile relative (göreceli) yol dediğimiz, bulunduğumu klasörün yolundan yola çıkarak bağlama yapabiliriz. Bunun için örneğin, sitenin ana dizininde bulunan bir resmi /resim.jpg şeklinde çağırdığımızda, direkt olarak sitenin ana dizinindeki resim.jpg dosyasını çağırmış olacağız. Bu dosyanın asıl yolu C:\inetpub\wwwroot\web\site adresi….. gibi olacaktır. (Sunucuya, işletim sistemine vs. değişecektir.)

Peki bize dosyaların gerçek yolu gerektiği zaman ne yapacağız? (bunu kişisel bilgisayarlarımızda ki C:\Windows\.. gibi düşünebiliriz.)

~ Operatörü

– Bir dosya yolunun başına ~ koyduğumuzda ne anlama gelir?

Razor, dosya yolunu okuyacağı zaman ~ işaretini gördüğü an sitenin en başına (kök dizin), ana dizinine gider. Dikkat edilmesi gereken nokta, sitenin sunucusu değişse bile, sitenin sağlıklı bir şekilde çalışmaya devam edeceğidir. Çünkü aslında ~ işareti htmlde bulunan / işareti gibi göreceli olarak ana dizini işaret eder.

Şimdi bir deneme yapalım;

  • Solution Explorer>IlkMvcProjesi (önceki yazılarımızda oluşturduğumuz proje) sağ tıklayalım.
  • Add>Existing Item'e tıklayalım.
  • Bilgisayarımızdan bir resim seçelim ve Add diyelim.
  • Sitemizin ana dizinine resmimiz eklendi.
  • Resim dosyamızın adını kopyalayalım.
  • Bir View sayfası açalım ve içerisine aşağıdaki kodu yazalım.
<img src="~/Chrysanthemum.jpg"/>

Buradaki dosya adını, kendi eklediğiniz dosya adı ile değiştirin. Projemizi çalıştırdığımızda sayfamızda resmin çıktığını görebiliriz.

Resim yolu

Yukarıda yaptığımız işi biraz daha inceleyecek olursak, html <img resim tagını ekledik ve yolunu Razor formatında ~ ile verdik. Böylelikle ana dizinde resmi bulmuş olduk. Razor yerine html formatında, aşağıdaki gibi yapsak da aynı sonucu alırız.

<img src="/Chrysanthemum.jpg"/>

Href Metodu

Href metodu, Razor tabanlı olarak verdiğimiz yolu, htmlye yani tarayıcının anlayacağı formata çevirir.

Bir örnek yapalım,

@{
    string resimYolu = "~/Chrysanthemum.jpg";
    
}
<img src="@Href(resimYolu)"/>

şeklinde kodumuzu View'imize eklediğimizde, @Href() metodu resimYolu değişkenindeki Razor tabanlı yolu html formatına çevirerek, resmin kaynağına gönderir. Html tarafındaki çıktımız ise,

<img src="/Chrysanthemum.jpg"/>

şeklinde olmuştur.

Server.MapPath Metodu

Asp.Net Web Forms mimarisinde de kullanılan Server.MapPath("dosya yolu") metodu, kendisine verilen dosya yolunda ki yolun, sucu tarafındaki tam karşılığını verir. Yani şöyle ki Server.MapPath("/VeriKaynagi.txt") gibi bir tanım geriye, C:\inetpub\wwwroot\site\VeriKaynagi.txt gibi bir yol döndürür. Böylelikle dosyanın sunucuda tam olarak bulunduğu yeri öğrenebiliriz. Bu zaman zaman, veritabanı işlemlerinde, ya da sunucuya dosya yazma, dosya okuma gibi işlemlerde kullanılmaktadır.

Evet arkadaşlar, bir yazımızın daha sonuna gelmiş bulunmaktayız. Razor'un biraz daha derinlerine inme imkanına sahip olduk.

Sonraki derslerimizde Model, View, Controller kısımlarını derinlemesine işleyeceğiz.

Hepinize kolaylıklar diliyorum.