View Component bizim için yeni bir terimdir. Asp Net Core ile hayatımıza giriş yapmıştır. Peki nedir bu view component ve niçin kullanırız ?
View Component
Daha önceden Asp Net MVC kullananlar bilir oradaki partial view 'e benzemektedir ve Partial viewden daha iyidir.(Microsoft diyor ve bence haklılar da)
Birden çok  view'de kullanılabilir ve yeniden kullanılabilir birleşen(component) yazmamızı sağlar.
Asenkron olarak kullanabiliriz.
Url'den ulaşılamaz.(Asp Net MVC de partial view'imizin adını url'den yazarak ulaşılabiliyorduk. Url'den ulaşılabilir olmasını istemediğimiz zamansa ChieldOnly attribute kullanıyorduk ve url çağrıldığında ulaşılamıyordu ve bize hata fırlatıyordu.)
Test edilmesi kolay bir yapısı vardır.

View Component Nerelerde Kullanılır?
Örnek olarak;
Dinamik menüler,
Login paneli,
Alışveriş sepeti,
En son yazılar gibi vb. yapılarda kullanabiliriz.

View Component Oluşturma
View Component oluşturmanın birkaç yolu vardır.
1-)ViewComponent attribute kullanarak oluşturabiliriz.
2-)ViewComponent olarak istediğimiz class'ımızın adının sonuna ViewComponent kelimesini ekleyerek.
3-)Kullanacağımız class'ımıza ViewComponent classımızdan katılım alarak.

1-)ViewComponent Attribute ile


  [ViewComponent]
  public class SonYazilar
  {
    public void InvokeAsync()
    {
            
    }
  }

2-)Classımızın adının sonuna ViewComponent ekleyerek


  public class SonYazilarViewComponent
  {
    public void InvokeAsync()
    {

    }
  }

3-)ViewComponent class'ından kalıtım alarak


  public class SonYazilar : ViewComponent
  {
    public async Task<IViewComponentResult> InvokeAsync()
    {
       return View();
    }
  }

View Component Dosya Yolu
Projemiz çalışma zamanında view componentleri bu dosya yollarında arar.

  • Views/<ControllerName>/Components/<ViewComponentName>/<ViewName>
  • Views/Shared/Components/<ViewComponentName>/<ViewName>

[ViewName] nin varsayılanı Default.cshtml  dir.

ViewComponent i Çağırmak
View componentlerimizi oluşturduk fakat ekranda nasıl göstereceğiz.(çağıracağız)
View componentimizi kullanmak istediğimiz sayfamızda ;


 @await Component.InvokeAsync("[ViewComponentName]")
 //parametre alacaksa
 @await Component.InvokeAsync("[ViewComponentName]",[parameters])

Örnek bir uygulama yapalım...
Bunun için modelimizi oluşturalım
Model


  public class Yazi
  {
     //Properties
     public int YaziId { get; set; }
     public string YaziBaslik { get; set; }
     public int KategoriId { get; set; }
  }

IService interfacemizi yazalım..


  public interface IYaziService
  {
    ICollection<Yazi> SonYazilar();
    ICollection<Yazi> SonYazilar(int kategoriId ,int adet = 5);
  }

YaziService classımızı yazalım..


  public class YaziService : IYaziService
  {
    static ICollection<Yazi> yazilar;
    public YaziService()
    {
        yazilar = new List<Yazi>()
        {
            new Yazi(){YaziId= 1 ,YaziBaslik = "Yazı 1 ", KategoriId = 1},
            new Yazi(){YaziId= 2 ,YaziBaslik = "Yazı 2 ", KategoriId = 2},
            new Yazi(){YaziId= 3 ,YaziBaslik = "Yazı 3 ", KategoriId = 1},
            new Yazi(){YaziId= 4 ,YaziBaslik = "Yazı 4 ", KategoriId = 3},
            new Yazi(){YaziId= 5 ,YaziBaslik = "Yazı 5 ", KategoriId = 1},
            new Yazi(){YaziId= 6 ,YaziBaslik = "Yazı 6 ", KategoriId = 3},
        };
    }

    public ICollection<Yazi> SonYazilar()
    {
        return yazilar.OrderByDescending(x => x.YaziId).Take(5).ToList();
    }

    public ICollection<Yazi> SonYazilar(int kategoriId, int adet = 5)
    {
        return yazilar.Where(x=>x.KategoriId == kategoriId).OrderByDescending(x => x.YaziId).Take(adet).ToList();
    }
  }

Starup.cs de Dependency Injection yapıyoruz


 public void ConfigureServices(IServiceCollection services)
 {
    services.AddScoped<IYaziService, YaziService>();
    services.AddMvc();
 }
 

Yeni bir klasör oluştuyoruz ve bu klasör içerisinde kullanacağımız componentler yer alacak.


Sıra geldi View Componentimizi yazmaya


    //ViewComponent classımızdan kalıtım alıyorum
    public class SonYazilar : ViewComponent
    {
        private readonly IYaziService _yaziService;
        public SonYazilar(IYaziService yaziService)
        {
            _yaziService = yaziService;
        }
        public  IViewComponentResult Invoke(int? kategoriID)
        {
            //parametre alıp almadığını kontrol ediyorum    
            var sonYazilar = kategoriID == null ? _yaziService.SonYazilar() : _yaziService.SonYazilar((int)kategoriID);
            return View(sonYazilar);
        }
    }

View Componentimizi de oluşturduk.
Sıra geldi Componentimizin view kısmına
- Klasör yolumuz

Defult.cshtml view'in kodlarını yazıyoruz.

Oluşturmuş olduğumuz view componentimizi çağırma işlemini gerçekleştirelim
Index.cshtml
 
Ve son hali

Bildiğim kadarıyla bir şeyler yazmaya çalıştım inşallah birilerinin faydalanması dileğiyle..