Tag Helpers Nedir? Nasıl Kullanılır? – ASP.NET – MVC

Microsoft, ASP Classic veya bugün ASP.NET WebForms olarak adlandırdığımız yapıyı .NET Core MVC ile birlikte değiştirdiğinde, web için kodlama dünyasına Controller kavramını ve Razor Page yapılarını getirdiler. Ve artık hiç bir şey eskisi gibi olmadı…

Microsoft, ASP.NET WebFormlar ile asp:TextBox (bir INPUT veya TEXTAREA HTML etiketi olarak işlenecek) veya
asp:Label gibi tüm yaygın HTML kontrolleri için sunucu kontrolleri uyguladı. Bununla birlikte, çok sayıda parametre alabilen ve veri kaynağına dayalı olarak sütunlar ve satırlarla eksiksiz bir TABLO olarak işlenecek olan asp:DataGrid gibi kontrollerle geliştirdiler. Ve oldukça da devrim yaratan hareketlerdi. Benim fikrimi soracak olursanız gelişen teknoloji ile birlikte özellikle mobil kullanım ile responsive tasarımların yaygınlaşmasıyla yeni bir devrim gerçekleşerek Tag Helpers yapıları ortaya çıktı.

Peki nedir Tag Helper?

Tag Helper, sunucu tarafı bileşenleridir ve temel olarak HTML elementlerinde tanımlı dönüşümler gerçekleştirmek için kullanılırlar. Sunucu tarafı bileşenleri oldukları için, Razor dosyalarında HTML elementleri oluşturmak ve işlemek için sunucuda işlenecekler.

Kısaca şöylede diyebiliriz Razor tarafında @ işareti ile birlikte getirdiğimiz model verilerimizi Tag Helper yardımıyla daha işlevsel bir şekilde HTML elementlere işlenerek getirilir.

Tag Helper’lar standart HTML öğelerini hedefler ve öğe için sunucu tarafı attribute sağlar. Örnek olarak bir model üzerinden <input> elementlerimize eklediğimiz verilerimizi Tag Helper ile gösterim sunalım.

Model:

    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }

View:

@model TagHelper.Models.Movie

<h1>Movie</h1>
<div>
    <label asp-for="Title"></label>
    <input asp-for="Title" />
</div>
<div>
    <label asp-for="ReleaseDate"></label>
    <input asp-for="ReleaseDate" />
</div>
<div>
    <label asp-for="Genre"></label>
    <input asp-for="Genre" />
</div>
<div>
    <label asp-for="Price"></label>
    <input asp-for="Price" />
</div>

Burada dikkat etmeniz gereken tek şey “asp-for” özelliği HTML elementlerimize eklediğimiz bu özellik sayesinde modelimiz üzerinde direk olarak veri taşıyabiliriz.

Sonuç:

Özet:

ASP.NET MVC Tag Helper, özellikle amaç Modellerinizdeki verileri View’inizdeki elementlere bağlamak olduğunda, View’leriniz için element oluşturmada size yardımcı olacaktır. Sunucu kontrolleri ve HTML Yardımcıları gibi önceki yaklaşımlardan farklı olarak, Model ve View’i bağlamak için başka bir dile geçmeniz gerekmez ve oluşturulan işaretlemenin kontrolü sizde kalır. Başka bir deyişle, Tag Helper, View’lerinizi oluşturduğunuzda sizin için birçok şeyi kolaylaştıracaktır.

ASP.NET Core MVC’de Tag Helper Nasıl Kullanılır?

View’lerinizde Tag Helper kullanmak için onlara destek eklemeniz gerekir. Bu, doğrudan kullanmak istediğiniz View’de veya tüm View’lerinizde kullanmak istiyorsanız, addTagHelper direktivi kullanılarak yapılır: _ViewImports.cshtml dosyasında. Tüm view’lerinizde Tag Helper desteği istememeniz için belirli bir nedeniniz yoksa _ViewImports.cshtml çözümünü öneririm.

Projenizi oluşturmak için boş olmayan Visual Studio şablonlarından birini kullandıysanız, Tag Helper desteğinin zaten eklenmiş olabileceğini lütfen unutmayın. Projenizde _ViewImports.cshtml adlı bir dosya arayın – oradaysa ve aşağıdaki satırı içeriyorsa, hazırsınız!

Bu makalede ve aşağıdaki makalelerde tartışacağımız yerleşik Tag Helper’lara destek eklemek için aşağıdaki satırı eklemelisiniz.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Bunu yaptıktan sonra, Tag Helper’lardan biri tarafından desteklenen bir HTML etiketi yazdığınızda IntelliSense’te asp-* özelliklerini görebilmeniz gerekir. Bu yönergenin sözdizimi şöyle görünür:

@addTagHelper [namespace], [assembly]

Bu nedenle, örneğimizde tüm Tag Helper’ların (yıldız işaretiyle belirtildiği gibi) Microsoft.AspNetCore.Mvc.TagHelpers derlemesinden içe aktarıyoruz. İçe aktarılan yardımcıları sınırlamak istemeniz durumunda, tam adını (örneğin, Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper) kullanarak yalnızca birini belirtebilir veya aşağıdaki gibi bir ad alanındaki tüm Etiket Yardımcılarını içe aktarabilirsiniz: Microsoft.AspNetCore.Mvc.TagHelpers.*

addTagHelper yönergesi, kendi özel Tag Helper’larınız için destek eklemek için kullanılabilir – daha sonra ki bir yazıda bu konu hakkında da bilgi paylaşımında bulunacağım.

Razor Sayfasında Kullanabileceğimiz Tag Helper’lar

Tag Helper’ların Razor Sayfalarında HTML oluşturmayı otomatikleştirmek için yeniden kullanılabilir bileşenler olduğunu yukarıda bahsetmiştik. Tag Helper’lar, belirli HTML etiketlerini hedeflerler. Bunların listesi aşağıda verilmiştir.

  • Environment tag helper
  • Form Action tag helper
  • Form tag helper
  • Image tag helper
  • Input tag helper
  • Label tag helper
  • Link tag helper
  • Option tag helper
  • Partial tag helper
  • Script tag helper
  • Select tag helper
  • Textarea tag helper
  • Validation tag helper
  • Validation Summary tag helper

Ayrıca bunların dışında kendi özel tag helper’larınızı oluşturmanızın da mümkün olduğunu unutmayın.