View Component

View Component;

View componentlar Standart.Netde öğrendiğimiz PartialView lerin gelişmiş versiyonudur deniebilir.

Web sitemiz üzerinde hemen hemen her modülde yahut sayfada birebir benzer işlemleri gerçekleştireceksek yahut aynı kodları çalıştırmamız gerekecekse bunun için her sayfa üzerinde hususi çalışmak yerine, bu ihtiyacı partial view yapısı ile global hale getirip lazım olan her noktada ilgili partial view’i çağırarak ihtiyacımıza dönük genelleştirilmiş bir çözüm sağlayabiliyorduk.

Yapısı itibariyle partial view, ihtiyacımızı büyük ölçüde gideren bir özellik olmasına rağmen server işlemlerine ihtiyaç duyulduğu noktada MVC paternine fazladan yük bindirmekte ve lüzumsuz bir maliyet israfına sebebiyet verebilmektedir. Bu maliyet, her server işleminde Controller katmanıyla iletişim kurmak zorunda kalmasından dolayı arz etmektedir. Aşağıdaki görseli incelerseniz eğer en basitinden bir veritabanı işlemi yapmak için bile Controller katmanına erişilmesi gerekilmekte ve o katman üzerinden gerekli birimlere talepte bulunulmak mecburiyetindedir.

İşte bu duruma istinaden .NET geliştiricileri Asp.NET Core 2 MVC’de partial view’in bu yükünü ortadan kaldırabilmek için View Component yapılarını geliştirmişlerdir. View component yapıları aşağıdaki görselde olduğu gibi bir işlevselliğe sahiptirler;

Yani herhangi bir server tabanlı işlemde ya da görselde olduğu gibi ufak bir veritabanı işleminde Controller’a bağlanma gereği duymaksızın direkt olarak ilgili katmana erişim sağlayarak işlemini icra edebilmekte ve gereken sonuçları elde edebilmektedir.

Projede View Component kullanımı;

View Component'lar UI katmanında Models folderının içine ViewComponent folderı olarak açılır.

ViewComponent class'ının oluşturulması ile ilgili 3 yöntem vardır;

[ViewComponent]
public class ProfileSummary {...}

public class ProfileSummary:ViewComponent {...}

public class ProfileSummaryViewComponent {...}

Kendi projemdeki View Component; profilimin özet bilgilerini gösteren dinamik bir görünümdür.Öncelikle ViewComponent'ımı oluşturdum.

GetByUserName methodu daha önceden IAppUserServis içerisinde oluşturduğum ve AppUserServis içerisinde implement ettiğim bir method. Bunun için ViewCpomnentıma IAppuserService interfaceimi inject ettim.

Daha sonra ViewComponentlerın View kısmı için için View/Shared/ProfileSummary folderının içine Default.cshtml olarak açtım. Bunun sebebi; projemiz çalışma zamanında ViewComponentı uygulamak için

• Views//Components//

• Views/Shared/Components// adresleri aramasıdır. ([ViewName] nin varsayılanı Default.cshtml dir.)

Profile Sumarry'nin View Component'ının view kısmında Default.cshtml olarak oluşturduk şimdi Bu Default.cshtml içerisinde farklı bir ViemComponentı çağıralım. Bu nun için 2 yöntem vardır.

 //parametre almayacaksa
 @await Component.InvokeAsync("[ViewComponentName]")
 //parametre alacaksa
 @await Component.InvokeAsync("[ViewComponentName]",[parameters])

Ben kendi projemde parametre alacağım için aşağıdaki şekilde kullandım. Burada görüleceği gibi ProfileSummary Default.cshtml ı içerisinde FollowUser.cs view componentını çağırdım.

Bunun devamında kendi projemde oluşturduğum _LeftSideBarPartial'ı ve içeirsindeki controlleri açıklayacağım.

LeftSideBar partialview inde Home, Details ve Settings olarak 3 control ekledim bu kontrollerden Details ve settings kısmına sadece üye kullanıcıların erişimi için bir if kontrolü yazdım

Şuan login olan kullanıcı Profile controlünü tıkladığında yukarıda görüleceği gibi Profile folderındaki details .cshtml ine yönlendiriliyor. Onun içini incelediğimizdede görüyoruz ki ; doğrudan buraya ProfileSummary ViewComponıntı çağırılmış.

Peki yukarıda anlattığımız neydi; ProfileSummaryVC çağırıldığında proje View Componentı uygulamak için " Views/Shared/Components// " adresinden aramsını yapıp ProfileSummary folderındaki Derfault.cshtml e ulaştı. Bu sayfayı tekrar inceleyelim. sayfanın üst kısmında bir foroğraf olacağı altında name ve UserName yazacağı görülecektir.Bunların altında bir if sorgusu ile eğer farklı bir kişinin profiline bakıyorsak FollowUserViewComponın kullanılması eğer kendi profilimize bakıyorsak settings controlü olduğunu göreceğiz. Ve devamındada Tweets Followers Following sayıları görülecektir.