ASP.NET 5 Tag Helpers - Etiket Yardımcıları

28. Ekim 2015

ASP.NET MVC ile Razor View Engine ilk çıktığında HTML helpers ile tanıştık ve MVC projelerinde yoğun olarak HTML Helper metodlarını kullandık, kullanımı kolaylaştırmak için kendi yardımcı metodlarımızı yazdık. ASP.NET MVC ile alakalı pek çok soru ve takıldığımız pek çok nokta HTML Helper kullanımı ile alakalı oldu. HTML'nin basitliğinden ve yıllardır tecrübe ettiğimiz etiketler ile attributelerden uzaklaştık. Yerine HTML Helper metodlarına geçilen parametrelerle boğuşmaya başladık. Şahsen hala ASP.NET MVC'de HTML Helper ile oluşturacağım bir linke class attribute'u verirken zorlanmıyor değilim.

İşte bu noktada Tag Helpers - etiket yardımcıları ile biz geliştiricilerin yardımına biraz geçte olsa yetişilmiş oldu. Tag Helpers temelde bize kullanım kolaylığından başka yeni bir şey sunmuyor. Razor HTML yardımcıları ile yazabildiğimiz kodu, tag helpers ile daha markup diline yakın olarak yazabiliyoruz, View'larımız daha okunabilir oluyor. Dolayısıyla anlaması ve geliştirmesi daha kolay hale geliyor. ASP.NET 5 ile gelen etiket yardımcılarına ek olarak istersek kendi etiket yardımcılarımızı geliştirebiliyoruz, ki bu kısım bence konunun en heyecan veren yeri.

Bu yazıda öncelikle ASP.NET 5 ile gelen varsayılan etiket yardımcılarına değinip, sonrasında kendi etiket yardımcımızı nasıl yazacağımız ve kullanacağımız üzerinde durmaya çalışacağım.

 

ASP.NET 5 Varsayılan Etiket Yardımcıları

Aşağıdaki kod bloğunda etiket yardımcıları olmadan HTML yardımcıları yardımı ile basit bir view örneği görüyoruz. Buradaki HTML yardımcıları ile oluşturduğumuz üç elemana dikkat edelim. Bir textbox, bir checkbox ve bir link elemanı oluşturuyoruz.

 

@model ASP_NET_5_TagHelpers.Models.ToDoListItem

<label>Açıklama : </label>
@Html.TextBoxFor(m => m.Text)
<br />

<label>Tamamlandı mı ? : </label>
@Html.CheckBoxFor(m => m.IsCompleted, new { id = "todolistitem" + Model.ItemId })
<br />

@Html.ActionLink("Tag Helper Kullanılmış Sayfaya Git", "WithTagHelper", "Home")

 

 Şimdi aynı örneği ASP.NET 5 ile gelen varsayılan etiket yardımcıları ile yapalım. ASP.NET 5 ile gelen varsayılan etiket yardımcılarını kullanmak için yapmamız gereken tek şey @addTagHelper emri ile etiket yardımcılarının bulunduğu assembly'i referans göstermek. Böylece aşina olduğumuz HTML etiketlerine etiket yardımcıları ile gelen ek attibute'ları kullanarak view'ımızı hazırlayabiliyoruz. 

 

@model ASP_NET_5_TagHelpers.Models.ToDoListItem
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
    
<label>Açıklama : </label>
<input type="text" asp-for="Text" /><br>

<label>Tamamlandı mı ? : </label>
<input type="checkbox" asp-for="IsCompleted" id="@String.Format("todolistitem{0}", Model.ItemId)" /><br />

<a asp-controller="Home" asp-action="WithoutTagHelper">Tag Helper Kullanılmamış Sayfaya Git</a>

 Örnekte bulunan input elemanlarına tanımladığımız asp-for attributelarına dikkat edelim. Bunlar elemanın, modelin hangi özelliği ile eşleşeceğini belirtiyor. Link elemanına gelen asp-controller ve asp-action attributelarına dikkat edelim, bunlar da link elemanının hangi controller'ın hangi aksiyonu çalışacağını belirtiyoruz. İşler oldukça basitleşmiş ve okunabilir hale gelmiş değil mi ? 

Kendi Etiket Yardımcımızı Geliştirelim

 ASP.NET 5 ile gelen varsayılan etiket yardımcılarının yanı sıra kendi etiket yardımcımızı yazabilmemizi sağlayan sınıflar da mevcut. Microsoft.AspNet.Razor.Runtime.TagHelpers isim alanı altındaki TagHelper sınıfından türeteceğimiz sınıflar vasıtasıyla kendi etiket yardımcımızı geliştirebiliyoruz. Sınıfın public özellikleri view'da kullanacağımız elemanın attibutelarına karşılık geliyor. Process metodu içerisinde ise sayfamız istemciye gönderilirken nasıl render edilmesini istiyorsak öyle HTML elemanları tanımlayarak çıktımızı üretebiliriz.

Örneğin aşağıdaki Bootstrap input group örneğini ele alalım. 

<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">@@example.com</span>
</div>

 Bu kod bloğunu, tekrar kullanılabilir bir etiket yardımcısına aşağıdaki gibi çevirebiliriz. InputGroupTagHelper sınıfının Id ve Domain özelliklerine dikkat edin. Bunları daha sonra view dosyamızda attribute olarak kullanacağız.

public class InputGroupTagHelper : TagHelper
{
	public string Id { set; get; }

	public string Domain { set; get; }

	public override void Process(TagHelperContext context, TagHelperOutput output)
	{
		// Outer Tag : 
		output.TagName = "div";
		output.Attributes.Add("class", "input-group");

		// Inner Input : 
		var name = new TagBuilder("input");
		name.MergeAttribute("type", "text");
		name.MergeAttribute("class", "form-control");
		name.MergeAttribute("placeholder", "Recipient's username");
		name.MergeAttribute("aria-describedby", this.Id);

		// Span : 
		var span = new TagBuilder("span");
		span.MergeAttribute("class", "input-group-addon");
		span.MergeAttribute("id", this.Id);
		span.InnerHtml = this.Domain;
		
		output.Content.SetContent(name.ToString() + span.ToString());
	}
}

Tanımladığımız etiket yardımcısını view dosyasında aşağıdaki gibi kullanabiliriz : 

@addTagHelper "*, ASP_NET_5_TagHelpers"

<input-group id="basic-addon2" domain="@@gmail.com"></input-group>
 

 

 

Sonuç

Bu yazımda ASP.NET 5 ile gelen tag helpers - etiket yardımcılarını incelemeye çalıştık. Şuan ASP.NET 5 Beta versiyonu olduğu için kod örneklerinde eklemeler ve çıkarmalar olabilir. Hatta bazı HTML elemanlarında varsayılan etiket yardımcılarının istenen şekilde çalışmadığını gördüm. Final sürümünde daha stabil olacaktır. Yazımda bahsettiğim örneklere aşağıdaki github linkinden ulaşabilirsiniz.

ASP.NET 5 TagHelpers Örnekleri

 

asp.net , , ,