Ajax ile veritabanından veri çekme

  • 10.11.2015
  • tayyipyetis
  • JQuery

Günümüzde ASP.Net''in durum yönetimi sistemi gözdeliğini oldukça yitirdi. bunun başlıca sebeplerinden birkaçı en ufak bir işlemde dahi sayfanın yenilenmesinin gerekmesi ve bu sebepden gereksiz yere zaman kaybı ve Server-Client arası data miktarının çoğalmasıdır. Doğal olarak bu da interaktif uygulamaların geliştrilmesini önlüyordu. örneğin sayfaya dinamik kontrol eklenmesi gereken zamanlarda bunun için Asp.Net sınır bozucu sınırlamalar ve aksaklıkları beraberinde getiriyordu. kontrollerin eklenmesi, bunların event''larının oluşturulması tetiklenmesi vb. gibi işlemler uğraştırıcı oluyordu. geçmiş zamana kadar bu tip uygulamalar için Flash''dan yardım alınıyordu. hatta komple Flash olarak tasarlanan siteler bile oluyordu. tabii ki bu da tatmin edici bir çözüm getirmedi. sayfa yenilemeye gerek kalmasa da sitenin yüklenmesi sırasında fazladan beklenmesi gerekiyordu.

Neyse ki 2006 yılında John Resığ tarafından JQuery açık kaynak Javascript kütüphanesi tasarlandı ve Javascript''in nimetleri yavaş yavaş meyvesini göstermeye başladı. Artık karmaşık uygulamaları bile daha az satır yazarak yapabiliyor hale geldik. JQuery hakkında daha fazla bilgiye sahip olmak için tr.wikipedia.org/wiki/JQuery adresini ziyaret edebilirsiniz. Bu derste ise JQuery altyapısıyla tarayıcı tabanlı kullanılan AJAX teknolojisini açıklamak için bir örnek yapacağız. Örnekte VStudio 2012 VB.Net dili kullanılmıştır. kullanım açısından vb.net ile C# arasında belirgin bir fark yoktur. olanları da zaten açıklayacağız

1- Yeni bir web projesi açın ve bir webform ekleyin. basit olması açısından harici Javascript dosyası kullanmayacağız dahili yazacağız. dosyanın head ve script tagları arasına aşağıdaki kodları yazın. Ajax kullanabilmek için projeye Jquery kütüphanesini dahil etmelisiniz Şuradan indirebilirsiniz

<script srç="jquery-1.2.6.min.js" type="text/javascript"/>
$(document).ready(function () {
$("#ekle").click(function () {
$(''#ajaxloading'').show();
$("#data").html("");
$.ajax({
type: "POST",
url: "Default.aspx/listİtems",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {$(''#ajaxloading'').hide();
$("#data").html(msg.d);
}});});});
</script>

AJAX kodlarını mutlaka bir fonksiyonun içine yazmalısınız tek başına çalışmaz. örneğin. document.ready ya da bir elementin click olayı olabilir. Ajax''in ajaxŞtart, ajaxŞtop, ajaxError, ajaxŞend, ajaxŞuccess gibi extra fonksiyonları vardır. bunlara ileriki deslerde değineceğiz. yukarıdaki kodlar temel bir ajax işlemi gerçekleştirmeniz için yeterlidir burada önemli olan parametreler ÜRL, DATA ve SUCCESS ''dir. tahmin edileceği gibi ürl ajax''in hangi sayfa, ya da sayfadaki static fonksiyonun çağırılacağını belirtir. data ise bu fonksiyonun parametrelerini ve değerlerini belirtir. success ise işlem başarılı olduğunda çalıştırılacak kodları error ise hata olduğunda çalışacak kodları barındırır. bu örnekte data parametresinin içi boş. onu şu şekilde kullanabilirsiniz: data: ''{"değer1":"'' + değer1 + ''", "değer2":"'' + değer2 + ''"}'',

<form id="form1">
<input id="ekle" type="button" value="getir" />
<div id="ajaxloading" style="display:none; position:absolute;">
<img src="ajaxloading.gif" />
</div>
<div id="data">   </div>
</form>

buradaki data class''ına sahip div'in içine ajax''dan dönen html kodları dinamik olarak yerleştirilecek ve işlem başarılı olacaktır. dönen veri Json tipinde olacağı gibi html de olabilir veya sizin özel olarak belirlediğiniz bir değer de olabilir. tabii ki böyle bir değer döndürmek için Server taraflı static fonksiyon olması gerekli. fonksiyon static olduğu için sınırlı düzeyde kullanabiliyorsunz örneğin sayfadaki kontrollere ve bazı class''lara ulaşamazsınız 

<System.Web.Services.WebMethod>
Public Shared Function listItems(id As String, path Aş String) As String
Bağlan()
Dim yenipath As String
If id = "" Then  yenipath = path Else   yenipath = path + "/" + id
Dim dt_folder As DataTable = veritabanı.tablogetir("SELECT * FROM folders WHERE path = ''" & yenipath & "''")
Dim dt_file As DataTable = veritabanı.tablogetir("SELECT * FROM files WHERE path = ''" & yenipath & "''")
Dim vstr As String = ""
For k = 0 To dt_folder.Rows.Count - 1
vstr += getFolder(dt_folder.Rows(k).İtem(0), dt_folder.Rows(k).İtem(1),
dt_folder.Rows(k).İtem(2))
Next
For k = 0 To dt_file.Rows.Count - 1
vstr += getFile(dt_file.Rows(k).İtem(0), dt_file.Rows(k).İtem(1), dt_file.Rows(k).İtem(2))
Next
Kapat()
Return vstr
End Function

Yukarıdaki fonksiyon kendi yazdığım bir özel bir fonksiyon bu sizde farklı olabilir ama önemli olan return kullanarak geriye string turunde değer döndürmesi. fonksiyondaki ''id'' ve ''path'' parametrelerini Ajax''daki data parametresinden getiriyoruz. örneğimiz bu şekilde. siz de buradaki temel kodları kullanarak basit ajax uygulamaları geliştirebilirsiniz

İyi çalışmalar...

Mustafa Tayyip YETİŞ

Yorum Yap

Diğer Makaleler

Etiketler