ViewComponent, Asp.NET Core MVC’de tanıtıldı. Partial View yapısına oldukça fazla benzer ve partial view’in yapabileceği herşeyi yapabilir hatta daha da fazlasını yapar. ViewComponents, controller metotları için doğrudan erişilemeyen uygulama alanlarının çok güçlü UI yapı taşlarıdır. Şöyle ki bilindiği üzere partial view’e model taşımak için ana bir controller yapısına ihtiyaç vardır. View Component ile bağımlılık ortadan kaldırılmıştır. Model işlemleri sırasında herhangi bir controller’a ihtiyaç duymadan direk olarak ilgili katmana erişim sağlayarak gerekli işlemleri yapabilir.
Bir sosyal iconlar sayfamız olduğunu ve simgeleri dinamik olarak gösterdiğimizi varsayalım. Sosyal iconların rengi, URL’leri ve adları için ayrı ayarlarımız var ve simgeleri dinamik olarak oluşturmamız gerekiyor. Artık dinamik öğelerinizi bir ViewCompnent’te oluşturmak ve bir view’dahil etmek çok kolaydır.
ViewComponent Oluşturma
Yeni bir ASP.NET Core MVC uygulaması oluşturun ve bu uygulamayı çalıştırın. Aşağıdaki gibi boş bir sayfa görebilirsiniz.
Verileri dinamik olarak göstermeliyiz. Gerçek senaryolarda, dinamik veriler çoğunlukla veri tabanından gelir, ancak uygulamamız için bir veri tabanı kullanmıyoruz ve verileri oluşturmak için bir model oluşturacağız. Öyleyse Models klasörümüzün içerisine bir sınıf oluşturalım. SocialIcon adında bir sınıf ekleyin ve içine aşağıdaki alanları ve metotları ekleyin.
public class SocialIcon
{
public int ID { get; set; }
public string IconName { get; set; }
public string IconBgColor { get; set; }
public string IconTargetUrl { get; set; }
public string IconClass { get; set; }
public static List<SocialIcon> AppSocialIcons()
{
List<SocialIcon> icons = new List<SocialIcon>();
icons.Add(new SocialIcon { ID = 1, IconName = "Google", IconBgColor = "#dd4b39", IconTargetUrl = "www.google.com", IconClass = "fa fa-google" });
icons.Add(new SocialIcon { ID = 2, IconName = "Facebook", IconBgColor = "#3B5998", IconTargetUrl = "www.facebook.com", IconClass = "fa fa-facebook" });
icons.Add(new SocialIcon { ID = 3, IconName = "Linked In", IconBgColor = "#007bb5", IconTargetUrl = "www.linkedin.com", IconClass = "fa fa-fa-linkedin" });
icons.Add(new SocialIcon { ID = 4, IconName = "YouTube", IconBgColor = "#007bb5", IconTargetUrl = "www.youtube.com", IconClass = "fa fa-youtube" });
icons.Add(new SocialIcon { ID = 5, IconName = "Twitter", IconBgColor = "#55acee", IconTargetUrl = "www.twitter.com", IconClass = "fa fa-twitter" });
return icons;
}
}Şimdi projemize ViewComponent adli bir klasör oluşturalım ve SocialLinksViewComponent adında bir ViewComponent sınıfı ekleyelim. (ViewComponent’i ismiyle eklemeyi unutmayın, uygulamamızda SocialLinks ismiyle kullanacağız ve ViewComponent’i isim sistemi ile yazarak ViewComponent olduğunu anlayacak ve ona göre işlem yapılacaktır).
ViewComponents, ViewComponent temel sınıfından türetilen bir C# sınıfından üretilir ve genellikle işaretleme oluşturmak için bir Razor dosyalarıyla ilişkilendirilir. Tıpkı controller’lar gibi, ViewComponents da constructor injection’u destekler. SocialLinksViewComponent’i uygulamak için az önce oluşturduğunuz sınıfınıza aşağıdaki kodu ekleyin:
public class SocialLinksViewComponent : ViewComponent
{
List<SocialIcon> socialIcons = new List<SocialIcon>();
public SocialLinksViewComponent()
{
socialIcons = SocialIcon.AppSocialIcons();
}
public async Task<IViewComponentResult> InvokeAsync()
{
var model = socialIcons;
return await Task.FromResult((IViewComponentResult)View("SocialLinks", model));
}
}Bir sınıf oluşturduk ve SocialIcon sınıfından bir liste ekledik. Constructor’da listemizi verilerle yükledik (constructor’a eklemek zorunlu değildir, InvokeAsync yönteminde de veri ekleyebilirsiniz ve constructor’a gerek kalmaz). Model nesnemizdeki verileri döndürecek bir Razor View yapalım.
Views > Shared’a Components adıyla bir klasör ekledik (Components adı zorunludur.). Sonrasında Components klasörünün içerisine SocialLinks adlı bir klasör daha ekledik ve bu klasöre bir SocialLinks.cshtml adında bir Razor View oluşturup ve aşağıdaki kodu ekledik.
@model IList<ProjectName.Models.SocialIcon>
<div class="col-md-12" style="padding-top:50px;">
@foreach (var icon in Model)
{
<a style="background:@icon.IconBgColor" href="@icon.IconTargetUrl">
<i class="@icon.IconClass"></i>
@icon.IconName
</a>
}
</div> Şimdi bu ViewComponent’i istediğimiz sayfada ihtiyaç duyulan yerde kullanalım. Bunu Index.cshtml sayfasından çağırıyorum, sadece aşağıdaki kod ile uygulamanın herhangi bir yerinde kullanabilirsiniz.
@{
await Component.InvokeAsync("SocialLinks");
}Bu yukarıdaki kod parçacığı, Razor View’lerimizde bir ViewComponent olarak adlandırabilmemizin yoludur. İstenen işaretlemeyi oluşturacaktır. Parametreleri ViewComponents’ta aşağıdaki gibi de iletebilirsiniz:
@(await Component.InvokeAsync("SocialLinks", new { IconsToShow = 5 }))Home:
@{
ViewData["Title"] = "Home Page";
}
<style>
a {
padding: 5px;
margin: 5px;
color: white;
}
.main-div {
margin-bottom: 20px;
padding-bottom: 20px;
}
</style>
<div class="text-center main-div">
<h1 class="display-4">Welcome</h1>
<h3>View Component Example</h3>
@(await Component.InvokeAsync("SocialLinks"))
</div>
Sonuç:
