Mini Dükkan Projesi Ders 010 Seçilen Başlığın Highlight Edilmesi

Kullanıcıya seçilen kategorinin hangisi olduğunu vurgulama amaçlı olarak navigasyon alanımda Highlight işlemi yapacağım.

Dersin youtube videosu:

Bunun için kategori listesinde listelenen kategorilerden seçili olanı bulmamız lazım. Controller ve View gibi ASP.NET Controlleri bir context bir bağlam nesnesi ile geçerli istek hakkında bilgi alabilirler. Burada da ViewComponent base classı özelliği aracılığı ile context nesnelerine erişim sağlayabilirim. RouteData özelliği sayesinde routing sistem tarafından url isteğinin nasıl işlendiği hususunda bilgi ediniyorum. Şimdi bunu yapabilmek için öncelikle NavigasyonMenuViewComponent classımıza gelelim. Kodlarımızı düzenleyelim:

using Microsoft.AspNetCore.Mvc;
using MiniDukkan.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MiniDukkan.Components
{
    public class NavigasyonMenuViewComponent : ViewComponent
    {
        private IDukkanRepository repository;

        public NavigasyonMenuViewComponent(IDukkanRepository repo)
        {
            repository = repo;
        }

        public IViewComponentResult Invoke()
        {
            ViewBag.SecilenKategori = RouteData?.Values["kategori"];
            
            return View(repository.Urunler.Select(x => x.Kategori).Distinct().OrderBy(x => x));
        }
    }
}

Buradaki kodlarımda aktif olarak seçili olan kategorinin değerlerini almak için RouteData özelliği ile isteğin datasına erişme yöntemi kullanıyorum. Aslında ben burada başka bir view class oluşturabilir ve bunu tekrar elde edebilirdim. Çoğu zamanda genelde bu tercih edilir. Ancak burada çeşitli yöntemleri görmek adına ben ViewBag kullanıyorum. ViewBag özelliği ile yapılandırılmamış verilerin bir view modelin yanında başka bir view’e aktarılmasına izin verebiliriz. Burada Invoke metodunun içerisinde dinamik olarak seçilen kategori özelliğini ViewBag nesnesine atadım ve burada değerimi GuncelKategori değerine ayarladım. GuncelKategori değerini de RouteData özelliği ile sayesinde context aracılığı ile ettiğimiz bir değer. Burada ViewBag yeni özellikler tanımlamama imkan veren ve onlara basitçe değer atayabilme imkanı sunan dinamik bir nesne aslında. Şimdi hangi kategorinin seçili olduğunu kullanıcıya gösterebiliriz. Artık ViewComponent tarafından seçili view’i güncelleyebilirim. Buna ilişkin olarak seçilen kategori için css düzenlemesi yapabilirim. Bunları yapabilmek için default.cshtml dosyamıza gelelim ve kodlarımızı düzenleyelim. Projemizde Views / Shared / Components / NavigasyonMenu / Default.cshtml dosyamızı açalım.

@model IEnumerable

Ana Sayfa

@foreach (string kategori in Model)
{
    @kategori
}

Uygulamayı çalıştırınca artık vurgulama işleminin yapıldığını görebilirsiniz. Seçilen kategoriyi navigasyon menümde mavi alt alan rengi ile vurguladım.

Paging İşlemindeki Hatanın Giderilmesi

Şimdi bir sorunumuz daha var, ürünler kategori bazlı seçildiğinde bile tüm ürünlerin sayısı kadar her sayfada 3 adet olacak şekilde sayfa sayısı görünmekte. Burada bir düzenleme yapmamız gerek. Bunu yapabilmek için HomeController içinde yer alan Index metodumuzda yapmamız gerek.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using MiniDukkan.Models;
using MiniDukkan.Models.ViewModels;

namespace MiniDukkan.Controllers
{
    public class HomeController : Controller
    {
        private IDukkanRepository repository;
        public int SayfaBoyutu = 3;

        public HomeController(IDukkanRepository repo)
        {
            repository = repo;
        }




        public ViewResult Index(string kategori, int urunSayfa = 1)
        => View(new UrunlerListesiViewModel { Urunler = repository.Urunler.Where(u => kategori == null || u.Kategori == kategori).OrderBy(u => u.UrunID).Skip((urunSayfa - 1) * SayfaBoyutu).Take(SayfaBoyutu), SayfalamaBilgi = new SayfalamaBilgi { GuncelSayfa = urunSayfa, SayfaBasiGosterilecekUrun = SayfaBoyutu, ToplamUrunSayisi = kategori == null ? repository.Urunler.Count() : repository.Urunler.Where(e => e.Kategori == kategori).Count()      
             },
            GuncelKategori = kategori
        }
        ); 
        
        

        
    }
}

Eğer bir kategori seçilirse o kategorideki ürünler göstrilecek. Sayfa sayısı da her bir sayfada 3 olacak şekilde gerçekleştirilir.

Şimdilik bu kadar, görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir