Takip Edin

ASP.NET MVC

Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı – Blog Filtreleme

asp.net mvc teknoloji bloğu - blog filtreleme öne çıkan görsel
Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı
Proje Şablonu
Entity Sınıfları
Context Sınıfı
Database Initialization
Connection String
Controller
Blog ve Kategori Tabloları
Anasayfa Blog Listesi
Blog ve Kategori Ekleme Formu
Blog ve Kategori Güncelleme Formu
Kayıt Detay Sayfası
Layout
Kategori Menüsü
Blog Filtreleme
Blog Arama Kutusu

Bu yazıda, blog listesi için ayrı bir partial view oluşturma ve blogların kategoriye göre filtrelenmesi işlemleri gerçekleştirilecektir.

Öncelikle Solution Explorer penceresinde, Controllers klasörünün altında BlogController.cs dosyasını açalım:

asp.net mvc teknoloji bloğu - BlogController.cs açılış yeri

Index action metodunun üstüne List action metodunu ekleyelim:

asp.net mvc teknoloji bloğu - List action metodunun ekleneceği yer
        public ActionResult List(int? id)
        {
            var bloglar = db.Bloglar
                .Where(i => i.Onay == true)
                .Select(i => new BlogModel()
                {
                    Id = i.Id,
                    Baslik = i.Baslik.Length > 100 ? i.Baslik.Substring(0, 100) : i.Baslik,
                    Aciklama = i.Aciklama,
                    EklenmeTarihi = i.EklenmeTarihi,
                    Anasayfa = i.Anasayfa,
                    Onay = i.Onay,
                    Resim = i.Resim,
                    CategoryId = i.CategoryId  
                }).AsQueryable();

            if (id != null)
            {
                bloglar = bloglar.Where(i => i.CategoryId == id);
            }

            return View(bloglar.ToList());
        }

Yukarıda yerleştirdiğimiz kodda, sorgunun içerisine CategoryId’yi dahil ettiğimiz için Models klasörü altındaki BlogModel sınıfına da bu alanı eklememiz gerekmektedir:

asp.net mvc teknoloji bloğu - BlogModel sınıfına CategoryId alanını dahil etme

Tekrar BlogController.cs dosyasına gelelim ve oluşturduğumuz List action metodunda, List yazısının üzerine sağ tıklayıp Add View diyelim:

asp.net mvc teknoloji bloğu - List  yazısına sağ tıklayıp Add View'i tıklama

Karşımıza gelen pencerede Use a layout page kısmını işaretleyip Add tuşuna basalım:

asp.net mvc teknoloji bloğu - List.cshtml oluşturulmadan önce gösterilen Add view penceresi

Karşımıza çıkan List.cshtml dosyasına aşağıdaki kodları yerleştirelim:

@model IEnumerable<TeknolojiBlogu.Models.BlogModel>
@{
    ViewBag.Title = "Index";
}

<h1>BLOGLAR</h1>
<hr />
<br />

@foreach (var blog in Model)
{
    <div class="card shadow mb-5">
        <img class="card-img-top" src="~/img/@(blog.Id).jpg" alt="Card image cap">
        <div class="card-body">
            <p class="card-text"><small class="text-muted"><i class="far fa-calendar-alt"></i> @blog.EklenmeTarihi</small></p>
            <h3 class="card-title">@blog.Baslik</h3>
            <hr />
            <p class="card-text">@blog.Aciklama</p>
            <hr />

            @Html.ActionLink("Devamını Oku...", "Details", "Blog", new { id = blog.Id }, new { @class = "btn btn-primary" })
        </div>
    </div>
}


@section SagKolon
{
    <div class="card bg-dark p-5 mb-5">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Ara">
            <div class="input-group-append">
                <button class="btn btn-info" type="button">Ara</button>
            </div>
        </div>
    </div>

    @{ Html.RenderAction("KategoriListesi", "Category"); }

}

Solution Explorer penceresinde Category klasörünün altında bulunan KategoriListesi.cshtml dosyasında, kategoriler için link oluşturalım:

asp.net mvc teknoloji bloğu - KategoriList.cshtml dosyasında kategorilere link verme

BlogController’ın List Action metoduna boş bir Id geldiği durumlar için Shared klasörü altında bulunan _Layout.cshtml dosyasında navbar kısmına bütün blogları listelemesi için bir Bloglar menüsü oluşturalım. Bunun için aşağıdaki kodları yerleştirelim:

asp.net mvc teknoloji bloğu - Bloglar menüsünü _Layout.cshtml dosyasına yerleştirme

Uygulamayı çalıştıralım ve navbarda oluşturduğumuz Bloglar Menüsüne tıklayalım:

asp.net mvc teknoloji bloğu - Bloglar navbar menüsüne tıklandığında tarayıcıda oluşan görüntü

Görüldüğü gibi Bloglar menüsü, /Blog/List sayfasına yönlendirerek bütün blogları tarayıcıya getirdi.

Blog kategorilerinin de çalışıp çalışmadığını kontrol edelim:

asp.net mvc teknoloji bloğu - donanım kategorisine tıklama
asp.net mvc teknoloji bloğu - donanım kategorisini tarayıcı üzerinde kontrol etme

Görüldüğü gibi, Donanım ve Otomobil kategorilerine tıkladığımızda kendi kategorileri ile ilgili olan blogları tarayıcıya getirdi.

Solution Explorer penceresinde bulunan Shared klasörüne sağ tıklayıp Add => View diyelim:

asp.net mvc teknoloji bloğu - Shared klasörüne sağ tıklayıp Add =>> View dedik

Karşımıza çıkan Add View penceresinde View Name’e BlogListesi dedikten sonra Create as a partial view seçeneğini işaretleyip Add butonuna tıklayalım:

asp.net mvc teknoloji bloğu - BlogListesi dosyasını oluşturmak için karşımıza gelen Add View penceresi

BlogListesi.cshtml dosyasına aşağıdaki kodları yapıştıralım:

@model IEnumerable<TeknolojiBlogu.Models.BlogModel>

@if (Model.Count() == 0)
{
    <div class="alert alert-warning">
        <h3>Kayıt Bulunamadı!</h3>
    </div>
}
else
{
    foreach (var blog in Model)
    {
        <div class="card shadow mb-5">
            <img class="card-img-top" src="~/img/@(blog.Id).jpg" alt="Card image cap">
            <div class="card-body">
                <p class="card-text"><small class="text-muted"><i class="far fa-calendar-alt"></i> @blog.EklenmeTarihi</small></p>
                <h3 class="card-title">@blog.Baslik</h3>
                <hr />
                <p class="card-text">@blog.Aciklama</p>
                <hr />

                @Html.ActionLink("Devamını Oku...", "Details", "Blog", new { id = @blog.Id }, new { @class = "btn btn-primary" })

            </div>
        </div>
    }
}

Solution Explorer penceresinde, Home klasörü altındaki Index.cshtml dosyasını açalım ve burada bulunan blog listesine ait kodları silelim:

asp.net mvc teknoloji bloğu - Index.cshtml dosyasında blog listesine ait kodların silinmesi

BlogListesi.cshtml partial view’ini, Html.Partial( ) metoduyla render ederek blog listesinin, Index.cshtml dosyasında gösterilmesini sağlayalım:

asp.net mvc teknoloji bloğu - Index.cshtml dosyasında blog listesini Html.Partial metoduyla gösterme

Solution Explorer penceresinde Views klasörü altındaki List.cshtml dosyasını açalım ve burada bulunan blog listesine ait kodları silelim:

asp.net mvc teknoloji bloğu - List.cshtml dosyasında bulunan blog listesine ait kodları silme

Index.cshtml dosyasında yaptığımız gibi BlogListesi.cshtml partial view’ini, Html.Partial( ) metoduyla render ederek blog listesinin, List.cshtml dosyasında gösterilmesini sağlayalım:

asp.net mvc teknoloji bloğu - List.cshtml dosyasına blog listesini Html.Partial metoduyla getirme

Uygulamayı çalıştırıp /Home/Index ve /Blog/List sayfalarını açalım:

asp.net mvc teknoloji bloğu - Html.Partial ile tarayıcıya blog listelerini getirme
asp.net mvc teknoloji bloğu - /Blog/List sayfasına Html.Partial metoduyla blog listelerini getirme

Görüldüğü gibi blog listesini, Html.Partial metodu ile sayfaya getirme işlemi sorunsuz bir şekilde gerçekleşti.

Devamını oku

Popüler

error: Content is protected !!