Mini Dükkan Projesi Ders 009 Navigasyon Menüsünün Oluşturulması

Şimdi kullanıcının herhangi bir kategorideki ürünleri listelemek istediğinde ilgili kategoriyi seçebileceği navigasyon menümüzü oluşturma işlemi ile devam edelim. Bunu yapabilmek için öncelikle bir view komponent oluşturacğaım ve böylelikle navigasyon menüsünün görünmesini sağlayacağım.

Dersin video versiyonu:

Navigasyon View Componenti Oluşturma:

Projemin ana dizininde Components adında bir klasör oluşturdum. Bu klasörüme sağ tıklayıp bir class ekliyorum adını da NavigasyonMenuViewComponent.cs verdim. Kodlarımızı yazalım:

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
    {      

        
        public string Invoke()
        {
           return "Navigasyon menüsü buraya gelecek";
        }
    }
}

Şimdilik öylesine navigasyon nerede olacak görelim diye bu kodları yazdım. Burada Invoke yöntemi ile ben razor view sayfasında mesajı görüntülüyorum. Yani invoke ile mesajın tarayıcıya gönderilen HTML sayfasına çağırma işlemi yaptım. Dediğim gibi burada şimdilik sadece string bir ifade var, değişecek burası.

Ben bu navigasyon menümün yani içinde yer alacak olan kategori listeleme alanının tüm sayfalarda görünmesini istiyorum. Bu yüzden _Layout dokümanımda güncelleme yapmam lazım. _Layout dokümanımda kodlarımızı düzenlersek;

< !DOCTYPE html >
< html lang="tr" >
< head >
    
    
    MiniDukkan
    
  
< /head >
< body >
    
Mini Dükkan
@RenderBody()
< /body > < /html >

Şimdi ne yaptık, daha önceden burada bir yazı vardı ben bunu sildim ve buraya vc:navigation-menu elementini ekledim. Bu benim NavigasyonMenuViewComponent classımı işaret ediyor.

Şimdi çalıştırdığımızda artık yazdığımız mesaj görünür.

Kategori Listesini Oluşturma:

Şimdi navigasyon menümüze kategorileri ekleyelim. NavigasyonMenuViewComponent classıma geliyor ve kodlarımı düzenliyorum.

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));
        }
    }
}

Burada tanımladığım constructor metot IDukkanRepository parametresini tanımlamakta. ASP.Net Core’da bir view component classından instance oluşturulmak istendiğinde, bu parametre için bir değer sağlama ihtiyacı kontrol edilir ve startup classında hangi uygulama nesnesinin kullanılması gerektiği belirlenir. Daha önceden kullandığım gibi dependency injection yani bağımlılık ekleme özelliğini kullandım. Böylelikle ben view component classıma hangi repositroy uygulamasının kullanılacağını bilmesine gerek kalmadan verilere ulaşmasına izin verdim.

Burada Invoke metodunda repository içinde yer alan kategorileri seçme ve sıralama işlemi için LINQ sorgusu kullandım. Bunları bağımsız bir değişken olarak ilettim.

View Oluşturma:

Navigasyon menüm için ilgili view’i oluşturmam gerek. Bunun için öncelikle Views > Shared > Components > NavigasyonMenu adında bir klasör oluşturuyorum. Buraya da bir Razor View ekliyor ve adını da Default.cshtml veriyorum. Kodlarımı da düzenliyorum:

@model IEnumerable< string >

Ana Sayfa

@foreach (string kategori in Model)
{
    
@kategori

}

Şimdi uygulamamızı çalıştıralım ve sonucu görelim.

Artık navigasyon menümüz oluşmuş durumda ve filtreleme yapabiliyor olmamız gerek.

Bir sonraki derste görüşmek üzere..

Bir cevap yazın

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