mehmetduran.com - Paylaşmak Güzeldir...
Asp.net'te Jquery ve Ajax ile Veritabanından Veri Alma
Bu yazımda jquery ve ajax ile veritabanından veri almayı göstermeye çalışacağım. Bundan önce yazdığım yazı da yine bu konuyla ilgili olarak serverdan tarih bilgisini almayı göstermiştim. Yine buna benzer olarak bu sefer de veritabanından bilgi çekeceğiz. Yine kodlarımız ve yöntemlerimiz aynı gibi. Yine webmethod kullanacağız. Fakat biraz da farklılıklar var. Yazacağımız webmethod html kodların çıktısını yani html kod dönderecek. Böylece herhangi bir kontrolün html kodlarını nasıl elde edebilceğimizi de görmüş olacağız. Fazla uzatmadan kodlarımıza bakalım.

Öncelikle serverdan datayı çekeceğimiz webmethod kodlarımız şöyle olacak:

    [System.Web.Services.WebMethod]
    public static string ekle()
    {
        System.Threading.Thread.Sleep(1000);

        OleDbConnection bg = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/isimler.mdb"));

        string sorgu = "select isim from isimler";
        OleDbDataAdapter adaptor = new OleDbDataAdapter(sorgu, bg);
        DataTable tablo = new DataTable();
        adaptor.Fill(tablo);

        GridView g = new GridView();
        g.DataSource = tablo;
        g.DataBind();

        StringWriter sw = new StringWriter();
        HtmlTextWriter ht = new HtmlTextWriter(sw);
        g.RenderControl(ht);
        return sw.ToString();
    }

Daha sonra jquery kodlarımız ise şöyle olacak:

     $(document).ready(function() {
      $("#ekle").click(function() {
        $('#ajaxloading').show();
        $("#data").html("");
        $.ajax({
          type: "POST",
          url: "Default2.aspx/ekle",
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg) {
                $('#ajaxloading').hide();
                $("#data").html(msg.d);
            }
        });
      });
    });

Son olarak html sayfa kodlarımız şöyle olacak:

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

Örnek uygulamayı aşağıda görebilirsiniz. (Buton ile veritabanından bilgiler geliyor.)


Not : Bu uygulama da Visual Studio 2008 ve Asp.net 3.5 üzerinde çalışmaktadır.

Örnek uygulamayı buradan indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 05 Eylül Cuma 2008 15 40549 3,6
Ajax Asp.net jQuery Jquery Programlama Webmethod JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Dinamik Meta Tag Oluşturma Jquery ve Ajax ile Dataları Sayfalama İşlemi MySql Veri Türleri ve Select Komutu Örnekleri Asp.net Ajax İşlemlerinde ResponseFormat Belirtimi Jquery ile Tek Tek Kayan Alan Oluşturma ve Ajax ile Rss Okuma Örneği
Yorumlar
Yorum Yaz
RSS Yorum Takibi
huseyin 14 Temmuz Salı 2009 20:48 #1
Merhaba.Burada stringwriter ve htmltextwriter ı ne için kullandınız?Bir de jquery kodlarında msg.d yazdıgınız yerdeki d nin anlamı ne acaba??
Mehmet Duran 14 Temmuz Salı 2009 20:56 #2
Merhaba. O sınıflardan türettiğim nesneleri kod tarafında oluşturup veri doldurduğum Gridview`in çalıştıktan sonraki html değerini elde etmek için kullandım. Yani kod tarafın tanımladığımız ve kodla yüklediğimiz gridview'i string olarak elde ediyoruz ve bu string'i Ajax ile kullanıcıya gönderiyoruz. Kullanıcı tarafında mesajı alırken gelen mesajda msg.d ifadesindeki "d" otomatik olarak geliyor. Bunun nedeni .Net'tir. MVC ile yaptığımız Ajax işlemlerinde ise buradaki "d" olmuyor. Daha iyi anlamak için Mozilla`nın FireBug eklentisini kullanmanı tavsiye ederim.
HasanG 25 Ağustos Salı 2009 11:56 #3
Veritabanı işlemleini try-catch arasına almata fayda var. En azından hata anında return "hata" deyip devam eden ajax işlemini sonlandırmak gerek.
Mehmet Duran 25 Ağustos Salı 2009 13:29 #4
Bence hiç gerek yok. Zaten hata oluştuğu anda Ajax isteği sonlanıyor ve bu hatayı yakalayabiliyoruz. Ayrıca hatanın ne olduğunu da elde edebiliyoruz. Firebug ile bu işlemleri izlemek çok rahat. Tavsiye ederim.
enver gökmen 14 Eylül Pazartesi 2009 12:23 #5
Sanırım hasang haklı ben hata mesajını alamıyorum ajax da sonlanmıyor nerede hata var göremiyorum.sürekli loading oluyor.try cathe soktum yine ajax sonlanmıyor return dediğim halde. başka bi yerde mi hata yapıyorum acaba
enver gökmen 14 Eylül Pazartesi 2009 12:41 #6
aynısını sql server ile yaptım pageloadda çağırdığımda fonksiyon veri döndürüyor ama ajax işleminde veri gelmiyor anlamadım.
Mehmet Duran 14 Eylül Pazartesi 2009 17:09 #7
Merhaba. Ajax işlemi başarılı olduğunda jQuery kodlarımızda success: function(msg){ .. } arasında belirttiğimiz fonksiyon çalışırken herhangi bir hata durumunda da error: function(msg){ .. } fonksiyonu çalışır. Ancak bunun çalışması için kodlarda bunu belirtmeliyiz. Buradaki örnekte yok ama eklediğiniz takdirde hataları yakalayabilirsiniz. Ayrıca c# tarafında kullanılan try catch'in bu hatayla ilgisi yok.
ilhan 28 Kasım Cumartesi 2009 14:32 #8
merhaba güzel bir örnek olmuş teşekkür ederim . bu yazıyı görünce kafma takıldı bu gridview i isteğim gibi nasıl şekillendirebilirim acaba yani teplateItem ile gridview içindeki datayı istediğim gibi tabolalar ile falan şekillendirebilirmiyim . butlaka yapılır ama örnek kullanıı nasıldır acaba . tekrar teşekkürler
Mehmet Duran 28 Kasım Cumartesi 2009 14:48 #9
Merhaba. Hazır gridi şekillendirmek yerine kendi gridimizi de oluşturabiliriz. Gridi hazır olarak şekillendirmek için usercontrol kullanabiliriz. Bu usercontrol gridi doldurur ve bir çıktı verir. Biz de Ajax ile usercontrol'ün çıktısını elde edebiliriz. Bunun yerine tüm verileri liste biçiminde (json türünde) alıp, script tarafında bu verileri işleyerek script grid'ler hazırlayabiliriz. Şu anda sitemin yönetim panelinde böyle bir kullanım yapıyorum. Oldukça görsel ve performanslı oluyor. Ayrıca istediğimiz gibi şekillendirme de yapabiliriz.
mehmet 15 Mayıs Cumartesi 2010 01:09 #10
kolay gelsin mehmet arkadaşım.benim sorum şu olacak.şimdi bu sayfada gridi dikey ve yatay scroll bar içine almışsın bunu nasıl yaptın acaba? yani gridi bu şekilde konumlandırabiliyormuyuz? birde bu buttonu timer tick özelliğiyle tetiklesem her saniyede performans ne gibi değişir? bu yöntemle anlık olarak db yi nasıl görüntülerim yani başka bi yerden kayıt girildiğinde o sayfadaki grid o kaydı almış olmalı.nasıl yaparım acaba reflesh olmadan?
Mehmet Duran 15 Mayıs Cumartesi 2010 23:22 #11
Merhaba. İlk sorunda sayfada bulunan grid değil iframe. Frame sayesinde gridin olduğu sayfayı bu sayfada gösterebiliyorum. Scroll olayı ise CSS'in overflow özelliği sayesinde ayarlanabiliyor. Bu özellik ile tüm elementlere scroll verebilirsin. Diğer sorunda ise verileri Ajax ile alıyorsan Javascript içinde yer alan setInterval fonksiyonunu kullanarak verileri aldığın fonksiyonu belirli aralıklarla çağırman gerekir. Bunun için buradaki yazımı ve örneği inceleyebilirsin. Performans bakımından sadece verileri bir seferliğine değil de belirli aralıklarla birden fazla çağırma işlemi var. Günümüz alt yapısı için çok fazla sorun olmaz düşüncesindeyim.
ali 21 Mayıs Cuma 2010 18:27 #12
merhaba.jquery de secme isleminde bir yere takıldım. idsi alan div im var icerisinde id si baslik olan spanım var ben burada alanın altındaki baslıkı almaya calsıyorum. $("#alan > #baslik") olmuyor ve ya $("#alan #baslik") yine olmuyor.burada id lere göre veri çekmem gerekiyor.yani sırasına ve o elementin ismine göre degil.yardımcı olursan cok makbule gecer
Mehmet Duran 21 Mayıs Cuma 2010 22:47 #13
Öncelikle jQuery ile element seçme işlemleri için birkaç dokümanı incelemeni tavsiye ederim. Soruya gelince de eğer Id'si belli bir elementi seçecek isen başka bir elementle ilişki kurmana yok. Id tek değerdir, ait olduğu elemente özeldir. Bunun için örneğinde $("#baslik") ile seçim yapman yeterlidir. Çoklu veya hiyerarşik seçimler Id gibi tek özellikler ile değil de tag veya css class gibi değerlere göre birden çok element (element grubu) için kullanılmakta.
ali 21 Mayıs Cuma 2010 23:43 #14
tabi dediğin doğru ama ben de olmuyor.yani masterpage içerisinde textboxa erişmeye çalışıyorum.daha önce dediğin gibi <%=txtdeger.clientID%> şeklinde olanı kullanıyorum ama olmuyor.daha önce bunu denedim çalışıyodu ama bu sayfada bir divin altında oldugu icin mi textbox ı görmüyor?bir de Sayfa postback oldugunda textbox ın icerisine virgül koyuyur.yani osayfayı post edecek ne olursa olsun virgül koyuyor.mesela texte yazı giriyorum kaydet diyorum veritabanına virgüllü kaydadiyor.neden olabilr?
Mehmet Duran 22 Mayıs Cumartesi 2010 00:09 #15
Seçme işleminde önce sayfanın kaynağına bak ve sayfanın kaynağında element Id'si ne ise ona göre sen de script kodunu yaz. Bunu masterpage ile sorun yaşamamak için söylüyorum. Diğer sorunda ise sorguda hata vardır. Eğer textbox'ta virgül karakteri olmadan böyle birşey varsa sorgunu kontrol etmelisin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009