Tag Helpers, razor sayfalardaki server-side kodları HTML elementleri olarak oluşturmayı sağlayan; View’ın daha okunabilir, anlaşılabilir ve kolay geliştirilebilir hale gelmesine olanak tanıyan, .NET Core ile birlikte gelip, Html Helper kullanımlarının yerini almış yapılardır. Html Helper yapılarından farklı olarak, tüm element yerine sadece attribute oluştururlar.

Tag helperların projede kullanılabilmesi için view sayfalarına eklenmesi gerekir. Aşağıdaki satırın View/_ViewImports.cshtml dosyasına eklenmesi tag helperların tüm viewlarda kullanılabilmesini sağlar.

Tag helperların proje genelinde kullanımının kaldırılması isteniyorsa @removeTagHelper, element düzeyinde kaldırılması isteniyorsa ise ilgili elementim başında ! (ünlem işareti) kullanılabilinir.

Form Tag Helpers

Form Tag Helper, form elementinde bir action attribute oluşturur. Form içinde, input elementleri için tag helperlar kullanılırsa, model özellikleri elemente otomatik olarak atanır. Ayrıca CSRF’i önlemek için formda gizli bir Request Verification Token oluşturur.

Request Verification Token

Input Tag Helper

.NET MVC’de kullanabildiğimiz @Html.EditorFor(m => m.Name) ifadesinin alternatifi olarak kullanılabilinir.

Cache Tag Helpers

Html yapısının bir kısmını cache üzerinde tutarak performansı arttırmak için kullanılır. Server üzerinde (Internal ASP.NET Core cache provider) tutulduğu için, tüm kullanıcılar aynı şeyi görürler.

TextArea Tag Helper

Input tag helper ile kullanımı oldukça benzerdir. Aşağıdaki gibi bir modelimiz olduğunu düşünelim:

Bu modele karşılık gelen razor kodunu şu şekilde yazarsak:

Html çıktısında modelde belirttiğimiz propertylerin oluştuğunu görebiliriz.

Output

Environment Tag Helpers

Belirlenen hosting ortamına göre, içindeki öğelerin dahil edilip edilmeyeceğini belirler. Örneğin geliştirme ortamında olmasını istediğimiz fakat product sürümünde görünmesini istemediğimiz bir html parçası varsa, environment tag helperlar ile belirlenebilir.

Image Tag Helpers

Tarayıcılar, statik dosyaları ismine göre lokal cache üzerinde saklarlar.
Sonrasında client aynı yol üzerinde (img/01.jpg) olan bir istekle karşılaştığında, tekrar istek göndermez ve local cache üzerinden çeker. Fakat bu durumda şöyle bir sıkıntıyla karşılaşılır : Eğer dosyanın adı değiştirilmeden içeriği değiştirilirse, tarayıcı sadece dosya yoluna ve ismine baktığından dolayı bu dosyayı değişmiş olarak algılamaz ve eski resmi cache üzerinden çekmeye devam eder. Bunun sonucunda server tarafında dosya değişmiş olsa da, client bu değişimi görmeyecektir. Bunu engellemek için asp-append-version tag helper’ı kullanılabilir. Bu helper true olarak işaretlenmişse, otomatik olarak dosya yolunun sonuna QueryString parametresini ve buna değer olarak, dosyanın Sha512 ile alınmış HASH kodunu ekler. Bunun sonucunda eğer dosya ismi değişmeden dosya içeriği değişmişse bile, HASH kodu değişeceğinden, tarayıcı bu değişikliği algılayıp, cache’ten çekmek yerine, tekrar istek gönderip yeni dosyayı çeker.

Bu yazıda kısaca değindiğim Tag Helpers ile ilgili birçok kullanım mevcut. Buradaki linkten erişebilirsiniz. Vakit ayırdığınız için teşekkür ederim. 💛

Kaynaklar