ASP NET Core View Component

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//Components//
• Views/Shared/Components//

[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..