Asp.Net Mvc – Html Helper'lerin For Takılı Kullanım Örnekleri 2 (Asp.Net Mvc Yazı Dizisi – 19)
Önceki Yazı : Asp.Net Mvc – Html Helper'lerin For Takılı Kullanım Örnekleri 1 (Asp.Net Mvc Yazı Dizisi – 18)
Merhaba Arkadaşlar,
Aktif şekilde geliştirmekte olduğumuz projemizde, bugünkü dersimizde uygulayacağımız işlemleri, şöyle sıralayabiliriz;
- Ana sayfadaki etiketlerden birine tıklandığında, o etiketi barındıran makalelerin listelenmesini sağlayacağız.
- Ana sayfada görüntülenen, son eklenen makaleler kısmındaki başlıklara tıklandığında makalemizin tam halinin görüntüleneceği sayfayı oluşturacağız.
- Son eklenen yorumlar kısmındaki, yorumlardan birinin başlığına tıklanınca ona ait olan makalenin açılmasını sağlayacağız.
1. Maddemiz ile Başlayalım
- Öncelikle, geliştirmekte olduğumuz projemizi açalım. (Projenin son halini indirmek için tıklayınız.)
- Controllers>Home Controller.cs dosyamızı açalım.
- Dosyamıza aşağıdaki kodlarımızı ekleyelim.
public ActionResult EtiketinMakaleleri(int etiketId)
{
MvcProjesiContext db = new MvcProjesiContext();
var geciciListe = (from i in db.Etikets where i.EtiketId == etiketId select i.Makales).ToList();
//Burada veri içiçe liste halinde geldiği için, içerideki listeyi [0] indexi ile alıp gönderiyoruz.
return View(geciciListe[0]);
}
- Kodlarımızı ekledikten sonra,
ActionResult EtiketinMakaleleri(int etiketId)kısmına sağ tıklayıp, Add View diyelim. Çıkan ekrandaki kısmı, aşağıdaki gibi dolduralım.
- Sayfamızı ekledikten sonra, açılan View dosyamızı açıp, içerisini aşağıdaki gibi dolduralım.
@model IEnumerable<MvcProjesi.Data.Makale>
<h1>Makaleler</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>
}
}
- Makalelerimizin listeleneceği sayfamız hazır. Şimdi de ana sayfadaki etiket listesinde, bir düzenleme yapmamız gerekecektir. Ana sayfamızda bulunan EnCokOnEtiket Partial View'imizi, aşağıdaki gibi düzenleyelim.
<!--Modelimiz liste olarak geldiği için List<> içerisine aldık-->
@model List<MvcProjesi.Data.Etiket>
<div style="border:1px solid yellow;padding:25px;text-align:center;">
<h2>En Çok Kullanılan On Etiket</h2>
@{
//Bu sefer de while döngüsünü kullandık.
int sayi = 0;
while (sayi < Model.Count())
{
//Burada her etiketin etrafına çerçeve attık
<ul style="border:1px solid yellow">
<li>
<!--Etiket başlıklarını, link haline getiriyoruz ve new{} kısmına Action'a gönderilmesi için
etiketId parametresini yazıyoruz-->
@Html.ActionLink(Model[sayi].Icerik, "EtiketinMakaleleri", new { etiketId = Model[sayi].EtiketId })
</li>
</ul>
sayi++;
}
}
</div>
Artık ana sayfamızda bulunan, Etiketler kısmındaki başlıklara tıklandığında, o etiketin barındırıldığı makaleler liste halinde yeni sayfada listelenecektir.
2.Maddemize Geçelim
- Controllers>HomeController dosyamızı açalım ve aşağıdaki şekilde bir Action ekleyelim.
public ActionResult MakaleDetay(int makaleId)
{
MvcProjesiContext db = new MvcProjesiContext();
//Burada verilen id numarasına göre seçili makaleyi alıyoruz. Makale makale = (from i in db.Makales where i.MakaleId == makaleId select i).SingleOrDefault(); return View(makale);
}
- Hemen ardından makalemizin görüntüleneceği, makale detay sayfamızı oluşturalım. Bunun için
MakaleDetaykısmına sağ tıklayarak, Add View tuşuna tıklayalım. - Ayarlarımızı aşağıdaki gibi yapıp, Add tuşuna tıklayalım.
- Eklediğimiz View sayfasının da içeriğini, aşağıdaki gibi dolduralım.
@model MvcProjesi.Data.Makale
@{
ViewBag.Title = "MakaleDetay";
}
<h2>Makale Detayı</h2>
<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 => Model.Baslik)
</h3>
<!--Başlıkla içerik arasına, dikey çizgi ekliyoruz.-->
<hr />
@Html.DisplayFor(i => Model.Icerik)
<hr />
<!--Tarih başlığını, tarih içeriğine bağlamak için Label kullandık.-->
@Html.Label("Tarih : ")
@Html.DisplayFor(i => Model.Tarih)
<hr />
<h4>Makaleyi Yazan</h4>
<!--Burada bir değişkende, ad ile soyadı birleştirip ekrana bastık.-->
@{string adSoyad = Model.Uye.Ad + " " + Model.Uye.Soyad;}
@Html.Label("Adı ve Soyadı : ") @adSoyad
</div>
- Son olarak da ana sayfada bulunan SonBesMakale View sayfamızı, aşağıdaki gibi güncelleyelim.
<!--
Model verisi, tek bir veriye işaret ediyordu. Ancak biz, Controller'den veriyi
bir liste halinde gönderdiğimiz için aşağıdaki satırı güncelledik.
-->
@model List<MvcProjesi.Data.Makale>
@{
//En dışa bir çerçeve attık. İçeriği ortaladık ve 25'er piksel boşluk verdik.
<div style="border:1px solid black;padding:25px;text-align:center;">
<h2>Son Beş Makale</h2>
<!--
//Burada Model dediğimiz zaman, Controllerden gelen veriye direkt ulaşmaktayız.
//Biz burada liste halinde gelen Model'imizde döngü kurarak, içindeki verileri
//html olarak basacağız.
-->
@foreach (var item in Model)
{
//Burada her makalenin etrafına çerçeve attık
<div style="border:1px solid black">
<!--Başlığımızı link haline getirdik ve tıklandığı zaman, makaleId'yi parametre olarak
Action'umuza geçtik-->
@Html.ActionLink(item.Baslik, "MakaleDetay", new { makaleId = item.MakaleId })
<p>@item.Icerik</p>
<strong>Tarih : @item.Tarih </strong>
</div>
}
</div>
}
Ana sayfada, herhang bir makale başlığına tıkladığımızda, o makalenin tam halinin görüntüleneceği Makale Detayı sayfasının açılmasını sağladık. Sayfanın ekran görüntüsü aşağıdaki gibi olacaktır.
3. Maddemize Geçelim
- Yeniden HomeController dosyamızı açalım.* Aşağıdaki kodlarla Action'umuzu ekleyelim.
public ActionResult YorumMakalesi(int yorumId)
{
MvcProjesiContext db = new MvcProjesiContext();
//Burada verilen yorumId numarasına göre ait olduğu makaleyi alıyoruz.
Makale makale = (from i in db.Yorums where i.YorumId==yorumId select i.Makale).SingleOrDefault();
return View(makale);
}
- Action'umuzu ekledikten sonra, View sayfamızı da oluşturalım. Bunun için
YorumMakalesikısmına sağ tıklayarak, Add View diyelim ve ayarlarını aşağıdaki gibi yapalım.
- Açılan View sayfamızı, aşağıdaki gibi dolduralım.
@model MvcProjesi.Data.Makale
@{
ViewBag.Title = "YorumMakalesi";
}
<h2>Makale Detayı</h2>
<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 => Model.Baslik)
</h3>
<!--Başlıkla içerik arasına, dikey çizgi ekliyoruz.-->
<hr />
@Html.DisplayFor(i => Model.Icerik)
<hr />
<!--Tarih başlığını, tarih içeriğine bağlamak için Label kullandık.-->
@Html.Label("Tarih : ")
@Html.DisplayFor(i => Model.Tarih)
<hr />
<h4>Makaleyi Yazan</h4>
<!--Burada bir değişkende, ad ile soyadı birleştirip ekrana bastık.-->
@{string adSoyad = Model.Uye.Ad + " " + Model.Uye.Soyad;}
@Html.Label("Adı ve Soyadı : ") @adSoyad
</div>
- Son olarakta, SonBesYorum View sayfamızın, içeriğini aşağıdaki gibi değiştirelim.
<!--Modelimiz liste olarak geldiği için List<> içerisine aldık-->
@model List<MvcProjesi.Data.Yorum>
<div style="border:1px solid red;padding:25px;text-align:center;">
<h2>Son Beş Yorum</h2>
@{
//Bu sefer de for döngüsünü kullandık.
for (int i = 0; i < Model.Count() - 1; i++)
{
//Burada her yorumun etrafına çerçeve attık
<div style="border:1px solid red">
<!--Üye bilgilerini alırken Linq yardımıyla, direkt, yorumu yazan üyenin bilgilerine
@Model[i].Uye. şeklinde ulaşabildik.
-->
<h3>Üye Bilgileri</h3>
Adı : @Model[i].Uye.Ad<br />
Soyadı : @Model[i].Uye.Soyad<br />
<h3>Makale Bilgileri</h3>
<!--Üye bilgilerini alırken Linq yardımıyla, direkt, yorumun ait olduğu
makelenin bilgilerine @Model[i].Makale. şeklinde ulaşabildik.
-->
Başlık : @Html.ActionLink(@Model[i].Makale.Baslik, "YorumMakalesi", new { yorumId = Model[i].YorumId })
<h3>Yorumun İçeriği</h3>
<p>@Model[i].Icerik</p>
Tarih : @Model[i].Tarih
</div>
}
}
</div>
Evet, aynı şekilde artık ana sayfadaki yorumlarımızın olduğu kısımda, makale başlıklarına tıklanınca yorumun ait olduğu makale sayfası açılacaktır.
Sonuç olarak projemizde verilerimizin gösterim kısımlarını derinlemesine işlemiş bulunmaktayız.
Sonraki dersimizde, üyelik işlemlerini yapıyor olacağız.
Projenin son halini buradan indirebilirsiniz.
Hepinize kolaylıklar diliyorum.