ASP.NET Core MVC View Components Kullanımı

View Components Nedir?

Bu yazımızda ASP.NET Core MVC ile hayatımıza girmiş olan View Components kavramını inceleyeceğiz.ASP.NET MVC ile kullanılan ChildAction ve Partial View Core MVC içerisinde yer almamaktadır.Bunun yerine çok daha güçlü kullanıma sahip olan ve asenkron olarak çalışabilen View Components eklentisi getirilmiştir.

View Components Özellikleri

  1. Controllerla benzer bir yapıda çalıştığı için test edilebilirliği çok daha kolaydır.
  2. Asenkron olarak kullanılabilir.
  3. İş mantığının yanı sıra parametresi de olabilir.

View Components Oluşturma

Öncelikle View Component olarak hazırladığımız veya hazırlayacağımız sınıfların isimlerinin ViewComponent şeklinde bitmesi gerekmektedir.View Component için hazırlanan sınıfın ViewCoponent sınıfından miras alması gerekmektedir aşağıda gördüğünüz gibi CategoriesViewComponent sınıfı ViewComponent sınıfından türüyor.

public class CategoriesViewComponent :ViewComponent
{

    public IViewComponentResult Invoke()

    {

        List<Category>categories= GetList();

        return View(categories)

    }

 

    public List<Category> GetList()

    {

        List<Category>categoryList = new List<Category>();

        categoryList.Add(new Category(){ Title = "ASP.NET",Id = 1 });

        categoryList.Add(new Category(){ Title = "ASP.NETMVC", Id = 2 });

        categoryList.Add(new Category(){ Title = "ASP.NETCore MVC", Id = 3 });

        return categoryList;

    }

}

 

Yukarıda görüldüğü üzere return View işlemi ViewComponent sınıfı ile birlikte gelen Invoke içerisinde gerçekleştirilir.Dikkat edilmesi gereken en önemli konulardan biri ise hazırladığımız View Component’in hangi dizin içerisinde yer aldığıdır.Bizim senaryayo göre görsel taslağımızın bulunduğu yer ~\Views\Shared\Components\Categories dizininde.Kısaca anlatmak gerekirse Controller’ın sahip olduğu dizinin altında Components dizinini oluşturup bunun altında Categories isimli bir dizi daha oluşturmamız gerekiyor.Categories dizininin altına default.cshtml olarak bir View oluşturuyoruz.Ben tüm View’lar içerisinde kullanabilmek adı Shared dizini altına konumlandırdım.Dilerseniz View Component diğer dizinlerin altında da konumlanabilir sadece konumlandığı dizinin altında kullanılması sağlanabilir.Şimdi sırada görsel taslağımızı yani View’ımızı düzenlemek var.Default.cshtml’i aşağıda ki şekilde düzenliyoruz.

@model IEnumerable<EmreShnTest.Models.Category>

<div>Categories: </div>

<ul>

    @foreach (var item in Model)

    {

        <li>@item.Title+ @item.Id</a></li>

    }

</ul>

 

Şimdi hazırlamış olduğumuz View Component’i kullanmak için yapmamız gereken tek şey çağırmak gelin son aşama olan kullanımını inceleyelim.

 

View Components Kullanımı
View Components üç farklı şekilde kullanılabilir, çağırılabilir.

 

@Component.Invoke("Categories")
// AsenkronKullanımı

@await Component.InvokeAsync("Categories")

 

Eğer parametre ile birlikte kullanmak istiyorsanız, aşağıda bulunduğu şekilde Invoke() Methodunuzu güncellemeniz gerekir.

 

public class CategoriesViewComponent :ViewComponent
{

    public IViewComponentResult Invoke(intcategoryId)

    {

        List<Category>categories= GetList();

        return View(categories.FirstorDefault(c=>c.Id == categoryId))

    }

 

    public List<Category> GetList()

    {

        List<Category>categoryList = new List<Category>();

        categoryList.Add(new Category(){ Title = "ASP.NET",Id = 1 });

        categoryList.Add(new Category(){ Title = "ASP.NETMVC", Id = 2 });

        categoryList.Add(new Category(){ Title = "ASP.NETCore MVC", Id = 3 });

        return categoryList;

    }

}

 

View Component’inizi parametreli bir şekilde çağırmak için ise

 

@await Component.InvokeAsync("Categories", 2)

 

Bu kodu kullanmanız yeterli olacaktır.

 

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

 

 

 

İlginizi Çekebilir

Hocam bu componentler layout'a eklenebiliyor mu?

Onur Kılınç tarafından, 19 Haziran 2020 Cuma tarihinde yazılmıştır.

Belirttiğim gibi Shared klasörü içerisinde kullanırsanız istediğiniz her yerden erişim sağlayabilirsiniz.

Emre Şahin tarafından, 19 Haziran 2020 Cuma tarihinde yazılmıştır.

Yorum Yap