1. Ana Sayfa
  2. ASP.Net
  3. .Net Core ViewComponents Kullanımı

.Net Core ViewComponents Kullanımı

082620_1153_NetCoreView1.jpg

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 ( kullananlar için terminal) açınız.

Sırası ile komutlarımız,

  1. cd Desktop => ilgili dizinimizi masaüstü olarak ayarlıyalım.
  2. mkdir StateManagement => Project adında bir klasör oluşturalım
  3. cd Project => dizin olarak, oluşturduğumuz klasörü belirleyelim
  4. new mvc -n ViewComponentApp -f netcoreapp3.1 => dotnet cli komutlarını kullanarak 3.1 versiyonu ile yeni bir mvc projesi oluşturuyoruz.
  5. cd ViewComponentApp => dizinimizi proje ana dizini olarak belirliyoruz.
  6. 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.

 

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.

 

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.

 

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.

 

Yukarıda farklı kullanım şekillerine değindik. Default olarak içerisindeki tasarım veya ’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.

 

Sonrasında View sayfasına gelelim ve aşşağıdaki düzenlemeyi yapalım.

 

Bir sonraki makalede görüşmek üzere

Bu konuyla ilgili sorularınızı https://forum.mshowto.org linkini kullanarak ulaşacağınız forum sayfamızda sorabilirsiniz.

Referanslar:
www.mshowto.org

www.fatihdemirci.net

TAGs: , ViewComponents Nedir

Yorum Yap

Yazar Hakkında

1982 Ankara doğumluyum, Lise ve Üniversite Eğitimini Açık Öğretim üzerinden tamamladım ve 2009 yılında BilgeAdam ile yazılım hayatına atıldım Öğrenci olarak başladığım kurumda 2009 yılından bu yana farklı görevlerde çalıştım. Şuan Bilgeadam beşiktaş şubesinde aktif olarak danışmanlık ve yazılım eğitmenliği yapmaktayım. Yeni teknolojileri araştırıp öğrenmeyi seven biriyim. İşim gereği hem geliştirdiğim projeler olsun eğitim verdiğim öğrenciler olsun aktif olarak kendimi güncel tutmak işimin gereği ve bu bildiklerimi paylaşmaktan mutluluk duyuyorum.

Yorum Yap