.Net Core ViewComponent Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere .Net Core ViewComponent Kullanımı konusundan bahsedeceğim.

Yazımıza başlarken ViewComponent nedir kısaca ondan bahsetmek istiyorum. ViewComponent kavramı Asp.Net MVC tarafında kullanılan Partial View’e benzer. ViewComponent’lerimizi birden fazla View üzerinde çağırıp kullanabiliriz. Böylelikle yeniden kullanılabilir bir component olarak karşımıza gelir. Asenkron olarak da kullanabiliriz. Test edilebilir bir yapısı vardır.

ViewComponent’ler nerelerde kullanılabilir birkaç örnek vermek gerekirse;

• Dinamik bir menü oluşturmak için kullanabiliriz.
• Login Paneli oluşturmak için kullanabiliriz.

Tabi örneklerimizi daha fazla da çoğaltabiliriz.

ViewComponent Nasıl Oluşturulur?

Örnek üzerinden gidersek eğer Kategori listesini göstermek istiyoruz. Bunu da ViewComponent ile oluşturacağız ve gösterimini sağlayacağız. Öncelikle CategoryList adında bir class(sınıf) oluşturuyoruz. Bu sınıfımızı oluşturduktan sonra ViewComponent sınıfından miras alma işlemini gerçekleştiriyoruz. Daha sonrasında da içerisinde Invoke,InvokeAsync metodumuzu yazıyoruz. Aşağıdaki gibi oluşturabiliriz.

public class CategoryList : ViewComponent
{
    private readonly ICategoryService _categoryService;
    public CategoryList(ICategoryService categoryService)
    {
        _categoryService = categoryService;
    }
	
    public IViewComponentResult Invoke()
    {
        return View(_categoryService.GetCategories());
    }
}

 ICategoryService isminde bir Interface nesnemiz bulunmakta ve bunu kullanabilmek için CategoryService nesnemiz içerisinde de örnek listemizi oluşturuyoruz.

public interface ICategoryService
{
    List<Category> GetCategories();
    Category GetCategory(int id);
}

public class CategoryService : ICategoryService
{
    List<Category> _categories;
    public CategoryService()
    {
        _categories = new List<Category>();
        _categories.Add(new Category { Id = 1, Name="Category 1" });
        _categories.Add(new Category { Id = 2, Name="Category 2" });
        _categories.Add(new Category { Id = 3, Name="Category 3" });
    }
    public List<Category> GetCategories()
    {
        return _categories;
    }

    public Category GetCategory(int id)
    {
        return _categories.Find(c => c.Id == id);
    }
}

Örnek listemizi de oluşturduk ve ViewComponent nesnemizin içerisinde kullanımını gerçekleştirdik.

Yukarıdaki ICategoryService nesnemizi kullanmak için Program.cs dosyası içerisinde tanımlamayı da yapmalıyız.

builder.Services.AddScoped<ICategoryService, CategoryService>();

Daha sonra ise Views > Shared klasörü altında Components klasörümüzü oluşturuyoruz. Bu klasörümüzün içerisinde de ViewComponent’imizin ismi olan CategoryList klasörü oluşturuyoruz. CategoryList klasörümüzün içerisinde de Default.cshtml dosyamızı oluşturuyoruz.

@model List<Category>

<ul>

@foreach (var category in Model)
{
    <li class="nav-item">
      <a asp-controller="Category" asp-action="Detail" asp-route-id="@category.Id"> 
          @category.Name
      </a>
    </li>
}

</ul>

Default.cshtml dosyamızı da oluşturduktan sonra artık çağırma işlemine geçiyoruz.

İstersek Layout.cshtml dosyamız içerisinde istersek başka bir .cshtml içerisinde bu ViewComponent‘i çağırma işlemini aşağıdaki gibi gerçekleştirebiliriz.

@await Component.InvokeAsync("CategoryList")

Tüm bu işlemlerden sonra projemizi çağırdığımızda verilerimizin geldiğini ve ViewComponent işleminin başarılı bir şekilde oluştuğunu, görünümünü sağlamış olacağız.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…