# 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.

![](/files/-MTLR1__hHdACuUQBotz)

İş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;

![](/files/-MTLRAZY3X3wEHq1aEtV)

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ı;

![](/files/-MTKz9-tIxGqJfp5MEr-)

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. 

![](/files/-MTL-cyv5zOdTzr2j57f)

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.)

![](/files/-MTL3Ein8-QEt0MF5_Rd)

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.

![](/files/-MTL31L4Yha_4gnXC_zl)

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

![](/files/-MTLHP_CV5js_7m_YBK1)

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

![](/files/-MTL6LbHZPg1M-R4gJwn)

![](/files/-MTL6PM2CTm4x14_VaUW)

Ş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ış.

![](/files/-MTLEijKjIwnBR-WUlQt)

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.

![](/files/-MTLG9MMFOJMPijH6fUO)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ridvanorun.gitbook.io/asp-net-core/view-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.