Asp.NET Core 2 MVC’de View Component Yapısı

Gençay

6 yıl önce

Merhaba,

Klasik Asp.NET MVC mimarisinde kullandığımız partial view yapılarına alternatif olarak Asp.NET Core 2 MVC mimarisinde View Component yapıları geliştirilmiştir. Alternatif olarak nitelendiriyoruz çünkü partial view yapıları halen Asp.NET Core MVC mimarisinde de işlevsel olarak mevcudiyetini korumaktadır. Dolayısıyla bu içeriğimizde View Component yapılarını inceleyecek ve partial view yapılarının işlevsel açıdan hangi durumlarının, View Component yapılarının geliştirilmesine neden olduğunu açığa çıkarmaya çalışacağız.

İlk olarak partial view yapısını ne amaçla, nasıl kullanıyorduk bunun üzerine duralım. 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.

View Component Oluşturma

View Component yapılarını projemizde “ViewComponents” ya da “Components” vs. gibi anlamlı isimde bir klasör altında toplayarak aşağıdaki kurallar çerçevesinde inşa edebiliriz.

Oluşturulacak view component sınıfları aşağıdaki gibi üç farklı varyasyonda tanımlanabilir.

    public class ExampleViewComponent
    {
        ...
    }

    public class Example : ViewComponent
    {
        ...
    }

    [ViewComponent]
    public class Example
    {
        ...
    }

Bizler 2. varyasyonu baz alarak konumuza devam edelim. View component sınıfı içerisine “IViewComponentResult” tipinden değer dönen “Invoke” isimli metodu ekliyoruz.

    public class EmployeeViewComponent : ViewComponent
    {
        DatabaseContext _dbContext;
        public EmployeeViewComponent(DatabaseContext dbContext)
        {
            _dbContext = dbContext;
        }

        public IViewComponentResult Invoke()
        {
            IEnumerable<Employee> employeeList = _dbContext.Employees;
            return View(employeeList);
        }
    }

Burada gördüğünüz gibi örnek view componentimizin “Invoke” metodunda veritabanı işlemleri gerçekleştirilmekte ve bu işlemi Controller ile ilişkiye girmeksizin sağlamaktayız.

Programatik olarak oluşturulan view componentin görüntüsünü, “Views” -> “Shared” dizininde “Components” isminde oluşturulan klasör içerisine, view component adıyla birebir aynı olacak şekilde bir klasör içerisine aşağıdaki gibi oluşturuyoruz.

Ya da
oluşturulan view component herhangi bir controller’a özel oluşturulmuş olabilir. Bu durumda ilgili controller dizinininde, “Components” isimli klasör içerisinde yine view component adıyla birebir aynı olacak şekilde klasör tanımlayarak aşağıdaki gibi oluşturabilirsiniz.

Burada compiler çağrılan view componenti her iki dizinde de arayacak ve bulduğunu render edecektir. Ayriyetten dikkat etmeniz gereken nokta şu ki, view component isminde belirtilen “[…ViewComponent]” eklerini bu noktalarda belirtmeden sadece ismini belirtiyoruz.

View componentler birazdan göreceğimiz üzere çağırım esnasında aksisini belirtmediğimiz sürece varsayılan olarak “Default.cshtml” dosyasını işleyecektirler. Bizler yazımızın devamında farklı isimde “.cshtml” dosyaları üzerinden de örneklendirmede bulunacağız.

Şimdi “Default.cshtml” dosyasının içerisinde aşağıdaki gibi bir tasarım olduğunu varsayalım ve anlatımımıza devam edelim.
```
@model IEnumerable<Employee>

<ul>
    @foreach (var employee in Model)
    {
        <li>@employee.Name @employee.SurName</li>
    }
</ul>
```
Programatik ve görsel olarak tasarladığımız view componenti kullanabilmek için tek yapılması gereken ilgili noktada aşağıdaki şekilde çağırmaktır.
```
@await Component.InvokeAsync("Employee")
```
Dikkat ederseniz burada da “[…ViewComponent]” ekini kullanmaksızın çağırım gerçekleştirilmektedir.

Bu şekilde kullanıldığı takdirde netice olarak view component çalışacak ve beklenen sonucu ekrana yansıtacaktır.
Peki farklı bir ‘.cshtml’ dosyasında çalışırsak eğer durumuna karşılık aşağıdaki örnek kodu baz alırsak;
```
.
.
.
        public IViewComponentResult Invoke()
        {
            return View();
        }
.
.
.
```
View componentimizin “Invoke” metodu içerisinde “View()” metodunu direkt olarak yukarıdaki gibi çağırırsak eğer varsayılan olarak “Default.cshtml” dosyası render edilecektir. Yok eğer;
```
.
.
.
        public IViewComponentResult Invoke()
        {
            return View("example");
        }
.
.
.
```
şeklinde çağırırsak “example.cshtml” dosyasını arayacak ve render edecektir.

Invoke metoduna nasıl parametre gönderebilirim? sorusuna istinaden ise;

.
.
.
        public IViewComponentResult Invoke(int id)
        {
            return View();
        }
.
.
.

@await Component.InvokeAsync("Employee", new { id = 5 })

şeklinde bir çalışma sergileyebiliriz.

Evet, gördüğünüz gibi Asp.NET Core view component yapıları ile partial view yapısındaki controller bağımlılığını ortadan kaldırmakta ve sistem üzerindeki lüzumsuz iş ve yersiz maliyeti minimize ederek bizlere sunmaktadır.

İlgilenenlerin faydalanması dileğiyle…

Sonraki yazılarımda görüşmek üzere…

İyi çalışmalar dilerim…