Bloguma "En Çok Okunan Yazılar" bölümü eklemek istedim. Bu bölümün farklı sayfalarda yeniden kullanılabilir olması ve en önemlisi kendi verisini çekebilmesi gerekiyordu.

İşte tam bu noktada ASP.NET Core MVC'nin en kullanışlı özelliklerinden biri devreye giriyor: View Component.

View Component Nedir?

View Component, kendi C# mantığına ve kendi görünümüne sahip yeniden kullanılabilir bir UI bileşenidir.

Özellikle bir UI bölümünün, ana görünüme tamamen bağımlı kalmak yerine kendi verisini çekmesi veya hazırlaması gerektiğinde oldukça kullanışlıdır.

En sık sorulan sorulardan biri, bir View Component'in Partial View'den nasıl farklı olduğudur.

Partial View vs. View Component

Partial View

• Yeniden kullanılabilir bir HTML/UI parçasıdır.
• Genellikle ana görünüm veya controller tarafından hazırlanan verileri alır.
• Kendi bileşen sınıfı yoktur.
• Basit, yeniden kullanılabilir UI bölümleri için idealdir.

View Component

• Kendi C# sınıfına sahip yeniden kullanılabilir bir UI bileşenidir.
• Kendi verisini çekebilir veya hazırlayabilir.
• Kendi görünümü ve çalışma mantığı vardır.
• Kendi veri gereksinimleri olan UI bölümleri için idealdir.

Kısacası:

> Eğer ana görünüm veriyi ve işaretlemeyi hazırlıyorsa, Partial View genellikle uygun bir seçimdir. Eğer UI bileşeninin kendi verisini çekmesi veya hazırlaması gerekiyorsa, View Component daha iyi bir seçim olacaktır.

---

1. Bileşen Sınıfını Oluşturma

İlk olarak, projenin köküne bir ViewComponents klasörü ekleyin ve PopularPostsViewComponent adında bir sınıf oluşturun:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MyBlog.Models;

namespace MyBlog.ViewComponents
{
    public class PopularPostsViewComponent : ViewComponent
    {
        private readonly BlogContext _context;

        public PopularPostsViewComponent(BlogContext context)
        {
            _context = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(int count = 5)
        {
            var posts = await _context.Blog
                .Where(x => x.IsPublish)
                .OrderByDescending(x => x.ViewCount)
                .Take(count)
                .ToListAsync();

            return View(posts);
        }
    }
}

Burada dikkat edilmesi gereken üç önemli nokta var:

• ViewComponent'ten türetilmiştir. Bu, ASP.NET Core MVC'ye bu sınıfın bir View Component olduğunu söyler.
• Bağımlılıklar constructor üzerinden enjekte edilir. BlogContext, bağımlılık enjeksiyonu yoluyla sağlanır ve bileşenin veritabanına erişmesine olanak tanır.
• InvokeAsync, bileşen render edilirken çağrılır. Ayrıca count gibi parametreler alabilir, bu da aynı bileşenin farklı ayarlarla yeniden kullanılabilmesini sağlar.

---

2. Görünümü Oluşturma

View Component'ler belirli bir klasör yapısını takip eder.

MVC'nin görünümü otomatik olarak bulabilmesi için şu konuma oluşturun:

Views/Shared/Components/PopularPosts/Default.cshtml

Bileşen adı, ViewComponent soneki olmadan sınıf adına dayanır.

Yani:

PopularPostsViewComponent

şu hale gelir:

PopularPosts

Şimdi görünümü oluşturabiliriz:

@model List<MyBlog.Models.Blog>

@if (Model != null && Model.Any())
{
    <section class="popular-posts">
        <h3>🔥 En Çok Okunan Yazılar</h3>

        <ol class="popular-posts-list">
            @{ var rank = 1; }

            @foreach (var post in Model)
            {
                <li class="popular-posts-item">
                    <span class="popular-posts-rank">@rank</span>

                    <a asp-controller="Blog"
                       asp-action="Details"
                       asp-route-id="@post.Id">
                        @post.Title
                    </a>

                    <span class="popular-posts-views">
                        👁 @post.ViewCount
                    </span>
                </li>

                rank++;
            }
        </ol>
    </section>
}

Artık bileşenin kendi C# mantığı ve kendi Razor görünümü var.

---

3. Bileşeni Kullanma

Şimdi bileşeni herhangi bir Razor görünümüne tek bir satırla ekleyebiliriz:

@await Component.InvokeAsync("PopularPosts", new { count = 5 })

Ayrıca Tag Helper sözdizimi de mevcuttur:

<vc:popular-posts count="5"></vc:popular-posts>

Her iki yaklaşım da aynı View Component'i çalıştırır.

Bileşen, gerekli verileri çeker ve kullanıldığı yerde kendi görünümünü render eder.

Bu, her sayfada veritabanı sorgusunu veya HTML işaretlemesini tekrarlamamız gerekmediği anlamına gelir.

---

4. Stil ve Karanlık Mod

Bileşeni, sitede kullanılan aynı CSS değişkenleriyle stilize edebiliriz.

Örneğin:

.popular-posts {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .35);
}

.popular-posts-title {
    color: var(--text);
}

.popular-posts-views {
    color: var(--muted);
}

--card, --text ve --border gibi değişkenler zaten karanlık tema için farklı değerlere sahiptir, bu nedenle bileşen site temasını otomatik olarak takip eder ve ayrı karanlık mod stilleri gerektirmez.

---

Öğrendiklerim

• Yeniden kullanılabilirlik: Aynı bileşen, ana sayfada, bir blog yazısı sayfasında veya bir kenar çubuğunda kullanılabilir ve veri çekme kodunu tekrarlamaya gerek kalmaz.
• Sorumluluk ayrımı: Controller sayfa akışını yönetirken, bileşen kendi UI'sı için gerekli verileri hazırlamaktan sorumludur.
• Bakım kolaylığı: Eğer popüler yazıları hesaplama veya çekme şeklimiz değişirse, sadece bileşeni güncellememiz yeterlidir.
• Performans: Sorgu sadece yayınlanmış yazıları seçer ve döndürülen kayıt sayısını sınırlamak için Take(count) kullanır. Sık kullanılan bileşenler için, tekrarlanan veritabanı sorgularını azaltmak için önbelleğe alma da eklenebilir.

Son Düşünceler

View Component'ler, bir ASP.NET Core MVC uygulamasında yeniden kullanılabilir UI bölümlerini düzenli tutmanın basit ama güçlü bir yoludur.

Bu örnekte, "En Çok Okunan Yazılar" sorgusunu her sayfaya eklemek yerine, bir PopularPostsViewComponent oluşturdum ve ihtiyaç duyduğum her yerde yeniden kullandım.

Sonuç, daha temiz görünümler, daha az tekrarlanan kod ve net bir sorumluluğa sahip bir bileşen oldu.

Sonraki adımda muhtemelen aynı yaklaşımı "Son Yorumlar" veya "Kategoriler" için kullanacağım.