Asp.Net Mvc – Html Helper'lerin For Takılı Kullanım Örnekleri 1 (Asp.Net Mvc Yazı Dizisi – 18)

Önceki Yazı : Asp.Net Mvc – Web Helper'ler (Asp.Net Mvc Yazı Dizisi – 17)

Merhaba Arkadaşlar,

Önceki yazılarımızda, blog projesinin ana sayfasını bitirmiş, ardından da Html ve Web Helper'larına kısaca değinmiştik.

Bu dersimizde, yeniden blog projemizi inşaa sürecine devam ediyor olacağız.

Tüm makalelerin, tarih sırasına göre düzenleneceği Makale sayfasını hazırlayalım. Ana sayfada kullandığımızdan farklı olarak, bu sefer Html Helper(detaylı bilgi için bakınız)'ları kullanıyor olacağız.

• Öncelikle MvcProjesi isimli projemizi açalım. (Son halini indirmek için tıklayınız.)
• Makale sayfamız için, yeni bir Controller ve Action eklememiz gerekmektedir.
• Controllers>HomeController dosyamızı açalım.
• Dosyamızın sonuna, TumMakaleler adlı bir Action ekleyelim.
• İçeriğini ise aşağıdaki gibi dolduralım.

public ActionResult TumMakaleler()
{
    MvcProjesiContext db = new MvcProjesiContext();

    //Tüm makalelerimizi, tarih sırasına göre, büyükten küçüğe olmak üzere çekiyoruz.
    List<Makale> makaleListe = (from i in db.Makales orderby i.Tarih descending select i).ToList();
    return View(makaleListe);
}

• Görüldüğü üzere, oldukça kolay bir şekilde tüm makalelerimizi liste halinde çekip, View'imize gönderdik.
• Şimdi ise buna uygun View'imizi oluşturmamız gerekmektedir.
• public ActionResult TumMakaleler() satırında TumMakaleler() kısmına sağ tıklayıp, AddView diyelim.
• Çıkan ekranda, içeriği aşağıdaki gibi doldurup, Add tuşuna tıklayalım.

• Sayfamız eklendiğinde, içeriği hazır doldurulmuş olarak geldi. Ancak biz içeriğini kendimiz elle yazmak istiyoruz. Bunun için içeriğini silip, yalnızca ilk satırdaki@model IEnumerable<MvcProjesi.Data.Makale> kısmını koruyalım.

Daha önceki yazılarımızda, döngüleri kullanarak, tüm elemanları saf Html Tag'ları ile doldurmuştuk. Bu sefer ise, Microsoft'un bize sunmuş olduğu Html Helper'ları vasıtası ile doldurma yapacağız.

Önceki derslerimizden birinde incelediğimiz Html Helper'lerinde, bir de genişletilmiş, sonuna For eklenmiş Extension Method'larımız bulunmaktadır. Örnek olarak TextBox Helper'imizin yanında, bir de TextBoxFor şeklinde bir Helper'imiz daha bulunmaktadır.

Html Helper For Extension Metod'ları

View sayfalarımızda, genellikle en üst satırda aldığımız model verisini (@model IEnumerable<MvcProjesi.Data.Makale> gibi), Html Helper'lara bağlarken For takılı metodları kullanırız. Sayfamızı yazarken, bu durumu daha iyi anlıyor olacağız. Projemize devam edelim.

• View sayfamızın içeriğini, aşağıdaki gibi dolduralım.

@model IEnumerable<MvcProjesi.Data.Makale>
<h1>Makalelerimiz</h1>
@{
    //Veri kaynağımız liste olduğu için döngümüzü kuruyoruz.
    foreach (var item in Model)
    {
        <div style="width:100%;margin-top:25px;box-shadow:0 0 5px gray;padding:25px;">
            <!--Başlığı, büyük ve renkli görünsün diye, h3 tagı içerisine aldık-->
            <h3 style="font-weight:bold;color:red">
                @Html.DisplayFor(i => item.Baslik)
            </h3>

            <!--Başlıkla içerik arasına, dikey çizgi ekliyoruz.-->
            <hr />

            @Html.DisplayFor(i => item.Icerik)
            <hr />
            <!--Tarih başlığını, tarih içeriğine bağlamak için Label kullandık.-->
            @Html.Label("Tarih : ")

            @Html.DisplayFor(i => item.Tarih)
            <hr />
            <h4>Makaleyi Yazan</h4>

            <!--Burada bir değişkende, ad ile soyadı birleştirip ekrana bastık.-->
            @{string adSoyad = item.Uye.Ad + " " + item.Uye.Soyad;}
            @Html.Label("Adı ve Soyadı : ")
            @adSoyad
        </div>
    }

}

Burada** ** karakteri, html tarafında boşluk atmaya yarar.

• Şimdi projemizi çalıştırıp, Tüm Makaleler sayfasına geçiş yaptığımızda, aşağıdaki görüntüyü alıyor olacağız.

Şimdi aynı işlemleri hızlı bir şekilde, Yorumlar sayfamız için de uygulayalım.

• Controllers>HomeController dosyamızı açıp, içerisine aşağıdaki Action'unumuzu ekleyelim.

public ActionResult TumYorumlar() { MvcProjesiContext db = new MvcProjesiContext(); List yorumListe = (from i in db.Yorums orderby i.Tarih descending select i).ToList(); return View(yorumListe); }

• Hemen ardından TumYorumlar() 'a sağ tıklayıp, Add View diyelim.
• Çıkan ekranda, ayarları aşağıdaki gibi yapıp, Add tuşuna tıklayalım.

• Açılan View sayfamızın da içeriğini, aşağıdaki gibi dolduralım.

@model IEnumerable<MvcProjesi.Data.Yorum>

@{
ViewBag.Title = "TumYorumlar";
}

<h2>TumYorumlar</h2>

@{
//Veri kaynağımız liste olduğu için döngümüzü kuruyoruz.
foreach (var item in Model)
{
    <div style="width:100%;margin-top:25px;box-shadow:0 0 5px gray;padding:25px;">
    <h4>@Html.Display("Yorumun İçeriği")</h4>
    @Html.DisplayFor(i => item.Icerik)
    <hr />
    @Html.Label("Yorumun Yazıldığı Makalenin Başlığı :")&nbsp;&nbsp;@Html.DisplayFor(i => item.Makale.Baslik)
    <hr />
        @Html.Label("Yorumun Yazan Kişinin Adı ve Soyadı : ")&nbsp;&nbsp;@{string adSoyad = item.Uye.Ad + " " + item.Uye.Soyad;}@adSoyad
        </div>
    }

}

• Projemizi çalıştırıp, Tüm Yorumlar sayfamıza girdiğimizde, aşağıdaki görüntüyü alıyor olacağız.

Makaleler ve Yorumlar sayfamızı da ekledikten sonra, projemizin genel durumuna bir bakmamızda fayda var. Öncelikle listemizi, bir gözden geçirelim.

• Üye girişi sayfası
• Yeni üyelik sayfası
• Kullanıcının kendi bilgilerini değiştirebileceği sayfa
• Son 5 makalenin ana sayfada listelenmesi (yapıldı)
• Tüm makalelerin listelendiği sayfa (yapıldı)
• Son 5 yorumun ana sayfada listelenmesi (yapıldı)
• Tüm yorumların listelendiği sayfa (yapıldı)
• En çok kullanılan 10 etiketin ana sayfada listelenmesi (yapıldı)
• Etikete tıklandığında, o etiketi barındıran makalelerin listelenmesi
• Makale sayfalarında, yorumların görünmesi
• Makale sayfalarında, etiketlerin görünmesi

Evet, sonuç olarak projemizde oluşturduğumuz listenin, 5 maddesini bitirmiş durumdayız. Sonraki derslerimizde, diğer maddelere devam ediyor olacağız.

Projenin son halini buradan indirebilirsiniz.

Hepinize kolaylıklar diliyorum.