Tag Helpers 2

SelamünAleyküm, geçtiğimiz yazıda Tag Helpers nedir, form-select-label ve input tag helper'ları ve custom tag helper'ları ele almıştık. Bu yazımızda ise Tag Helper'ın 2. konusunu inceleyip bitireceğiz.

Tag Helper'leri Yok Saymak

Tag Helper formatıyla yazdığımız ifadeyi devre dışı bırakip Tag Helper olmadığını belirtmemiz için tanımladığımız Tag Helper'in başına ve kapama tag'ının başına "!" ( ünlem ) işareti koymalıyız.

<div asp-validation-summary="none"></div>

<div> olarak tanımladığımız Tag Helper'i yok saymamız için <div> etiketlerinin başına ! işareti koymamız gerekir.

<!div asp-validation-summary="none"></!div>

Tag Helper'e Ön Ek Eklemek

Tag Helper olarak yazdığımız tag'ların başına ön ek getirebliriz. Bu şekilde kullanmak istediğimiz Tag Helper'leri bu ön eki getirmeden kullanamayacağız.

@addTagHelher*,Microsoft.AspNetCore.Mvc.TagHelpers
@tagHelperPrefix tag

<taga asp-controller="Home" asp-action="Index">Index</taga>

Görüldüğü üzere Tag Helper olarak tanımladığımız <a> etiketinin başına "tag" isminde bir ön ek getirmek zorunda kaldık. Bu ön ek olmadan <a> etiketini Tag Helper olarak kullanmaya çalışırsak uygulamamız buna izin vermeyecektir. Html kodlarında kullanılan sıradan <a> etiketi olarak kabul edecektir.

Tag Helper Component

Tag Helper'leri Component haline getirilip projelelrimizde kullanmamız mümkündür. Tag Helper Component'i kullanmak için Startup sınıfına oluşturduğumuz Tag Helper Component'i eklemeliyiz.

Misalen, bir Layout sayfası oluşturup öylece bırakalım. Ardından da HomeController altındaki Index Action'una ait bir View oluştualım. Bu Index View'i, boş bir View olsun.

Sonra MetaTagHelperComponent isminde bir sınıf oluşturalım ve Component'imize ait kodları buraya yazalım.

public class MetaTagHelperComponent : TagHelperComponent
{
     public override Process(TagHelperContext context)
     {
           if (string.Equals(context.TagName, "head" StringComprasion.OrdinalIgnoreCase))
           {
               output.PostContent.AppendHtml($"<meta name=\"name\" content=\" Sayfanın Başlığı\" /> \r\n ");
               output.PostContent.AppentHtml($"<meta name=\"description\" content=\"Sayfanın İzahati\" /> \r\n");
           }      
     }
}

Oluşturduğumuz bu Component, sayfamıza "title" ve "description" isminde iki tane meta tag oluşturup sayfamıza yazacak. Şimdi de Startup class'ımızın içine yazdığımız Component'in tanımlamasını yapalım.

public void ConfigureServices(IServiceCollection services)
{
     Services.AddTransient<ITagHelperComponent, MetaTagHelperComponent>();
     Services.AddControllersWithViews();
}

projeyi çalıştırıp kaynak kodlarını incelediğimizde, Component'imizde eklemiş olduğumuz meta tag'ların sayfamızda ekli olduğunu görmüş oluruz.

<html>
    <head>
        <title></title>
        <meta name="title" content="Sayfanın Başlığı" /> 
        <meta name="description" content="Sayfanın İzahati" />
    </head>
    <body>
        <div>


        </div>
    </body>
</html>

Cache Tag Helper

Cache Tag Helper ile Cache Tag'ları arasında kalan bölüm Cache'e atılır. Cache, zamanı bitmediği sürece veya proje restart edilmediği sürece memory'de ( hafızada ) veri tutar. Cache zamanı bittiğinde Razor Cache Tag'ları arasında kalan kodu tekrar çalıştırır ve tekrardan veriyi Cache'e atar.

Misalen, HomeContorller altındaki Index Action metoduna ait View'e Cache Tag Helper'i yazalım ve <cache> tag'ını kapattıktan sonra <cahe> tag'ının dışına da şimdiki tarih ve zamanı tekrardan yazalım.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<cache expires-after="@TimeSpan.FromSeconds(30)">
    ´@DateTime.Now <br />
</cache>

@DateTime.Now

Görüleceği üzere <cache> tag'ları arasında kalan yeri 30 saniye boyunca memory'ye atmasını sağladık.

Şimdi projeyi çalıştıralım. İlk çalıştırdığımızda iki veri de aynı olacak, sayfayı yenilediğmizde iki veride birbirinden farklı olacaktır. Bunun sebebi ilk veriyi Cache Tag Helper sayesinde 30 saniye boyunca memory'den getirmemizdir.( Sayfayı yenileme işlemi 30 saniyeyi geçmediği sürece)

Ekran çıktısında iki veri de aynı iken sayfayı yenilediğimizde il veriye Cache Tag Helper uygulandığından lik veri ile ikinci veri farklı olacaktır.

Anchor Tag Helper

<a> tag'larını kullanarak Tag Helper'larla Rout'lara uygun dinamik Url'ler oluşturabiliriz. Böylece Route yapası değişse bile Tag Helper'lar sayesinde Url'lerimiz dinamik olacağından otomatik olarak Url'ler de değişecektir.

Misalen, StudendContorller içinde Action metotları tanımlayalım ve bu Action metotlara bazı Route'ler tanımlayalım.

    public class StudentController : Controller
    {
        public IActionResult Index() => View();

        [Route("student/{id:int}")]
        public IActionResult Detail(int id) => View();

        [Route("student/list", Name = "getlistroute")]
        public IActionResult GetList() => View();

        [Route("/student/filter", Name = "filterstudentroute")]
        public IActionResult GetList(int age, string name) => View();
    }

Index Action metodu haricindeki tüm Action metodlarına Attribute olarak Route tanımladık. Şimdi ise Index Action metoduna ait View oluşturalım. Bu View'de; Anchor Tag Helper'ler yardımıyla, Route yaplarına uygun Url'ler oluşturalım.

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

@{
    var ang = new Dictionary<string, string>
    {
        { "age", "21" }, 
        { "name", "Hasan" }
    };
}

<a asp-controller="Student" asp-action="Index">Index</a> <br />
<a asp-controller="Student" asp-action="GetList">GetList</a> <br />
<a asp-controller="Student" asp-action="Detail" asp-route-id="47">Detail</a> <br />
<a asp-controller="Student" asp-action="GetList" asp-route-age="21"> GetList → Age: 21 </a> <br />
<a asp-route="getlistroute">GetList</a> <br />
<a asp-route="filterstudentroute" asp-all-route-data="ang">GetList → Age: 21, Name: Hasan</a> <br />
<a asp-controller="Student" asp-action="GetList" asp-fragment="#İbrahim">GetList → #İbrahim</a> <br />

Index View'imizi oluşturduktan sonra projemizi çalıştıralım.

<a> tagları arasında kalan metinleri ekrana bastı ve bu metinlere link verdik. Verilen linkleri görmek için, fare ile sağ tık → sayfa kaynığını görüntüle sekmesine tıklayalım.

<a href="/Student">Index</a> <br />
<a href="/student/filter">GetList</a> <br />
<a href="/student/47">Detail</a> <br />
<a href="/student/filter?age=21"> GetList → Age: 21 </a> <br />
<a href="/student/list">GetList</a> <br />
<a href="/student/filter?age=21&amp;name=Hasan">GetList → Age: 21, Name: Hasan</a> <br />
<a href="/student/filter##&#x130;brahim">GetList → #İbrahim</a> <br />

karşımıza bu görütü çıkacaktır.

Bu yazımızın sonuna geldik, bu şekilde Tag Helpers konusu bitirmiş olduk. İlgili projeye github adresinden ulaşabilirsiniz. İlgilinenlerin faydalanması ümidiyle.