Asp.Net Core View Components Kullanımı

Asp.Net Core ile gelen View Components kavramını inceleyeceğiz. Asp.Net Core da ChildAction lar kaldırılmış ve yerine View Components fikri getirilmiştir.

Partial View çok benzer fakat daha güçlüdür. Model bağlama kullanmaz, ancak yalnızca onu çağırırken verdiğimiz verilerle çalışır ve daha dinamik çözüm sağlar.

View Components Aşağıdaki özelliklere sahiptir.

- Controllera benzer çalıştığı için test edilebilir yapıdadır. Böylelikle daha az hata yapmış 

  oluruz.

- İş mantığının yanı sıra parametresi de olabilir.

- Asenkron olarak kullanabiliyoruz.

Şimdi bu yapının nasıl çalıştığına bakalım ve nerede kullanacağımızı açıklayalım. 

Home sayfamızdaki listelenmiş kategorilerden seçilen kategoriye ait bilgilerin bulunduğu yeni bir sayfa açıldığını düşünelim ve seçilen kategoriye ait ürünleri de bu sayfada göstermiş olalım. İşte tamda burda View Components işimizi çözüyor.

Yeni bir Asp.Net Core Projesi açalım ve Components isimli yeni bir klasör ekleyelim.(Klasör ismini farklı tercih edebilirsiniz, anlaşılır olması açısından Components veya ViewComponents olabilir).

CategoryProducts isminde birde sınıf oluşturalım.

Önceden oluşturduğum Asp.Net Core Web Api  projesindeki modelleri hatırlayalım ve kullanarak devam edelim.

    public class BaseEntity
    {
        public int Id { get; set; }
        public bool IsActive { get; set; }
        public string Description { get; set; }
    }

   public class Product:BaseEntity
    {
        public string Name { get; set; }
        public int Stock { get; set; }
        public double Price { get; set; }
        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }

 public class Category:BaseEntity
    {
        public Category()
        {
            Products = new HashSet<Product>();
        }

        public string CategoryName { get; set; }
        public virtual ICollection<Product> Products { get; set; }
    }


Oluşturduğumuz Sınıfın View Components olması için 3 farklı seçenek oluşturmuşlar.

1- Sınıf ismiyle beraber ViewComponent yazılması.

    Örnek: public class CategoryProductViewComponent

2- Sınıfımıza ViewComponent sınıfını kalıtım olarak ekleyerek.

    Örnek: public class CategoryProducts : ViewComponent

3- Attribute kullanarak.

    Örnek:  [ViewComponent]
                 public class CategoryProducts

    Örnek: [ViewComponent( Name= "ProductList" )]    //  Bu şekilde View Components isimi
                 public class CategoryProducts                             verebiliriz.


Bu örnekte 2. olanı tercih ettim.

Şimdi Invoke metodunun içine yapmak istediğimiz işlemleri yazalım. Hatırlayacak olursak kategoriye ait ürünleri listelemek istiyorduk.

 public class CategoryProducts : ViewComponent
    {
        private readonly IProductClientManager _productClientManager;
        public CategoryProducts(IProductClientManager productClientManager)
        {
            _productClientManager = productClientManager;
        }

        public IViewComponentResult Invoke(int id)
        {         
            var products = _productClientManager.GetAll().Where( x => x.CategoryId == id );
            return View(products);
        }
    }

 
 NOT: Dependency Injection işlemleri için Asp.Net Core 2.2 ile Web Api Client uygulaması yazımda inceleyebilirsiniz.

Şimdi sınıfımız için bir View sayfası oluşturuyoruz. Bu View sayfasını belli bir kurala göre yolunu vererek oluşturuyoruz. 

1- View/<Controller Name>/Components/<View Component Name>/<ViewName>

2- View/Shared/Components/<View Component Name>/<View Name>

             





Default.cshtml dosyamızı düzenleyelim.

@model IEnumerable<AspNetCoreWebApi.Client.Models.Product>

<table class="table ">
    <thead class="thead-dark">
        <tr>
            <th scope="col">İsim</th>
            <th scope="col">Durum</th>
            <th scope="col">Stok</th>
            <th scope="col">Fiyat</th>
        </tr>
    </thead>

    <tbody>

        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.IsActive</td>
                <td>@item.Stock</td>
                <td>@item.Price</td>
            </tr>
        }
    </tbody>
</table>

Şimdi oluşturduğumuz View Componenti Category/Details.cshtml sayfasında çağıralım. Bunun için asenkron çalışan aşağıdaki metodu view sayfamıza ekliyoruz.

Kullnım şekli:

 @await Component.InvokeAsync("Components İsmi", parametre)

 @await Component.InvokeAsync("CategoryProducts", new { id=Model.Id})

Details.cshtml View kodları. Using ile Components namespacesini eklemeyi unutmayalım.


@using AspNetCoreWebApi.Client.Components
@model AspNetCoreWebApi.Client.Models.Category

@{
    ViewData["Title"] = "Details";
}

<div class="contentBody">
    <h3>@Model.CategoryName</h3>
    <br />
    <br />
    <h4>Kategori Bilgileri</h4>
    <hr />
    <div class="row col-md 12">
        <div class="col-md-6">
            <div id="açıklama">
                <div class="col-md-8"><h5>Kategori İsmi</h5></div>
                <div class="col-md-8">@Model.CategoryName</div>
                <br />
                <div class="col-md-8"><h5>Açıklama</h5></div>
                <div class="col-md-11">@Model.Description</div>
            </div>         
        </div>
        <div class=" col-md-6">
            <div id="productHeader" >
                <h5>Ürünler</h5> 

            </div><br/>
            <div>
               @await Component.InvokeAsync("CategoryProducts", new { id=Model.Id})
            <div>
        </div>
    </div>
</div>

Kod yazma işlemlerini bitirdik ve son olarak View Componentimizi test edelim.

View Component çağırımını aşağıdaki şekilde tag helper ile de yapabiliriz.

<vc:[view component name]  parameter1="value" parameter2="value"> 

</vc:[view component name]>

Örnek:

<div class="row"> 

    <vc:  CategoryProduct  id="5"> 

    </vc: CategoryProduct > 

</div>

Tag hatasız çalışabilmesi için _ViewImports.cshtml dosyasına eklememiz gerekir.

@addTagHelper *, "Proje ismi"

Örnek:

@addTagHelper *,  AspNetCoreWebApi

Uygulamanın kodları AspNetCoreWebApiClient

Başka bir makalede görüşmek üzere.