Asp.Net Mvc – Controller ve View İşlemleri 2 (Asp.Net Mvc Yazı Dizisi – 14)

Önceki Yazı : Asp.Net Mvc – Controller ve View İşlemleri 1 (Asp.Net Mvc Yazı Dizisi – 13)

Merhaba Arkadaşlar,

Önceki yazımızda, blog uygulamamızın, Layout sayfasını hazırlamıştık. Ardından Index sayfamızı oluşturup, içeriğini doldurmamıştık.

Hemen doldurmaya başlayalım.

  • MvcProjesi adlı projemizi açalım. (Buradan son halini indirebilirsiniz.)
  • Views>Home>Index.cshtml dosyamızı açalım. İçeriği aşağıdaki gibidir.
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

İçerik varsayılan haliyle gelmiş bulunmaktadır. Biz içeriğimizi yazmaya başlayalım. Bunun için öncelikle, ana sayfada kullanacağımız içeriği bir hatırlayalım.

  • Son 5 makalenin ana sayfada listelenmesi
  • Son 5 yorumun ana sayfada listelenmesi
  • En çok kullanılan 10 etiketin ana sayfada listelenmesi

Evet, önceki yazımızda da işlediğimiz gibi, ana sayfada barındırılacak içeriklerimiz yukarıdadır.

Şimdi bir noktaya dikkatinizi çekmek istiyorum.

Gereksinimlere baktığımız zaman, sayfada 3 ayrı yapı kullanacağımızı görmekteyiz. Sayfa içerisinde, ayrı ayrı yapıları Partial View'ler (detaylı bilgi için tıklayınızsayesinde kullanabilmekteyiz.

Yapıyı oluştururken, bir sütun içerik, bir sütun da kenar çubuğu şeklinde kuracağız. Normalde sitelerde, yan çubuk sadece ana sayfada değil, tüm sayfalarda gösteriliyor. Ancak biz yapımızın daha sade ve anlaşılır olmasını tercih ediyor olacağız.

  • Index sayfamıza yeniden gelelim.
  • Öncelikle ana kısımda görülecek olan son 5 makalenin yüklendiği kısmı oluşturalım.
  • Controllers>HomeController.cs dosyamızı açalım. İçeriğimiz şu an, aşağıdaki gibidir.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcProjesi.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
	}
}
  • Halihazırda sadece Index Action'umuz (detaylı bilgi için tıklayınız) var. Biz şimdi SonBesMakale adlı bir Action ekleyeceğiz.
  • HomeController dosyamızı aşağıdaki gibi güncelleyelim. (Bilgiler yorum satırı olarak belirtilecek.)
using MvcProjesi.Data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcProjesi.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        //Son 5 makalenin ana sayfaya yükleneceği Action
        public ActionResult SonBesMakale()
        {
            //Veritabanından yeni bir nesne oluşturuyoruz.
            MvcProjesiContext db = new MvcProjesiContext();

            //Veritabanından sorgulamayı Linq ile yapıyoruz.
            //Tarih sırasına göre son makaleleri OrderByDescending ile çekip Take ile de 5 tane almasını istiyoruz.
            List<Makale> makaleListe = db.Makales.OrderByDescending(i => i.Tarih).Take(5).ToList();

            //Normal içeriklerde View döndürürken, burada ise PartialView döndürüyoruz.
            //Ayrıca makaleListe nesnesini de View'de kullanacağımız şekilde model olarak aktarıyoruz.
            return PartialView(makaleListe);
        }
    }
}

Gereken Action'umuzu oluşturduktan sonra, buna bağlı olarak View'imizi oluşturmamız gerekecek.

  •  public ActionResult SonBesMakale() satırında ki SonBesMakale'nin üzerine sağ tıklayarak Add View diyelim.

Partial view ekleme

  • Çıkan ekranda View name kısmına SonBesMakale yazalım.Template kısmı Empty olarak seçili olsun ki, içeriğini biz doldurabilelim. Model class kısmında ise makaleleri çekeceğimiz için, bunların sınıf karşılığı olan Makale sınıfını seçelim. Data context class ile ise, veritabanımızın sınıfı olan MvcProjesiContext'i seçmiş olalım. Create as a partial view kutucuğunun işaretli olmasına dikkat edelim. Böylelikle partial view olduğunu, Mvc motoruna bildirmiş olacağız. (Önceki yazılarda bu konuda detaylı bilgi verilmişti.)

Partial view ekleme

  • Add düğmesine basarak Partial View'imizi ekleyelim.
  • Views>Home>SonBesModel.cshtml dosyamız Visual Studio tarafından oluşturuldu. Dosyamızın içeriği aşağıdaki gibidir.
@model MvcProjesi.Data.Makale

Burada dikkat edileceği üzere, Makale sınıfımız model olarak, View sayfamıza tanıtılmış bulunmaktadır. Şimdi görsel olarak içeriğimizi şekillendirelim.

  • SonBesModel View'imizin içeriğini aşağıdaki gibi oluşturalım.
<!--
    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">
                <h3>@item.Baslik</h3>
                <p>@item.Icerik</p>
                <strong>Tarih : @item.Tarih </strong>
            </div>
        }
    </div>
}
  • Şimdi de Views>Home>Index.cshtml sayfamızı açalım ve içeriğini aşağıdaki gibi düzenleyelim.

@{
    ViewBag.Title = "Index";
}

<!--Burada Partial View yerine Html.Action metodunu çağırdık-->
@Html.Action("SonBesMakale")

Şimdi burada dikkat çeken nokta, Partial View'i çağırırken @Html.Action metodu ile çağırmış olmamız. Bunun sebebi ise eğer @Html.Partial olarak çağırırsak, o Partial View'in Action metodunu çağırmadan, yalnız View'i gösterir. Ancak @Html.Action önce Action'a girer, ardından da orada ki dönen View'i gösterir.

  • Şimdi projemizi çalıştırıp, ana sayfaya gittiğimizde aşağıdaki gibi bir görüntüyle karşılaşacağız.

Proje ana sayfa

Görüldüğü gibi, son beş makaleye herhangi bir makale gelmedi. Bunun sebebi ise, henüz veritabanına herhangi bir makale eklememiş olmamız. Panelimizi de henüz oluşturmadık. Bunun için geçici olarak ufak bir kod yazsak olur sanırım. Hemen eklememizi yapalım.

  • Ana dizinde ki Global.asax dosyamızı açalım. İçeriğini aşağıdaki gibi değiştirelim.
//Veritabanı context sınıfımızı referans veriyoruz
using MvcProjesi.Data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MvcProjesi
{
    public class MvcApplication : System.Web.HttpApplication
    {
        //Uygulama ilk başlatıldığında, buradaki metod çalışacak.
        protected void Application_Start()
        {
            //Burada veritabanı sınıfımızdan, bir nesne oluşturuyoruz. using kullanmamızın sebebi,
            //db nesnesinin işi bittiğinde, silinmesini ve hafızada yer tutmamasını sağlamak.
            using (MvcProjesiContext db = new MvcProjesiContext())
            {
                //Bu metod, eğer veritabanımız oluşturulmamış ise, oluşturulmasını sağlıyor.
                db.Database.CreateIfNotExists();

                //Buraya örnek olması açısından 6 adet makale ekleyelim.

                //Makaleden bir nesne oluşturuyoruz.
                Makale makale = new Makale();
                makale.Baslik = "Makale Başlığı 1";
                makale.Icerik = "Makale İçeriği 1";
                //Tarih olarak, şu anki tarihi veriyoruz.
                makale.Tarih = DateTime.Now;

                //Aynı işlemi diğer makaleler için de tekrarlıyoruz.
                //Bu sefer daha kısa tanımlama yöntemini kullandık.
                Makale makale2 = new Makale() { Baslik = "Makale Başlığı 2", Icerik = "Makale İçeriği 2", Tarih = DateTime.Now };
                Makale makale3 = new Makale() { Baslik = "Makale Başlığı 3", Icerik = "Makale İçeriği 3", Tarih = DateTime.Now };
                Makale makale4 = new Makale() { Baslik = "Makale Başlığı 4", Icerik = "Makale İçeriği 4", Tarih = DateTime.Now };
                Makale makale5 = new Makale() { Baslik = "Makale Başlığı 5", Icerik = "Makale İçeriği 5", Tarih = DateTime.Now };
                Makale makale6 = new Makale() { Baslik = "Makale Başlığı 6", Icerik = "Makale İçeriği 6", Tarih = DateTime.Now };

                //Veritabanında ki Makalelere eklemek için ekleme komutu veriyoruz.
                //SaveChanges() komutu gelene kadar veritabanına kaydedilmeyecek.
                db.Makales.Add(makale);
                db.Makales.Add(makale2);
                db.Makales.Add(makale3);
                db.Makales.Add(makale4);
                db.Makales.Add(makale5);
                db.Makales.Add(makale6);

                //Son olarak ta yaptığımız eklemelerin, veritabanına yansıtılmasını
                //sağlamak için kaydet komutu veriyoruz.
                db.SaveChanges();
            }
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}
  • Projemizi çalıştıralım. Aşağıdaki ekranı aldık.

Son beş makale

Görüldüğü gibi son ekleme tarihimizden, eskiye doğru 5 makaleyi aldı. Bu yüzden Makale Başlığı 1 adlı makalemiz gelmedi.

Global.asax dosyamıza yaptığımız son işlemler ile, proje her çalıştığında, 6 adet makale ekleniyor olacak. Bir sefer eklemeleri yaptırdıktan sonra, tekrar tekrar eklenmesine gerek duymayacağız. Yukarıdaki görüntüyü aldığımıza emin olduktan sonra, Global.asax içeriğimizi aşağıdaki gibi değiştirelim.

//Veritabanı context sınıfımızı referans veriyoruz
using MvcProjesi.Data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MvcProjesi
{
    public class MvcApplication : System.Web.HttpApplication
    {
        //Uygulama ilk başlatıldığında, buradaki metod çalışacak.
        protected void Application_Start()
        {
            //Burada veritabanı sınıfımızdan, bir nesne oluşturuyoruz. using kullanmamızın sebebi,
            //db nesnesinin işi bittiğinde, silinmesini ve hafızada yer tutmamasını sağlamak.
            using (MvcProjesiContext db = new MvcProjesiContext())
            {
                //Bu metod, eğer veritabanımız oluşturulmamış ise, oluşturulmasını sağlıyor.
                db.Database.CreateIfNotExists();

                /* Bir kere makaleleri ekledikten sonra, her seferinde tekrar 
                 * eklenmemesi için yorum satırı haline getirdik.
                //Buraya örnek olması açısından 6 adet makale ekleyelim.

                //Makaleden bir nesne oluşturuyoruz.
                Makale makale = new Makale();
                makale.Baslik = "Makale Başlığı 1";
                makale.Icerik = "Makale İçeriği 1";
                //Tarih olarak, şu anki tarihi veriyoruz.
                makale.Tarih = DateTime.Now;

                //Aynı işlemi diğer makaleler için de tekrarlıyoruz.
                //Bu sefer daha kısa tanımlama yöntemini kullandık.
                Makale makale2 = new Makale() { Baslik = "Makale Başlığı 2", Icerik = "Makale İçeriği 2", Tarih = DateTime.Now };
                Makale makale3 = new Makale() { Baslik = "Makale Başlığı 3", Icerik = "Makale İçeriği 3", Tarih = DateTime.Now };
                Makale makale4 = new Makale() { Baslik = "Makale Başlığı 4", Icerik = "Makale İçeriği 4", Tarih = DateTime.Now };
                Makale makale5 = new Makale() { Baslik = "Makale Başlığı 5", Icerik = "Makale İçeriği 5", Tarih = DateTime.Now };
                Makale makale6 = new Makale() { Baslik = "Makale Başlığı 6", Icerik = "Makale İçeriği 6", Tarih = DateTime.Now };

                //Veritabanında ki Makalelere eklemek için ekleme komutu veriyoruz.
                //SaveChanges() komutu gelene kadar veritabanına kaydedilmeyecek.
                db.Makales.Add(makale);
                db.Makales.Add(makale2);
                db.Makales.Add(makale3);
                db.Makales.Add(makale4);
                db.Makales.Add(makale5);
                db.Makales.Add(makale6);

                //Son olarak ta yaptığımız eklemelerin, veritabanına yansıtılmasını
                //sağlamak için kaydet komutu veriyoruz.
                db.SaveChanges();
                 */
            }
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Evet, artık ana sayfamızda, son beş makale sıralanıyor olacak. Görsel açıdan, ekstra bir şey özellikle yapmadım. Çünkü şu an sadece MVC'ye odaklanmamız lazım. Sizler kendi görsel gücünüze göre, ortaya bir şeyler çıkarabilirsiniz.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde, ana sayfamızın içerisini doldurmaya devam ediyor olacağız.

Projeyi buradan indirebilirsiniz.

Hepinize kolaylıklar diliyorum.