Posted by Selam arkadaşlar, bu yazımda sizlere .Net Core MVC Custom Tag Helper Oluşturma konusundan bahsedeceğim. Asp.Net Core Mvc ile gelen Tag Helper’lar oluşturacağımız veya oluşturduğumuz View’ların daha okunabilir ve anlaşılabilir olmasında yardımcı olmaktadır. Aynı zamanda bazı kontrollerimizi oluştururken bize kolaylık sağlamaktadır.
Custom Tag Helper kendimizin istekleri doğrultusunda bir Tag Helper oluşturup Intellisense desteği ile de bu Tag Helper’ları kullanmak ve işlemlerimizi hızlı ve kolay bir şekilde gerçekleştirmemizi sağlayacaktır.
TagHelper Örneği:
// TagHelper class'ımızı oluşturuyoruz.
[HtmlTargetElement("user-list")]
public class UserListTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
var users = new List<ApplicationUser>() {
new ApplicationUser{ UserName = "user1", Password = "123456", FullName="User 1"},
new ApplicationUser{ UserName = "user2", Password = "654123", FullName="User 2"}
};
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.Append("<ul class='list-group'>");
foreach (var user in users)
{
stringBuilder.AppendFormat(@"<li class='list-group-item'>
<a href='/user/detail/{0}'>{1}</a> </li>",
user.UserId,
user.UserName);
}
stringBuilder.Append("</ul>");
output.Content.SetHtmlContent(stringBuilder.ToString());
base.Process(context, output);
}
}
Yukarıdaki örnekte UserListTagHelper sınıfımızı oluşturduk ve bu sınıfımızı TagHelper sınıfından miras aldık. Sınıfımızın bir TagHelper olduğunu, bu özellikleri sağlaması gerektiğini belirlemiş olduk. Daha sonrasında ise TagHelper sınıfının Process metodunu override etmemiz gerekiyor. Yani bu metodu ezmemiz gerekiyor. Override işlemi gerçekleştikten sonra bizim oluşturduğumuz şekilde bir html kodu üretilmiş olacaktır.
Yukarıdaki örnekte Process metodu içerisinde ise
– TagName ile hangi html etiketleri içerisinde oluşturmak istediğimizi belirledik.
– Daha sonra örnek bir Kullanıcı Listesi oluşturduk.
– StringBuilder nesnesi oluşturarak bir ul-li yapısında kullanıcı listesinin oluşturulması için kodlarımızı belirledik ve bir döngü içerisinde bunun otomatik olarak oluşturulmasını sağlamış olduk.
– Content.SetHtmlContent ile de oluşturduğumuz StringBuilder nesnesini içeriğe ekledik.
Tüm bu işlemlerden sonra View tarafında bu TagHelper’ları kullanmak istediğimizde öncelikle en üst kısma @addTagHelper ile kullanacağımız TagHelper nesnelerinin nerede olduğunu belirlememiz gerekiyor.
@addTagHelper “*,TagHelperSample”
addTagHelper ile projemizin NameSpace’ini verdik ve View kısmında bu oluşturduğumuz TagHelper’ları kullanacağımızı belirttik.
Intellisense desteği ile oluşturduğumuz Tag Helper direkt olarak görünecektir.
<!-- --> <user-list></user-list> <!-- -->
Html kodunda görüldüğü gibi <user-list> tag helper’imizi kullanmış olduk. addTagHelper eklendikten sonra bu tag helper’larımızın rengi mor olarak gözükmektedir. TagHelper’ları belirlemek için mor renkte gösterilmiştir.
Umarım faydalı olmuştur.
Bir sonraki yazıda görüşmek üzere…