Merhaba arkadaşlar bu makalemizde jquery nin bizde sunmuş olduğu tmpl kütüphanesini kullanarak tekrarlanan verileri bir repeater mantığı gibi bind etme yöntemini inceleyeceğiz.Bu yöntemin avantajlarına gelecek olursak;  asp.net sayfada anlık veri güncelleme işlemi bildiğiniz gibi updatepanel ve timer ikilisi kullanarak yapılabiliyor fakat bu yöntem bazen sayfadaki diger companentler ile senkronize çalışmada sıkıntı çıkartabiliyor css kaymaları dropdownlisteleri sürekli postback etme gibi. fakat bu yöntem tamamen javascript tabanlı olacağı için bir timer veya postback olayına ihtiyaç duymadan verileri güncelleyebileceğiz.

Makalemize gelcek olursak öncelikle gerekli olan jquer.tmpl.js dosyasını http://www.kodyazan.com/downloads/jquery.tmpl.js  adresinden indirebilirsiniz.

<table id="listem">
    <tr> <%-- bu tr başlık için kullanılmıştır--%>
       <td><strong>AD</strong>  </td>
       <td><strong>SOYAD</strong> </td>
    </tr>
</table>
<script id="kayitlar" type="text/x-jquery-tmpl">
    <tr>
       <td>${Ad}</td>
       <td>${Soyad}</td>
    </tr>
</script>

Verilerimizi listeleyeceğimiz bir table oluşturuyoruz ve id sine listem diyoruz ve bununla birlikte tekrarlayacak olan yapım table içindeki tr ler için ise script tagı açıyoruz ve repeaterda eval kullnadığımız yerlere ${degisken} formatını kullanıyoruz.Burda dikkat edilmesi gerek yer ise id ler ve script tagının type ni text/x-jquery-tmpl olarak belirliyoruz verilerimizi tekrarlayacağımız kısım tamamlandı.

Şimdi ajax ile verilerimiz webmethod dan çekip bu tmpl scriptine bind edeceğiz.

<script type="text/javascript">
          setInterval(function () {
            $(document).ready(function () {
                var dataaa;
                $.ajax({
                    type: "POST",
                    url: "/index.aspx/AdveSoyadGetir",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        dataaa = eval(r.d);
                        $("#kayitlar").tmpl(dataaa)
        .appendTo("#listem");
                    },
                    failure: function (response) {
                    }
                });

            });
          }, 1000);
</script>

index.aspx in codebehind tarafında oluşturmuş olduğumuz webmethod dan verileri çekip tr ler için düzenlemiş olduğumuz script e bind ediyor ve table appendTo methodu ile ekliyoruz ve her bi saniyede verilerimizin güncellenmesi için setInterval bloğuna alıyoruz.

AdveSoyadGetir webmethodumuz.

 [WebMethod]
        public static string AdveSoyadGetir()
        {

            List<isim> isimler = new List<isim>();
            isimler.Add(new isim() { Ad = "Murat", Soyad = "Deniz" });
            isimler.Add(new isim() { Ad = "Ayşe", Soyad = "Yıldız" });
            isimler.Add(new isim() { Ad = "Selim", Soyad = "Taş" });
                StringBuilder sb = new StringBuilder();
                sb.Append("[");
                foreach (var item in isimler)
                {
                    sb.Append("{");
                    sb.Append(string.Format("Ad:'{0}', Soyad:'{1}'", item.Ad, item.Soyad));
                    sb.Append("},");
                }
                sb = sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                return sb.ToString();
        }
        public class isim
        {
            public string Ad { get; set; }
            public string Soyad { get; set; }
        }

bu method da verileri string builder yöntemiyle json formatına getiriyoruz çünkü aspx tarafında verileri bind ederken datalarımız çoklu veri tipinde olması gerkiyor.Burada verilerimi bir listeye elle veri girişi yaparak oluşturdum siz veri tabanınızdan verilerinizi çekip döngüye bu veri topluluğunu verebilirsiniz.

Uygulamanın çıktısı aşağıdaki gibi olacaktır.

Uygulamanın proje halini http://www.kodyazan.com/downloads/jquerytmpl.rar bu linkten indirebilirsiniz.

İyi Çalışmalar