Asp.Net Core ile birlikte gelen View Componentleri WebForms ile kullanılan UserControl veya MVC ile kullandığımız Partial View yapılarına benzetebiliriz. Web uygulamalarımızda birden fazla alanda kullanmak istediğimiz viewlerimiz için ViewComponent’i tercih edebiliriz.
MVC’nin önceki sürümlerinde birden fazla alanda kullanmak istediğimiz bileşenleri genellikle Partial View olarak tasarlar ve [ChildActionOnly] attribute ile birlikte tek başlarına çağrılmalarını engellerdik. Bu yapı bizim için büyük kolaylık sağlardı. Asp.Net Core ile birlikte [ChildActionOnly] attribute kullanımı kaldırılmış ve yeni ViewComponent yapısı geliştirilmiştir. ViewComponentler dışarıdan Http istek ile doğrudan ulaşılamazlar.
“.Net Core” template’leri altında “AspNetCore_ViewComponent” adında bir “ASP.NET Core Web Application” projesi oluşturuyoruz.
Öncelikle projemiz içerisinde kullanacağımız basit bir model oluşturuyoruz. Proje ana dizini altında bir “Models” klasörü oluşturup içerisine aşağıdaki gibi “Duyuru.cs” class’ını ekliyoruz.
ViewComponent’ler klasik MVC kullanımına benzer biçimde bir View dosyası ve Controller’a benzer bir class’tan oluşur.
Projemizin ana dizinine ViewComponents adında bir klasör ve içerisine de örnek ViewComponent’imiz olan DuyuruViewComponent.cs’i ekliyoruz.
“DuyuruViewComponent.cs” isimli class’ımızın ViewComponent olarak kullanılacağını belirtmek için “ViewComponent” class’ından miras (inheritance) alıyoruz. Oluşturduğumuz bu ViewComponent’i varsayılan olarak “Duyuru” etiketiyle çağıracağız. Eğer farklı bir etiket ile çağırmak istiyorsak class üzerinde yazılı ViewComponent attribute’ünde bulunan Name parametresini kullanabiliriz.
Not: ViewComponent attribute’ü opsiyoneldir, kullanmamanız durumunda bir değişiklik olmayacaktır. Önemli olan class’ımızın ViewComponent class’ından miras almasıdır.
[csharp]
[ViewComponent(Name="Haber")]
[/csharp]
Hazırlayacağımız ViewComponent’in çağırılabilmesi için “Invoke” adında “IViewComponentResult” tipinde değer döndüren bir metod oluşturuyoruz. Eğer asenkron bir metod yazmak isterseniz “InvokeAsync” metodunu oluşturabilirsiniz. Asenkron yapısı ayrı bir konu olduğundan bu makalede değinilmeyecektir.
Invoke metodu içerisinde bir duyuru listesi oluşturacağız ve bu listeyi normal bir MVC view’ine model gönderir gibi göndereceğiz.
Sıra geldi ViewComponent’imizin tasarım kısmına. Proje ana dizinimiz altında “~/View/Shared” içerisine “Components” adında bir klasör oluşturuyoruz. Proje genelinde kullanacağımız tüm ViewComponentler ile ilgili View dosyalarımızı burada toplayacağız. DuyuruViewComponent için bir View oluşturacağımızdan bu dizin içerisine Duyuru adında bir klasör açıp içerisine Default.cshtml adında bir View ekliyoruz. Dizin yapımız aşağıdaki gibi olacaktır.
Her şey tamam, ViewComponent’imiz kullanıma hazır! Kullanmak istediğimiz View içerisinde Invoke metodunu çağırmamız yeterli olacaktır.
[csharp]
@await Component.InvokeAsync("Duyuru")
[/csharp]
Not: Dilerseniz Invoke methoduna parametre de gönderebilirsiniz.
Proje dosyalarını GitHub üzerinden indirebilirsiniz.
https://github.com/sinanbozkus/AspNetCore_ViewComponent
