İçeriğe atla

ASP.NET Core 6/Tag Helper'lar

Vikikitap, özgür kütüphane

Tag helper'lar layout'lar, partial view'lar ve view component'larla aynı amaca hizmet ederler. View'larda kod tekrarını önlerler. Ancak tag helper diğerlerinden çok daha güçlü ve esnek bir yapıdır. Diğerlerinde sayfada nihai olarak görüntülenecek HTML, view'lar aracılığıyla belirtilir. Bu da üretilecek HTML konusunda esneklik kaybı olacağı anlamına gelir. Örneğin HTML'de 3 satırlı ve 2 sütunlu, her bir hücrede ilgili satır ve sütun numaralarını gösterecek bir tablo oluşturmak için aşağıdaki kodu yazabilirsiniz:

<table>
    <tr><td>1,1</td><td>1,2</td></tr>
    <tr><td>2,1</td><td>2,2</td></tr>
    <tr><td>3,1</td><td>3,2</td></tr>
</table>

Bu tabloyu çıktı vermek istediğinizi belirtmek için ilgili view'da sadece

<table satir="3" sutun="2"></table>

yazmak ister misiniz? Cevabınız evetse kullanacağınız şey tag helper'dır. Tag helper'lar esasında kullanıldıkları view'da HTML koduna benzeyen şeyi karşılık geldikleri gerçek HTML koduna dönüştürürler. Elbetteki HTML standardında <table> etiketinin satir veya sutun isimli seçenekleri yoktur. Ama görünüm HTML şeklindedir, bu sayede bu sektaks kullanıldığı view'da sırıtmaz, arkaplanda gerçek HTML koduna dönüştürülür ve istemciye öyle gönderilir. Tag helper kullanıldığı view'dan parametrelerini normal HTML seçenekleriymiş gibi duran seçenekler vasıtasıyla alır. Bu bilgileri kullanarak gerçek HTML kodunu döndürür.

Tag helper'ların tek kullanım alanı uzun HTML kodlarının daha kısa yazılmasını sağlamak değildir. Daha da önemlisi HTML etiketlerine dinamiklik sağlarlar. Gerçek HTML, C# kodu kullanılarak üretilir ve üretim esnasında kullanılan view'dan sağlanan parametreler yanında programımızın mevcut durumundan da faydalanılabilir, veritabanındaki verilere bakılabilir, vs. Diğer bir deyişle HTML kodu üretimi esnasında her türlü iş mantığı kuralı işletilebilir. Örneğin daha sonra göreceğimiz üzere dahili tag helper'lar HTML formlarının oluşturulması amacıyla kullanılabilir. Bir HTML formu oluştururken şöyle bir <form> etiketi kullanabiliriz:

<form asp-action="Index" asp-controller="Home" method="post">

Burada submit butonuna tıklandığında form verilerinin gönderileceği controller ve action belirtilmektedir. Bu kod tag helper tarafından aşağıdaki HTML koduna çevrilebilir:

<form action="/Home/Index" method="post">

Diğer bir deyişle tag helper asp-action ve asp-controller seçenekleri için sağlanan değerlere bakarak gerçek HTML kodundaki <form> etiketinin action seçeneğini ayarlamaktadır. Bunu yaparken programın mevcut rota yapılandırmasını kullanmaktadır. Bu bölüm 3 alt kısma ayrılmıştır. İlk olarak kendi tag helper sınıflarımızı yazmayı, daha sonra ASP.NET Core tarafından sağlanan hazır tag helper'ları kullanmayaı, daha sonrasında ise HTML formları oluştururken kullanabileceğimiz tag helper'ları göreceğiz.