Tag Helpers

SelamünAleyküm, bu yazımızda Tag Helpers konusunu ele alacağız. Bu yazıda Tag Helpers nedir ve Projeye Tag Helpers Ekleme ve Çıkarma, Custom Tag Helpers ve sonra yaz incelemiş olacağız.

Tag Helpers Nedir?

Tag Helpers, View tarafında server-side kodlarımızı Html Tagları ( etiketleri ) gibi yazmamısı sağlar. Bu sayede Html tarafında daha okunaklı kodlar üretebiliriz.

Projeye Tag Helpers Ekleme ve Çıkarma

Tag Helpers'ları projemize eklemek için ViewImports dosyamıza ya da yazdığınız Tag Helpers'ların bulunduğu View dosyasına, @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers kodunu kodumuza eklemeliyiz. Eğer sadec kullandığımız View kodu eklersek Tag Helpers sadece o sayfada aktif olacaktır. Ancak ViewImports dosyasına bu kodu eklersek porjemizdeki tüm View dosyalarında Tag Helpers aktif olacaktır.

@addTagHelpers*, Microsoft.AspNetCore.Mvc.TagHelpers bütün Tag Helper'ları ekler.

@addTagHelpers AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers EmailTagHelper'ı ekler.

@addTagHelpers AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers AuthoringHelpers içindeki E ile başlayan tüm Tag Helper'ları ekler.

@removeTagHelpers AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers AuthoringTagHelpers içindeki E ile başlayan tüm Tag Helper'ları çıkarır.

Not:	projemize ViewImports dosyasını eklemek için Views→Add→New Item→View şeklinde ekelenir ve ismi "_" ile isimlendirme standardına göre oluşuturulur. Projede zaten varsa eklmemize gerek yok.

Form, Select, Label ve Input Tag Helper

Tag Helper'lar ile formlar oluşturabiliriz. Bu formlarda girilen değerleri modelimize gönderip Model Binding uygulatabiliriz. Şimdi yapacağımız örnekte de Form, Select, Label ve Input Tag Helper'ı göreceğiz. Böylece giriş formu oluşturulduğunda sıklıkla karşılaştığımız etiketleri yerine, Tag Helper'ları kullanarak, dinamik kolay Html çıktıları elde edebiliriz.

Misalen, Doctor isimli bir modelimiz olsun. ve bu modelin Id, Name, Surname, HospitalName ve IsWorking isimli property'leri olsun.

public class Doctor
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public string HospitalName { get; set; }
    public bool IsWorking { get; set; }
}

Doctor isimli bir Controller'imiz olsun. Verileri alıp ekrana yazmak için Action metotlarımız olsun.

public class DoctorController : Controller
{
    public IActionResult Index(Doctor doctor)
    {
        return View(doctor);
    }

    [HttpGet]
    public IActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Create(Doctor doctor)
    {
        return View("Index", doctor);
    }
}

Create Action'ımıza ait View oluşturalım ve bu View'da Tag Helper'ları kullanalım.

@model TagHelpers.Models.Doctor
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers


@{
    Layout = null;
}

<form asp-controller="Doctor", asp-action="Create" method="post">
    <table>
        <tr>
            <td>
                <label asp-for="Id">Id: </label>
            </td>
            <td>
                <input type="text" asp-for="Id" />
            </td>
        </tr>
        <tr>
            <td>
                <label asp-for="Name">Adı: </label>
            </td>
            <td>
                <input type="text" asp-for="Name" />
            </td>
        </tr>
        <tr>
            <td>
                <label asp-for="Surname">Soyadı: </label>
            </td>
            <td>
                <input type="text" asp-for="Surname" />
            </td>
        </tr>
        <tr>
            <td>
                <label asp-for="HospitalName">Hastane Adı: </label>
            </td>
            <td>
                <input type="text" asp-for="HospitalName" />
            </td>
        </tr>
        <tr>
            <td>
                <label asp-for="IsWorking">Çalışma Durumu: </label>
            </td>
            <td>
                <select type="text" asp-for="IsWorking">
                    <option value="true">Çalışıyor</option>
                    <option value="false">Emekli</option>
                </select>
            </td>
        </tr>
            <td>
                <button type="button">Ekle</button>
            </td>
        </tr>
    </table>
</form>

View kodlarında da görüldüğü üzere form, label , select ve input kodlarını Tag Helper'ları kullanarak yazmış olduk.

Sayfanın üst kısmında @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers ifadesi ile Tag Helpers'larımızı tanımladık. Aynı şekilde Tag Helper'ları, ViewImports dosyasında tanımlayabilirdik. ViewImoprts dosyasında tanımlarsak diger sayfalarda tekrar tekrar yazmamız gerekmeyecektir.

Şimdi de Index Action metoduna ait View oluşturalım ve Form Tag Helpers sayesinde gönderdiğimiz verileri ekrana yazmak için Index adlı View'ı dolduralım.

@model TagHelpers.Models.Doctor
@{
    Layout = null;
}

<table>
    <tr>
        <td>Id: </td>
        <td><@Model.Id/td>
    </tr>
    <tr>
        <td>Adı: </td>
        <td>@Model.Name</td>
    </tr>
    <tr>
        <td>Soyadı: </td>
        <td>@Model.Surname</td>
    </tr>
    <tr>
        <td>Hastane Adı: </td>
        <td>@Model.HospitalName</td>
    </tr>
    <tr>
    <td>Çalışma Durumu: </td>
    @{
        var isWorking = Model.IsWorking ? "Çalışıyor" : "Emekli";
    }
    <td>@isWorking</td>
    </tr>
</table>

Projemizi çalıştıralım.

foto ekle yada kısa video ekle.

Ekrandaki çıktıda olduğu gibi bilgileri doldurduktan sonra Ekle butonuna basalım.

foto ya da kısa video ekle.

Tag Helper'lar ile form oluşturup, Input Tag Helper'lar ile alanları doldurup Controller tarafına gönderdik. Controller tarafında da Model Binding sayesinde gönderdiğimiz verileri yakaladı ve bu verileri geri döndürererk ekrana basmış olduk.

Custom Tag Helpers

Biz de sıklıkla kullanacağımız tag'lar oluşturup bu tag'ları Tag Helpre olarak belirtebiliriz. Bu şekilde projelerimize Custom olarak Tag Helper'lar yazıp çeşitli alanlarda kullanma imkânına erişebiliriz. Böylelikle basit ve yönetilebilir Html çıkıtları elde edebiliriz.

Misalen, Tag Helpers isminde bir kalsörümüz olsun. Bu klasörün içine CustomTagHelpers isimli bir class oluşturalım. Oluşturduğumuz class TagHelper abstract class'ından türesin.

[HtmlTargetElement("namesurname-tag-helper")]
public class CustomTagHelpers : TagHelper
{
    public string NameSurname { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "CustomTagHelpers";
        output.TagMode = TagMode.StartTagAndEndTag;

        var sa = new StringBuilder();
        sa.AppendFormat("<span>SelamünAleyküm {0}</span>", this.NameSurname);

        output.PreContent.SetHtmlContent(sa.ToString());
    }
}

Kodda da görüleceği üzere CustomTagHelpers class'ına HtmlTargetElement Attriube'sini tanımladık ve tanımladığımız Attribute ile Html'de kullanamak üzere olduğumuz Tag Helper'in adı oluyor. Tag Helper'ın içinde kullanacağımız NameSurname parametresini tanımladık. Bu parametre View tarafında istediğmiz veriyi gönderterek başına "SelamünAleyküm" yazdırabiliriz. Bu şekilde View tarafından aldığımız veri üzerinde oynamalar yapabiliriz.

Custom Tag Helper'ımızı oluşturduktan sonra ise oluşturduğumuz Custom Tag Helper'ı kullanabilmek için TagHelperContorller içinde Index Action metodunun View'ini oluşturalım.

public IActionResult Index()
{
    return View();
}

Index View'imizin içerisinde Custom olarak oluşturduğumuz "namesuranme-tag-helper" Tag Helper'ı kullanalım. Bu Tag Helper'a "name-surname" parametresini gönderelim. Tag Helper'larımızın yolunu View'in üstüne ya da _ViewImports dosyasına eklemeyi unutmayalım.

@addTagHelper*, TagHelpers


<namesurname-tag-helper name-surname="Hasan BOZKUŞ"></namesurname-tag-helper>

Custom olarak oluşturdğumuz class içerisindeki parametre ile Tag Helper'ı kullandığımız parametre arasındaki isim farklılığına dikkat kesilmek gerekirse, Custom Tag Helper'larda ilk büyük harften sonraki her büyük harf "-" işareti ile devam edeceğini gösterir ve oluşturulan parametre küçük harflerle kullanılır.

Kendimize hususi olarak oluşturduğumuz Tag Helper sayesinde "Hasan BOZKUŞ" ifadesinin önüne "SelamünAleyküm" yazmış olduk.

Misalen, Sürekli kullandığımız bir div etiketi olduğunu farz edelim. Her sayfada bu etiketi yazıp tekrardan class veya style atamaları yapmak yerine bu div'i Tag Helper yapıp istediğmiz alanlarda kullanmak için oluşturabliriz. Böylelikle farklı sayfalarda veya aynı sayfada oluşturduğumuz etiketi tekrar tekrar çağırabiliriz.

<div style="font-size:x-large">Custom Tag Helper örenği</div>

Böyle bir div etiketimizi sık sık kullandığımızı farz edelim ve bu sebeple div etikentini Tag Helper yapıp ihtiyacımız olan yerde bu Tag Helper'i çağıralım.

DivTagHelper adında class oluşturalım ve bir önceki örenğimizdeki gibi bu class'ta Tag Helper'dan türesin.

public class DivTagHelper : TagHelper
{
    public string fontsize { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.SetAttribute("style", $"font-size:{fontsize}");
    }
}

kodda da görüleceği üzere fontsize diye bir değişken tanımladık. Bu değişken ile DivTagHelper'i kullandığımız yerde bu değişkene ne verirsek style parametresine atadığımız atadığımız boyutu verecektir.

Peki, biz Custom olarak oluşuturduğumuz bu Tag Helper'imiz Div isimin alacaktır. Class'ın adında TagHelper olan kısmı çıkarıp başındaki Tag Helper'ın adı olarak ele almaktadır.

DivTagHelper → Div ( Tag Helper'ın adı ) + TagHelper. Şimdi bu Tag Helper'ı kullanalım.

Bunun için önceki örnekte Controllerin Index Action metodunu kullanalım ve Action metodumuzun View'ine Tag Helper'ımızı yazalım.

@addTagHelper*, TagHelpers

<div fontsize="x-small">Custom Tag Helper örenği</div>

Görüldüğü gibi fontsize değişkenimize x-small değerini atadık. Programı bu şekilde çalıştırdığımızda "Custom Tag Helper örneği" metni normalden daha küçük yazılmıştır. Kaynık koduna baktığımızda Tag Helper'ın Html formatında yazıldığına şahit olacağız.

Peki biz style değişkenine başka bir style vermeye çalışsak ne olurdu?

@addTagHelper*, TagHelpers

<div style="background-color:red;">Custom Tag Helper örenği</div>

Ekran çıktısından da anlaşılacağı gibi div'e farklı bir style atamsı olmadı ve background-color içinde bir değişiklik yapılmadı.

Onun yerine DivTagHelper sınıfında belirttiğimiz style'i atamış, fontsize değişkenine değer atanmadığı için font-size boş kalmış ve boyutu böylelikle aynı kalmış oldu.

Peki, biz sadce <a> etiketi altında veya başka bir etiketin altındaki <div> etikentinde Tag Helper'ımızın çalışmasını istiyorsak?

Böyle durumlarda HtmlTargetElement Attribute'sine ParentTag atamsı yapmamız gerekir.

DivTagHelper class'ımızı aşağıdaki gibi revize edelim.

[HtmlTargetElement(ParentTag = "form")]
public class DivTagHelper : TagHelper
{
    public string fontsize { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.SetAttribute("style", $"font-size:{fontsize}");
    }
}

Bu kod, DivTagHelper'ımızı sadece Form Tag Helper'ın altında çalışır hale getirdik.

Şimid ise Index View'inin içinde Form Tag Helper'ın altında DivTagHelper'ı kullanalım.

@addTagHelper*, TagHelpers
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

<form>
    <div style="background-color:red;">Custom Tag Helper örenği</div>
</form>
<div style="background-color:red;">Custom Tag Helper örenği</div>

Projeyi çalıştırdığımızda birinci <div> etiketi Tag Helper olarak tanımlanmışken ikinci <div> etiketi form'un içinde olmadığından TagHelper olarak tanımlanmadı.

Peki, <div> etiketine sadece fontsize atandığı zaman Tag Helper'in çalışmasını sağlayabilir miyiz?

Bunu için HtmlTargetElement Attribate'sine, Attributes taması yapmamız gerekir.

DivTagHelper class'ını aşağıdaki gibi revize edelim.

[HtmlTargetElement(ParentTag = "form", Attributes = "fontsize")]
public class DivTagHelper : TagHelper
{
    public string fontsize { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.SetAttribute("style", $"font-size:{fontsize}");
    }
}

Şimdi Index View'ine iki adet <div> etiketi tanımlaması yapalım. Bu <div> etiketlerinden birine fontsize tanımlaması yapılırken diğerinde ise fontsize tanımlamasını yapmayalım.

@addTagHelper*, TagHelpers
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

<form>
    <div fontsize="x-small">Custom Tag Helper örenği</div>
    <div>Custom Tag Helper örenği</div>
</form>

Projemizi çalıştırdığımızda Tag Helper'lardan ilki Tag Helper olarak çalışırken diğer normal bir Html etiketi olarak çalışacaktır.

Bu yazamızın sonuna geldik. Bu yazıda Tag Helpers Nedir? Projeye Tag Helpers Ekleme ve Çıkarma ve Custom Tag Helper konularını ele aldık. Projenin github adresine buradan ulaşabilirsiniz. sonraki yazamızda Tag Helpers konusu bitireceğiz. İlgilinenlerin faydalanması ümidiyle.