Piyasada çok fazla alternatif olarak kullanabileceğimiz template engine bulunmaktadır ben handlebars’ı kullanmadan önce çok fazla araştırma yaptım ve bir sürü template engine kullandım sonunda seçimimi Handlebars’dan yana tuttum. Açıkçası template engine seçiminin projenin ihtiyaçları, syntax yada özelliklerden hangileri geliştiriciyi daha çok cezbeder ise tercih değişebilecektir.

İçerik göster

.NET ile Server Side Handlebars Template Engine Kullanımı

Hemen lafı daha fazla uzatmadan örnekler ile yolumuza devam edelim yapacağımız basit örnekte her template engine’in yaptığı iş olan {{model_adi}}(bu kullanım handlebars’da geçerlidir diğer birçok template engine’de bu konuda aynı syntax’ı kullanmaktadır.) şeklinde yer tutucu(placeholder) belirliyoruz ve compile ederken geçtiğimiz model içerisinde model_adi diye bir özellik varsa bu özelliteki değer ile yer tutucu değişecektir.

Örnek 1 – Temel Kullanım

namespace HandleBars.Net {

    using System;
    using HandlebarsDotNet;

    class Program {
        static void Main( string[] args ) {
            var source = @"
                <div class='baslik'>
                    <h1>{{baslik}}</h1>
                    <div class='govde'>
                        {{govde}}
                    </div>
                </div>";

            var template = Handlebars.Compile( source );

            var veri = new {
                baslik = "Yeni makalem",
                govde = "Bu makalede Handlebarsjs kullanıyoruz!"
            };

            var result = template( veri );

            Console.WriteLine( result );
            Console.ReadLine();
        }
    }
}

namespace HandleBars.Net {

using System;

using HandlebarsDotNet;

class Program {

static void Main( string[] args ) {

var source = @"

<h1>{{baslik}}</h1>

</div>

</div>";

var template = Handlebars.Compile( source );

var veri = new {

baslik = "Yeni makalem",

govde = "Bu makalede Handlebarsjs kullanıyoruz!"

};

var result = template( veri );

Console.WriteLine( result );

Console.ReadLine();

}

Üstteki kodda source değişkeninde template yer alıyor. Sonrasında Handlebars.Compile(source) adlı metoda source değişkenimizi parametre olarak geçiyoruz.

Daha sonra veri nesnesi içerisinde source değişkeninde tanımlı template içerisindeki yer tutucularla aynı isimde değişkenler tanımlayıp değerler veriyoruz böylelikte bizim veri nesnemiz içerisindeki değerler ile source adlı template içerisindeki yer tutucular yer değiştirecek. Compile işlemi template(veri) satırında yapılmaktadır ve compile sonucundada result adlı değişkene sonucumuz aktarılacaktır.

Sonuç

<div class='baslik'>
    <h1>Yeni makalem</h1>
    <div class='govde'>
        Bu makalede Handlebarsjs kullanıyoruz!
    </div>
</div>

<h1>Yeni makalem</h1>

Bu makalede Handlebarsjs kullanıyoruz!

</div>

Örnek 2 – Partial Kayıt ve Kullanımı

Eğer sürekli tekrarlanan kodlarınız varsa kendi partial(kısmi) template’lerinizi oluşturup kolayca istediğiniz yerde kullanabilirsiniz.

using System.IO;

namespace HandleBars.Net {

    using System;
    using HandlebarsDotNet;

    class Program {
        static void Main( string[] args ) {
            var source = @"
                    <h2>İsimler</h2>
                    {{#isimler}}
                        {{> kullanici}}
                    {{/isimler}}";
            var partialSource = "<strong>{{ad}}</strong>\n";
            using( var reader = new StringReader( partialSource ) ) {
                var partialTemplate = Handlebars.Compile( reader );
                Handlebars.RegisterTemplate( "kullanici", partialTemplate );
            }

            var template = Handlebars.Compile( source );

            var veri = new {
                isimler = new[]
                {
                        new
                        {
                            ad = "Murat"
                        },
                        new
                        {
                            ad = "John"
                        }
                    }
            };

            var result = template( veri );

            Console.WriteLine( result );
            Console.ReadLine();
        }
    }
}

using System.IO;

namespace HandleBars.Net {

using System;

using HandlebarsDotNet;

class Program {

static void Main( string[] args ) {

var source = @"

<h2>İsimler</h2>

{{/isimler}}";

var partialSource = "<strong>{{ad}}</strong>\n";

using( var reader = new StringReader( partialSource ) ) {

var partialTemplate = Handlebars.Compile( reader );

Handlebars.RegisterTemplate( "kullanici", partialTemplate );

}

var template = Handlebars.Compile( source );

var veri = new {

isimler = new[]

{

new

{

ad = "Murat"

new

{

ad = "John"

}

};

var result = template( veri );

Console.WriteLine( result );

Console.ReadLine();

}

Sonuç

<h2>İsimler</h2>
<strong>Murat</strong>
<strong>John</strong>

<h2>İsimler</h2>

<strong>Murat</strong>

Örnek 3 – Helpers(Yardımcı) Kaydı ve Kullanımı

Eğer sürekli tekrarlanan işleriniz var ise ve oluşturulacak bir helpers ile custom template’ler oluşturabiliriz böylelikle bu helper‘ları template içerisinde istediğimiz yerde kullanabiliriz bu örneğimizde a etiketini bir helper yardımı ile oluşturacağız.

namespace HandleBars.Net {

    using System;
    using HandlebarsDotNet;

    class Program {
        static void Main( string[] args ) {
            Handlebars.RegisterHelper( "link_to", ( writer, context, arguments ) => {
                string str = "<a href='" + context.url + "'>" + context.text + "</a>";
                writer.WriteSafeString( str );
            } );

            var source = "Click here: {{link_to}}";
            var template = Handlebars.Compile( source );

            var veri = new {
                url = "http://github.com/rexm/handlebars.net",
                text = "Handlebars.Net"
            };

            var result = template( veri );
            Console.WriteLine( result );
            Console.ReadLine();
        }
    }
}

namespace HandleBars.Net {

using System;

using HandlebarsDotNet;

class Program {

static void Main( string[] args ) {

Handlebars.RegisterHelper( "link_to", ( writer, context, arguments ) => {

string str = "<a href='" + context.url + "'>" + context.text + "</a>";

writer.WriteSafeString( str );

} );

var source = "Click here: {{link_to}}";

var template = Handlebars.Compile( source );

var veri = new {

url = "http://github.com/rexm/handlebars.net",

text = "Handlebars.Net"

};

var result = template( veri );

Console.WriteLine( result );

Console.ReadLine();

}

RegisterHelper adlı metodu kullanarak link_to adında bir helper kaydı oluşturdum ve source değişkenine tanımladığım template içinde bu helper’a kullandım. link_to adında bu helper içerisinde url ve text özelliklerini kullandığımızı görüyoruz yani bu helper’i kullanmak için ve sağlıklı bir sonuç almak için url ve text özelliklerinin verilmesi gerekiyor.

Sonuç

Click here: <a href='http://github.com/rexm/handlebars.net'>Handlebars.Net</a>

1	Click here: <a href='http://github.com/rexm/handlebars.net'>Handlebars.Net</a>

Örnek 4 – Each ile döngü kullanımı

Her programlama dilinin vazgeçilmezlerinden biri olan each, foreach v.b. döngülerle aynı mantıkla çalışan handlebars #each bloğunun nasıl kullanıldığını bir örnek ile açıklayacağız. {{#each dizi}} kodlarınız {{/each}} şeklinde basit bir kullanımla dizileriniz üzerinde döngü işlemlerini yapıp kolaylıkla html elementleri üretebilirsiniz.

namespace HandleBars.Net {

    using System;
    using HandlebarsDotNet;

    class Program {
        static void Main( string[] args ) {
            var result = "";

            var source = "{{#each people}}" +
                                "<h1>{{ad}} {{soyad}}</h1>\n" +
                             "{{/each}}";

            var veri = new {
                people = new[] {
                    new
                    {
                        ad = "Murat",
                        soyad = "ÖNER"
                    },
                    new
                    {
                        ad = "Sakine",
                        soyad = "Salmanlı"
                    }
                }
            };
            var template = Handlebars.Compile( source );
            result = template(veri);

            Console.WriteLine( result );
            Console.ReadLine();
        }
    }
}

namespace HandleBars.Net {

using System;

using HandlebarsDotNet;

class Program {

static void Main( string[] args ) {

var result = "";

var source = "{{#each people}}" +

"<h1>{{ad}} {{soyad}}</h1>\n" +

"{{/each}}";

var veri = new {

people = new[] {

new

{

ad = "Murat",

soyad = "ÖNER"

new

{

ad = "Sakine",

soyad = "Salmanlı"

}

};

var template = Handlebars.Compile( source );

result = template(veri);

Console.WriteLine( result );

Console.ReadLine();

}

Üstteki kodu yorumlamak gerekirse {{#each people}} kısmında people adındaki dizi üzerinde döngü yardımıyla dönülüyor ve her bir kayıt için h1 etiketi oluşturuluyor çıktı olarak alttaki koda gözatabilirsiniz. #each döngüsü ile bilmeniz gereken bazı detaylarda var eğer döngünün index değerini almak isterseniz {{@index}} kullanımı ile o anki döngünün item’ına ait “0” tabanlı index değerine ulaşabilirsiniz. ayrıca eğer döngünün ilk item’i yada son item’ına özel yapmak istediğiniz işlemler var ise döngü içinde ilk item’da işlem yapmak için {{#if @first}} kodlarınız {{/if}} veya son item’da işlem yapmak istiyorsanız {{#if @last}} kodlarınız {{/if}} şeklinde kullanabilirsiniz.

Sonuç

<h1>Murat ÖNER</h1>
<h1>Sakine Salmanlı</h1>

1 2	<h1>Murat ÖNER</h1> <h1>Sakine Salmanlı</h1>

Örnek 5 – If bloğu kullanımı

Her programlama dilinin vazgeçilmezlerinden biri olan if bloğunu handlebars template’i içerisinde nasıl kullanabildiğimizi göreceğiz. Bir üstteki örnekte #each bloğunu işlemiştik o koda #if bloğu eklemesi yaparak örneğimize devam edebiliriz {{#each dizi}} bloğunda {{#if @last}} veya {{#if @first}} şeklinde kullanımla döngünün ilk ve son item’ini yakalayabildiğimizi söylemiştik şimdi bunu bir örnek üzerinde görelim. İlk nesnemiz olan Murat ÖNER item’i için <h1>İlk: Murat ÖNER</h1> çıktısı verecek ve son item’i olan Sakine Salmanlı için ise <h1>Son: Sakine Salmanlı</h1> diye çıktı verecek bu arada if bloğunu boolean tiplerde yada javascript’deki gibi değişkeni verip aynı kontrolü sağlayabiliyorsunuz(değer varmı, undefined değilmi, null değilmi v.b.). Şimdi örneğimize geçelim.

namespace HandleBars.Net {

    using System;
    using HandlebarsDotNet;

    class Program {
        static void Main( string[] args ) {
            var result = "";

            var source = "{{#each people}}" +
                           "{{! Yorumunuz buraya yazılacak.}}" +
                           "{{#if @first}}" +
                                "<h1>İlk: {{ad}} {{soyad}}</h1>\n" +
                           "{{/if}}" +
                           "{{!-- Yorumunuz buraya yazılacak. --}}" +
                           "{{#if @last}}" +
                                "<h1>Son: {{ad}} {{soyad}}</h1>\n" +
                           "{{/if}}" +
                         "{{/each}}";

            var veri = new {
                people = new[] {
                    new
                    {
                        ad = "Murat",
                        soyad = "ÖNER"
                    },
                    new
                    {
                      ad = "Ramazan",
                      soyad = "ÖNER"
                    },
                    new
                    {
                        ad = "Sakine",
                        soyad = "Salmanlı"
                    }
                }
            };
            var template = Handlebars.Compile( source );
            result = template( veri );

            Console.WriteLine( result );
            Console.ReadLine();
        }
    }
}

namespace HandleBars.Net {

using System;

using HandlebarsDotNet;

class Program {

static void Main( string[] args ) {

var result = "";

var source = "{{#each people}}" +

"{{! Yorumunuz buraya yazılacak.}}" +

"{{#if @first}}" +

"<h1>İlk: {{ad}} {{soyad}}</h1>\n" +

"{{/if}}" +

"{{!-- Yorumunuz buraya yazılacak. --}}" +

"{{#if @last}}" +

"<h1>Son: {{ad}} {{soyad}}</h1>\n" +

"{{/if}}" +

"{{/each}}";

var veri = new {

people = new[] {

new

{

ad = "Murat",

soyad = "ÖNER"

new

{

ad = "Ramazan",

soyad = "ÖNER"

new

{

ad = "Sakine",

soyad = "Salmanlı"

}

};

var template = Handlebars.Compile( source );

result = template( veri );

Console.WriteLine( result );

Console.ReadLine();

}

Template İçinde Comment Kullanma

Eğer template içinde yorum satırnları kullanmak istiyorsanız ve bu yorumunuzun html çıktısında yer almasını istemiyorsanız {{! Yorumunuz buraya yazılacak. }} veya {{!– Yorumunuz buraya yazılacak. –}} şeklinde kullanabilirsiniz.

[fa class=”fa fa-github”][/fa] Kodların yer aldığı projeye buradan ulaşabilirsiniz.

5/5 - (3 votes)

Davut Alper BALCI dedi ki:
6 Ocak 2021, 16:09
Emeğine sağlık faydalı bir paylaşım olmuş.
Yanıtla
- Murat ÖNER dedi ki:
  8 Ocak 2021, 14:23
  Teşekkür ederim.
  Yanıtla
Tagi dedi ki:
26 Şubat 2017, 11:20
Çok faydalı
Yanıtla
- Murat ÖNER dedi ki:
  26 Şubat 2017, 23:08
  Teşekkür ederim, faydalı bulmuş olmanıza sevindim.
  Yanıtla
maillot de foot dedi ki:
26 Şubat 2017, 09:30
IS GOOD
Yanıtla

Kategoriler

Bloga e-posta ile abone ol

.NET ile Server Side Handlebars Template Engine Kullanımı

.NET ile Server Side Handlebars Template Engine Kullanımı

Örnek 1 – Temel Kullanım

Sonuç

Örnek 2 – Partial Kayıt ve Kullanımı

Sonuç

Örnek 3 – Helpers(Yardımcı) Kaydı ve Kullanımı

Sonuç

Örnek 4 – Each ile döngü kullanımı

Sonuç

Örnek 5 – If bloğu kullanımı

Template İçinde Comment Kullanma

You may also like...

5 Responses

Bir yanıt yazın Yanıtı iptal et

.NET ile Server Side Handlebars Template Engine Kullanımı

Örnek 1 – Temel Kullanım

Sonuç

Örnek 2 – Partial Kayıt ve Kullanımı

Sonuç

Örnek 3 – Helpers(Yardımcı) Kaydı ve Kullanımı

Sonuç

Örnek 4 – Each ile döngü kullanımı

Sonuç

Örnek 5 – If bloğu kullanımı

Template İçinde Comment Kullanma

You may also like...

C# rastgele(random) kelime üretme nasıl yapılır?

C# 7.0 İle Beraber Gelecek Yenilikler

.NET Lazy Sınıfı Nedir? ve Neden Kullanırız?

5 Responses

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin