Asp.Net Core Mvc’de View Component Yapısı ile Çalışmak
Selamlar,
Bu makalede Asp.Net Core Mvc’de View Component yapısını derinlemesine inceliyor olacağız.Bir önceki .Net Core Nedir? makaleme buradan ulaşabilirsiniz.
Asp Net Mvc ile uygulama geliştirmiş birisinin çokta yabancı olmadığı bir yapı diyebiliriz. Bunun nedeni ise Asp Net Mvc tarafında bu yapının hemen hemen aynısı olan Partial View yapılarının mevcut olmasıdır. View Component yapısını incelerken Partial View kullanımış bir geliştiricinin aklına
“Neden View Component?” yada “Asp Net Core Mvc de Partial View yapısının yerine mi geldi?” gibi sorular gelebilir.Çok normaldir ki kullanım amacı olarak birebir aynı olan bu iki yapının birbirinden ayrılmasını sağlayan özelliği View Component tarafında server tarafa daha az yük bindirilmesinin amaçlanmış olmasıdır. Partial View içerisinde tanımlanan bir method local function olarak kullanılır.Bu methodların dışarıdan bire bire tetiklenmesi ve kullanılması mümkün değildir.
Örnek:“Customer listemiz var ve her eklenen datadan sonra listenin anlık olarak güncellenmesini ve bu güncelleme sırasında zaman kaybı olmadan yapılmasını istiyoruz”.
Çözüm:“Bahsettiğim mevcut durumun üstesinden gelmek için CustomerController içerisinde PartialViewResult dönen bir method yazılır. Method ajax ile tetiklenir ve dönen Partial append edilir.Bunun gibi bir çok durumda benzer süreçler işlemektedir.
Buda uygulamanın Controller ile çok fazla haberleşmesini ve bu neticede performans kayıplarını beraberinde getirmektedir. View Component yapısının tamda bu noktada Partial View yapısındaki bu dezavantajı ortadan kaldırmaktadır.
Gelin hep beraber Asp Net Core Mvc tarafında View Component yapısını uçtan uca beraber inceleyelim.
NOT:View Component yapıları Partial View yapılarının yerine gelmemiştir.Aksine Partial View yapılarına alternatif olarak geliştirilmiş yapılardır.Asp Net Core Mvc tarafında da Partial View yapısının kullanımına devam edilmektedir.
Projenin Oluşturulması
NOT:Konunun daha iyi anlaşılması açısından senaryomuzu en basit şekilde ele alacağız. Siz dilerseniz daha karmaşık bir yapıyı tercih edebilirsiniz.Buradaki amaç konunun net bir şekilde anlaşılıp yazının adresini bulması olacaktır.
Senaryo
Özel bir eğitim kurumunun süreçlerinin yönetildiği portal üzerinden girilen duyuruların kullanıcı tarafından erişimi olan sayfalarda görünmesini ele almaktır.Girilen duyuru Öğrenciler ve Eğitmenler tarafından görünebilirken aynı portal üzerinde kurum puanlamasını yapan denetmenler tarafında görünmemesi gerekmektedir.
View Compnent’in Oluşturulması
- Proje içersine Components isminde klasör oluşturuyoruz. View Componentlerimizi burada tutacağız.
- Announcement sınıfımızı ViewComponent sınıfından inherit ediyoruz. Dilersek Attribute olarakda
işaretleyebilirz. Yukarıdaki videoda her iki kullanımda mevcuttur. - Announcement sınıfı içerinde InvokeAsync(); methodunu oluşturuyoruz.Bu method View tarafta çağırım yapacağımız method. Ben şimdilik null dönüyorum ilerleyen aşamalarda kodlamasını yapacağız.
- Son olarak Views/Shared içerisine gidip Components/Announcement/Default.cshtml oluşturuyoruz.
NOT:
View Component yapısında bir çağırım esnasında Default.cshml dosyasını arar.
Bu arama esnasında Views/Shared/Components/ComponentName/Default yada Views/ControllerName/Components/ComponentName/Default yollarında arar ve ilk bulunan yolda render eder.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | [ViewComponent] public class Announcement : Microsoft.AspNetCore.Mvc.ViewComponent { public async Task<IViewComponentResult> InvokeAsync() { var announcements = new List<Announcements> { new Announcements { Id=1,Title="Title 1",Description="Description 1", ReleaseDate = DateTime.Now }, new Announcements { Id=2,Title="Title 2",Description="Description 2", ReleaseDate = DateTime.Now.AddDays(1) }, new Announcements { Id=3,Title="Title 3",Description="Description 3", ReleaseDate = DateTime.Now.AddDays(2) }, new Announcements { Id=4,Title="Title 4",Description="Description 4", ReleaseDate = DateTime.Now.AddDays(3) }, }; return View(announcements); } } |
Component sınıfımızın son hali yukarıdaki gibi olacaktır. Static bir liste doldurup Default.cshtml view’ına model olarak gönderecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | @model List<Announcements> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Duyular Listesi </title> </head> <body> <ul> @foreach (var item in Model) { <li>@item.Title</li> <li>@item.Description</li> <li>@item.ReleaseDate.ToShortDateString()</li> } </ul> </body> </html> |
Default.cshtml view’ı ise gelen modeli foreach yardımı ile dönüp ekrana çıktı olarak basıcak ve işlem sonlanacaktır.
View Component Çağırımı
1 | @await Component.InvokeAsync("Announcement"); |
Dikkat ederseniz View Component’in çağırımı esnasından Default.cshtml ismi ile bir çağırım gerçekleştirmedik. Direk olarak Component’in ismini verdik.View Component render aşamasında biraz önce üstte belirtiğimiz yollarda Default.cshtml aradı ve ilk bulunan yolda kendisi render etti. Bu noktada oluşturulan View Component’in klasör yapısının render aşamasından view’in aranması ve işlenmesi konusunda belirliyici faktör olduğunu söylebiliriz.
NOT:
View Component yapısında aksi belirtilmediği sürece klasör yapısında Default.cshtml aranmaktadır.Bir başka view’i render etmek istersek bunu yine InvokeAsync metodu içerisinde belirtiyoruz.
Farklı Bir View’ı Çalıştırmak
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | [ViewComponent] public class Announcement : Microsoft.AspNetCore.Mvc.ViewComponent { public async Task<IViewComponentResult> InvokeAsync() { var announcements = new List<Announcements> { new Announcements { Id=1,Title="Title 1",Description="Description 1", ReleaseDate = DateTime.Now }, new Announcements { Id=2,Title="Title 2",Description="Description 2", ReleaseDate = DateTime.Now.AddDays(1) }, new Announcements { Id=3,Title="Title 3",Description="Description 3", ReleaseDate = DateTime.Now.AddDays(2) }, new Announcements { Id=4,Title="Title 4",Description="Description 4", ReleaseDate = DateTime.Now.AddDays(3) }, }; return View("Test",announcements); } } |
Yukarıdaki gibi bir kullanım ile InvokeAsync(); metodu çalıştırılması esnasında Test.cshtml render edilicektir.
“Senaryomuz üzerinde biraz değişiklik yapalım. Mevcut durumda Öğrenciler tüm duyuruları görebilmekte.Bizim istediğimiz ise Öğrenciler sadece sınıflarına atanan duyuruları görebilmesini sağlamak.”
1 2 3 4 5 6 7 8 | public class Announcements { public DateTime ReleaseDate { get; set; } public int Id { get; set; } public string Title { get; set; } public string Description { get; set; } public int ClassId { get; set; } } |
Announcement sınıfımızı yukarıdaki gibi revize ediyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | [ViewComponent] public class Announcement : Microsoft.AspNetCore.Mvc.ViewComponent { public async Task<IViewComponentResult> InvokeAsync(int classId) { var announcements = new List<Announcements> { new Announcements { Id=1,Title="Title 1",Description="Description 1", ReleaseDate = DateTime.Now,ClassId = 1 }, new Announcements { Id=2,Title="Title 2",Description="Description 2", ReleaseDate = DateTime.Now.AddDays(1),,ClassId = 3 }, new Announcements { Id=3,Title="Title 3",Description="Description 3", ReleaseDate = DateTime.Now.AddDays(2),ClassId = 3 }, new Announcements { Id=4,Title="Title 4",Description="Description 4", ReleaseDate = DateTime.Now.AddDays(3),ClassId = 4 }, }; var newAnnouncements = announcements.Where(x => x.ClassId == classId).ToList(); return View("Test", newAnnouncements); } } |
View Component Çağırımı
1 | @{ @(await Component.InvokeAsync("Announcement",new {classId=3}))} |
Kodumuzun son halinin inceleyecek olursak.Öğrenci sisteme giriş yaptığı anda Öğrencinin sınıfı bulunur ve parametre olarak View Component’e gönderilir. View Component içerisindeki InvokeAsync(); metodu içerisinde Where(); metodu ile koşul uygulanır dönen data View’a gönderilir.
Bu işlemlerden sonra öğrencilerin kendi sınıfına atanan duyuruları görmesini sağlanır. Bu kullanım ile View Component’lere parametre nasıl
gönderilir onuda senaryomuz üzerinde gerçekleştirmiş olduk.
Geldik bir makalenin daha sonuna. Bu makalemizde Asp.Net Core Mvc ‘de View Component yapısını uçtan uca incelemeye çalıştık. Umarım faydalı olmuştur. Bir başka makalede görüşmek üzere. Hoşçakalın 🙂
Çok faydalı bir anlatım olmuş teşekkür ederim.
Merhaba faydalı olmasına çok sevindim 🙂
Teşekkürler
Faydalanmana çok sevindim. Ben teşekkür ederim 😊
Elinize sağlık