<\/div>\n

Merhaba,<\/p>\n

Klasik Asp.NET MVC mimarisinde kulland\u0131\u011f\u0131m\u0131z partial view yap\u0131lar\u0131na alternatif olarak Asp.NET Core 2 MVC mimarisinde View Component yap\u0131lar\u0131 geli\u015ftirilmi\u015ftir. Alternatif olarak nitelendiriyoruz \u00e7\u00fcnk\u00fc partial view yap\u0131lar\u0131 halen Asp.NET Core MVC mimarisinde de i\u015flevsel olarak mevcudiyetini korumaktad\u0131r. Dolay\u0131s\u0131yla bu i\u00e7eri\u011fimizde View Component yap\u0131lar\u0131n\u0131 inceleyecek ve partial view yap\u0131lar\u0131n\u0131n i\u015flevsel a\u00e7\u0131dan hangi durumlar\u0131n\u0131n, View Component yap\u0131lar\u0131n\u0131n geli\u015ftirilmesine neden oldu\u011funu a\u00e7\u0131\u011fa \u00e7\u0131karmaya \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n

\u0130lk olarak partial view yap\u0131s\u0131n\u0131 ne ama\u00e7la, nas\u0131l kullan\u0131yorduk bunun \u00fczerine dural\u0131m. Web sitemiz \u00fczerinde hemen hemen her mod\u00fclde yahut sayfada birebir benzer i\u015flemleri ger\u00e7ekle\u015ftireceksek yahut ayn\u0131 kodlar\u0131 \u00e7al\u0131\u015ft\u0131rmam\u0131z gerekecekse bunun i\u00e7in her sayfa \u00fczerinde hususi \u00e7al\u0131\u015fmak yerine, bu ihtiyac\u0131 partial view yap\u0131s\u0131 ile global hale getirip laz\u0131m olan her noktada ilgili partial view’i \u00e7a\u011f\u0131rarak ihtiyac\u0131m\u0131za d\u00f6n\u00fck genelle\u015ftirilmi\u015f bir \u00e7\u00f6z\u00fcm sa\u011flayabiliyorduk.<\/p>\n

Yap\u0131s\u0131 itibariyle partial view, ihtiyac\u0131m\u0131z\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde gideren bir \u00f6zellik olmas\u0131na ra\u011fmen server i\u015flemlerine ihtiya\u00e7 duyuldu\u011fu noktada MVC paternine fazladan y\u00fck bindirmekte ve l\u00fczumsuz bir maliyet israf\u0131na sebebiyet verebilmektedir. Bu maliyet, her server i\u015fleminde Controller katman\u0131yla ileti\u015fim kurmak zorunda kalmas\u0131ndan dolay\u0131 arz etmektedir. A\u015fa\u011f\u0131daki g\u00f6rseli incelerseniz e\u011fer en basitinden bir veritaban\u0131 i\u015flemi yapmak i\u00e7in bile Controller katman\u0131na eri\u015filmesi gerekilmekte ve o katman \u00fczerinden gerekli birimlere talepte bulunulmak mecburiyetindedir.<\/p>\n

$\"Asp.NET$ <\/a><\/p>\n

\u0130\u015fte bu duruma istinaden .NET geli\u015ftiricileri Asp.NET Core 2 MVC’de partial view’in bu y\u00fck\u00fcn\u00fc ortadan kald\u0131rabilmek i\u00e7in View Component yap\u0131lar\u0131n\u0131 geli\u015ftirmi\u015flerdir. View component yap\u0131lar\u0131 a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi bir i\u015flevselli\u011fe sahiptirler;
\n $\"Asp.NET$ <\/a>
\nYani herhangi bir server tabanl\u0131 i\u015flemde ya da g\u00f6rselde oldu\u011fu gibi ufak bir veritaban\u0131 i\u015fleminde Controller’a ba\u011flanma gere\u011fi duymaks\u0131z\u0131n direkt olarak ilgili katmana eri\u015fim sa\u011flayarak i\u015flemini icra edebilmekte ve gereken sonu\u00e7lar\u0131 elde edebilmektedir.<\/p>\n

View Component Olu\u015fturma<\/h4>\n

View Component yap\u0131lar\u0131n\u0131 projemizde “ViewComponents” ya da “Components” vs. gibi anlaml\u0131 isimde bir klas\u00f6r alt\u0131nda toplayarak a\u015fa\u011f\u0131daki kurallar \u00e7er\u00e7evesinde in\u015fa edebiliriz.<\/p>\n

\nOlu\u015fturulacak view component s\u0131n\u0131flar\u0131 a\u015fa\u011f\u0131daki gibi \u00fc\u00e7 farkl\u0131 varyasyonda tan\u0131mlanabilir.<\/p>\n

\r\n    public class ExampleViewComponent\r\n    {\r\n        ...\r\n    }\r\n<\/pre>\n<\/li>\n\n\r\n    public class Example : ViewComponent\r\n    {\r\n        ...\r\n    }\r\n<\/pre>\n<\/li>\n\n\r\n    [ViewComponent]\r\n    public class Example\r\n    {\r\n        ...\r\n    }\r\n<\/pre>\n<\/li>\n<\/ol>\n<\/li>\n\nBizler 2. varyasyonu baz alarak konumuza devam edelim. View component s\u0131n\u0131f\u0131 i\u00e7erisine “IViewComponentResult” tipinden de\u011fer d\u00f6nen “Invoke” isimli metodu ekliyoruz.<\/p>\n\r\n    public class EmployeeViewComponent : ViewComponent\r\n    {\r\n        DatabaseContext _dbContext;\r\n        public EmployeeViewComponent(DatabaseContext dbContext)\r\n        {\r\n            _dbContext = dbContext;\r\n        }\r\n\r\n        public IViewComponentResult Invoke()\r\n        {\r\n            IEnumerable<Employee> employeeList = _dbContext.Employees;\r\n            return View(employeeList);\r\n        }\r\n    }\r\n<\/pre>\nBurada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi \u00f6rnek view componentimizin “Invoke” metodunda veritaban\u0131 i\u015flemleri ger\u00e7ekle\u015ftirilmekte ve bu i\u015flemi Controller ile ili\u015fkiye girmeksizin sa\u011flamaktay\u0131z.\n<\/li>\n
\nProgramatik olarak olu\u015fturulan view componentin g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc, “Views” -> “Shared” dizininde “Components” isminde olu\u015fturulan klas\u00f6r i\u00e7erisine, view component ad\u0131yla birebir ayn\u0131 olacak \u015fekilde bir klas\u00f6r i\u00e7erisine a\u015fa\u011f\u0131daki gibi olu\u015fturuyoruz.
\n<\/a>
\nYa da
\nolu\u015fturulan view component herhangi bir controller’a \u00f6zel olu\u015fturulmu\u015f olabilir. Bu durumda ilgili controller dizinininde, “Components” isimli klas\u00f6r i\u00e7erisinde yine view component ad\u0131yla birebir ayn\u0131 olacak \u015fekilde klas\u00f6r tan\u0131mlayarak a\u015fa\u011f\u0131daki gibi olu\u015fturabilirsiniz.
\n<\/a><\/p>\nBurada compiler \u00e7a\u011fr\u0131lan view componenti her iki dizinde de arayacak ve buldu\u011funu render edecektir. Ayriyetten dikkat etmeniz gereken nokta \u015fu ki, view component isminde belirtilen “[…ViewComponent]<\/em>” eklerini bu noktalarda belirtmeden sadece ismini belirtiyoruz.<\/p>\n
View componentler birazdan g\u00f6rece\u011fimiz \u00fczere \u00e7a\u011f\u0131r\u0131m esnas\u0131nda aksisini belirtmedi\u011fimiz s\u00fcrece varsay\u0131lan olarak “Default.cshtml” dosyas\u0131n\u0131 i\u015fleyecektirler. Bizler yaz\u0131m\u0131z\u0131n devam\u0131nda farkl\u0131 isimde “.cshtml” dosyalar\u0131 \u00fczerinden de \u00f6rneklendirmede bulunaca\u011f\u0131z.<\/p>\n
\u015eimdi “Default.cshtml” dosyas\u0131n\u0131n i\u00e7erisinde a\u015fa\u011f\u0131daki gibi bir tasar\u0131m oldu\u011funu varsayal\u0131m ve anlat\u0131m\u0131m\u0131za devam edelim.<\/p>\n
\r\n@model IEnumerable<Employee>\r\n\r\n<ul>\r\n    @foreach (var employee in Model)\r\n    {\r\n        <li>@employee.Name @employee.SurName<\/li>\r\n    }\r\n<\/ul>\r\n<\/pre>\n<\/li>\n\nProgramatik ve g\u00f6rsel olarak tasarlad\u0131\u011f\u0131m\u0131z view componenti kullanabilmek i\u00e7in tek yap\u0131lmas\u0131 gereken ilgili noktada a\u015fa\u011f\u0131daki \u015fekilde \u00e7a\u011f\u0131rmakt\u0131r.<\/p>\n\r\n@await Component.InvokeAsync("Employee")\r\n<\/pre>\nDikkat ederseniz burada da “[…ViewComponent]<\/em>” ekini kullanmaks\u0131z\u0131n \u00e7a\u011f\u0131r\u0131m ger\u00e7ekle\u015ftirilmektedir.<\/p>\n
Bu \u015fekilde kullan\u0131ld\u0131\u011f\u0131 takdirde netice olarak view component \u00e7al\u0131\u015facak ve beklenen sonucu ekrana yans\u0131tacakt\u0131r.\n<\/li>\n
\nPeki farkl\u0131 bir ‘.cshtml’ dosyas\u0131nda \u00e7al\u0131\u015f\u0131rsak e\u011fer<\/strong> durumuna kar\u015f\u0131l\u0131k a\u015fa\u011f\u0131daki \u00f6rnek kodu baz al\u0131rsak;<\/p>\n\r\n.\r\n.\r\n.\r\n        public IViewComponentResult Invoke()\r\n        {\r\n            return View();\r\n        }\r\n.\r\n.\r\n.\r\n<\/pre>\nView componentimizin “Invoke” metodu i\u00e7erisinde “View()” metodunu direkt olarak yukar\u0131daki gibi \u00e7a\u011f\u0131r\u0131rsak e\u011fer varsay\u0131lan olarak “Default.cshtml” dosyas\u0131 render edilecektir. Yok e\u011fer;<\/p>\n
\r\n.\r\n.\r\n.\r\n        public IViewComponentResult Invoke()\r\n        {\r\n            return View("example");\r\n        }\r\n.\r\n.\r\n.\r\n<\/pre>\n\u015feklinde \u00e7a\u011f\u0131r\u0131rsak “example.cshtml” dosyas\u0131n\u0131 arayacak ve render edecektir.\n<\/li>\n
\nInvoke metoduna nas\u0131l parametre g\u00f6nderebilirim?<\/strong> sorusuna istinaden ise;<\/p>\n\r\n.\r\n.\r\n.\r\n        public IViewComponentResult Invoke(int id)\r\n        {\r\n            return View();\r\n        }\r\n.\r\n.\r\n.\r\n<\/pre>\n\r\n@await Component.InvokeAsync("Employee", new { id = 5 })\r\n<\/pre>\n\u015feklinde bir \u00e7al\u0131\u015fma sergileyebiliriz.\n<\/li>\n<\/ul>\n
Evet, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Asp.NET Core view component yap\u0131lar\u0131 ile partial view yap\u0131s\u0131ndaki controller ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 ortadan kald\u0131rmakta ve sistem \u00fczerindeki l\u00fczumsuz i\u015f ve yersiz maliyeti minimize ederek bizlere sunmaktad\u0131r.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Klasik Asp.NET MVC mimarisinde kulland\u0131\u011f\u0131m\u0131z partial view yap\u0131lar\u0131na alternatif olarak Asp.NET Core 2 MVC mimarisinde View Component yap\u0131lar\u0131 geli\u015ftirilmi\u015ftir. Alternatif olarak nitelendiriyoruz \u00e7\u00fcnk\u00fc partial view yap\u0131lar\u0131 halen Asp.NET Core MVC mimarisinde de i\u015flevsel...<\/p>\n","protected":false},"author":1,"featured_media":9596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2668,2656],"tags":[2679,2652,2651,2681,2680],"class_list":["post-9733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-core-2","category-asp-net-core-2-mvc","tag-asp-net-core","tag-asp-net-core-2","tag-asp-net-core-2-mvc","tag-partial-view","tag-view-component"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9733"}],"version-history":[{"count":39,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9733\/revisions"}],"predecessor-version":[{"id":9777,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9733\/revisions\/9777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/9596"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}