Merhabalar, bu yazımda sizlere ViewComponent nedir? Neden kullanmalıyız anlatıyor olacağım. Bir web uygulaması geliştirirken birden fazla prensip üzerinden gidiyoruz, bu yazımda bunlardan birine örnek olabilecek bir konu ile ilgili sizlere bilgiler veriyor olacağım. DRY (Don’t Repeat Yourself) prensibinden’de yola çıkarak, bir tasarımı tekrar tekrar yazmak yerine o tasarımı bir component haline getirerek uygulama içerisinde istediğimiz kadar kullanabiliyoruz. Böylelikle bir değişiklik anında tekrar alanları düzenlemektense Component üzerinde değişiklik yapmamız yeterli olacaktır.
Konuyu daha anlaşılır bir hale getirebilmek için, bir proje üzerinden ilerleyelim.
Projenizi visualstudio kullanarak açabilirsiniz. Makale boyunca tüm örnekleri CLI kullanarak visualstudio üzerinden anlatıyor olacağım..
Öncelikle yeni bir command prompt (mac kullananlar için terminal) açınız.
Sırası ile komutlarımız,
- cd Desktop => ilgili dizinimizi masaüstü olarak ayarlıyalım.
- mkdir StateManagement => Project adında bir klasör oluşturalım
- cd Project => dizin olarak, oluşturduğumuz klasörü belirleyelim
- dotnet new mvc -n ViewComponentApp -f netcoreapp3.1 => dotnet cli komutlarını kullanarak 3.1 versiyonu ile yeni bir mvc projesi oluşturuyoruz.
- cd ViewComponentApp => dizinimizi proje ana dizini olarak belirliyoruz.
- code . => code(boşluk).(nokta) diyerek vscode’u proje dizininde açıyoruz.
Projemizi oluşturduktan sonra, içerisine ViewComponents adında bir klasör ekleyelim ve içerisine Sample adında bir class ekleyelim ve ViewComponent sınıfından miras verelim.
using Microsoft.AspNetCore.Mvc;
namespace ViewComponentApp.ViewComponents
{
public class Sample : ViewComponent
{
}
}
Component içerisini daha sonra düzenleyeceğiz, yukarıdaki gibi düzenledikten sonra, Views/Shared kalsörü içerisine Sample adında bir klasör açınız ve içerisinde Default.cshtml adında bir view ekleyiniz. Burda önemli olan nokta View’ın isminin Default olmasıdır. Farklı bir isim vermeyiniz.
Default.cshtml dosyasına geliniz ve içerisinde geçici olarak bir başlık ekleyelim.
<h1>msHOWTO</h1>
Yukarıdaki İşlemleri yaptıktan sonra Component’I kullanmaya başlayabiliriz. Önecelikle hangi View içerisinde kullanacaksak, onun içerisinde tanımlama yapmamız gerekecek. HomeController içerisindeki Index View’ına gelerek tanımlama işlemini yapalım.
<div class="text-center">
@await Component.InvokeAsync("Sample")
</div>
Yukarıdaki gibi tanımlama işlemini yaptığımızda Component içerisindeki tasarımımız artık View üzerinde render edilmiş olacaktır.
Resim – 1
Kullanım olarak Asenkron bir şekilde hazırladığımız Component’i render etmiş olduk. Farklı bir şekilde kullanmak istersek aşşağıdaki gibi kullanabiliriz.
<div class="text-center"> <vc:sample> </vc:sample> </div>
Yukarıda farklı kullanım şekillerine değindik. Default olarak içerisindeki tasarım veya model’i render ediyoruz ama, bu Component’e tanımlandığı yerden data göndermek isterse, aşşağıdaki gibi Component’i düzenlememiz yeterli olacaktır.
Öncelikle Sample.cs içerisine gelelim ve gerekli düzenlemeleri yapalım.
public class Sample : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string param)
{
string result = $"ViewComponent Değeri : {param}";
return View(model :result);
}
}
Sonrasında View sayfasına gelelim ve aşşağıdaki düzenlemeyi yapalım.
@model string
<h1>@Model</h1>
Yukrıdaki İşlemleri yaptıktan sonra, Index.cshtml'e gelelim ve tanımlama alanlarını düzenleyelim.
<div class="text-center">
@await Component.InvokeAsync("Sample","msHOWTO")
</div>
<div class="text-center">
<vc:sample param="msHOWTO"> </vc:sample>
</div>
Bir sonraki makalede görüşmek üzere
Bu konuyla ilgili sorularınızı alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.
Referanslar:
www.mshowto.org
www.fatihdemirci.net
TAGs: ViewComponents Kullanımı, ViewComponents Nedir
