Jquery ile veritabanından veri çekmek (SQL ve Json)

  • 03.07.2012 17:55
  • Jquery
  • 23371

Örnek verirsem daha kalici olacagini düsündügüm için Jquery ile veritabanindan veri çekmek isimli makalemize bir örnekle baslayalim. Bir e-ticaret sitesi gelistirdigimizi düsünelim. Her alisveris isleminde oldugu gibi bu projede de “siparis” kayitlarini tuttugumuz bir bölümümüz olacaktir. Kullanicinin belirli zamanlarda vermis oldugu siparisleri bir sayfada listeledigimizi düsünürsek, genelde sadece siparisin master kismini, yani siparisin temel bilgilerini gösteririz. Detayinda ise ürünler olur.

Ayni anda hem siparisleri listelemek, hem de siparis kiriliminin altinda ürünleri göstermek sayfamizin geç açilmasina sebep olacaktir. Bu yüzden sadece siparisleri listeleyip, detay butonuna tikladigimizda sayfayi postback yapmadan jquery ile databaseden siparis detayini, yani ürünleri çekecegiz.

Bu islem için ilk önce Jquery dosyalarini projemize ekliyoruz. Bu dosyalar araciligiyla hem C# kodlarimizi çalistiracagiz, hem de dialog penceresini açacagiz.

Javascript kütüphaneler:

<script src="Scripts/jquery-1.6.2.min.js"type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.widget.js"type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.core.js"type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.dialog.js"type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.position.js"type="text/javascript"></script>

 

Detay butonuna tikladigimizda açacagimiz pop-up:

<div id="siparisDetay"title="SiparisVerilen Ürünler"  style="display:none; width:500px; padding:15px; border:1px solid#CCCCCC" class="oval">

        <div id="imgLoading" style="text-align:center"><imgsrc="Styles/images/loading.gif"alt="AlternateText" /><br /><span>Ürünler Yükleniyor...</span></div>

        <table id="tblSiparisDetay" border="0" width="100%" cellpadding="15" cellspacing="0">

        </table>

    </div>

 

Bu kisim ise Jquery ve Asp.net ile Sql' den veri çektigimiz kisim:

<script type="text/javascript">

        functionSiparisDetayGetir(id) {

            $("#imgLoading").show();

            $("#siparisDetay").dialog({width: 520 });

            $("#tblSiparisDetaytr").remove();

            $.ajax({

                type: "POST",

                url: "UyeSiparisi.aspx/SiparisDetayGetir",

                data: "{id:'"+ id + "'}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (msg) {

                    for(var i = 0; i < msg.d.length; i++) {

                        var appnd = "<tr><td><imgsrc='UrunResimleri/" + msg.d[i].SepetUrunu.UrunResmi + "' style='width:50px;height:50px'/></td><td>" +msg.d[i].SepetUrunu.UrunAdi + "</td><td>"+ msg.d[i].UrunAdedi + "Adet</td><td>" + msg.d[i].UrunAdedi *msg.d[i].SepetUrunu.ListeFiyati + "TL</td></tr>";

                        $("#tblSiparisDetay").append(appnd);

                    }

                    $("#imgLoading").hide();

                }

            });

        }

    </script>


Jquery kodumuz ile baglandigimiz metod(Bu metod static olmali ve [Webmethod] attribute niteligini almis olmali): (C# kodumuz)

[WebMethod]

public static List<SepettekiUrunler>SiparisDetayGetir(int id)

{

    List<SepettekiUrunler> urunler = new Siparis().GetSiparisDetayi(id);

    returnurunler;

}

Yaptigimiz islemlere kisaca bir göz atalim: Ilk önce javascript dosyalarimizi projemize ekliyoruz. Daha sonra “siparisDetay” id’ si ile bir div olusturuyoruz. Içerisine bir de ürünler yüklenirken “ürünler yükleniyor” mesaji verirken dönen bir loading resmi ekliyoruz. tblSiparisDetay adiyla olusturdugumuz tabloya ise veritabanindan gelen ürünleri javascript kodumuzun içerisinde ekleyecegiz.

Isin html kismini bitirdikten sonra gelelim Javascript kodlarimiza: SiparisDetayGetir isminde bir fonksiyon olusturuyoruz. Ve bu fonksiyonu tikladigimiz butonun onclick eventine atiyoruz. Metoda parametre olarak ta siparisId sini verelim ki, o siparise ait ürünleri çekebilelim:

<a onclick='SiparisDetayGetir(<%#Eval("SiparisId")%>)' href="#">Detay</a>

Javascript kodu ilk çalistiginda yükleniyor resmini gösteriyoruz. Yükleniyor resmi kullaniciya görüntülenirken biz de diger taraftan ürünleri çekiyoruz. Her tiklamada tablonun içerisini bosaltmak için de tüm satirlari siliyoruz. Metodta görünen “url:uyesiparisi.aspx/SiparisDetayGetir” kismi uyesiparisi sayfasindaki SiparisDetayGetir metodunu çagiracagimizi gösteriyor. Hemen altindaki data satirinda ise parametre olarak aldigimiz siparisId yi gönderiyoruz. For kismnda ise metoddan dönen ürün listesini dönerek popup içerisindeki tblSiparisDetay tablosuna satir satir ekliyoruz.

Ekleme islemi bittikten sonra da loading animasyonunu tekrar gizliyoruz. Jquery ile veritabanindan veri çekmek bu kadar kolay ;)

 

Örnek Resimler
Siparis ListesiJquery ve Asp.net ile Sql'den veri çekmek-Siparis Listesi

 

Butona tikladikdan sonra açilan pop-up, ürünler veritabanindan çekiliyor:Jquery ve Asp.net ile Sql'den veri çekmek-Urunler-Yukleniyor

 

Ürünler tabloya, satir satir yazildi:Jquery ve Asp.net ile Sql'den veri çekmek-Urunler-Yuklendi.jpg

Bu yazıya yapılan yorumlar:

  • Güven Şeref Uysal

    29.01.2017 20:27

    msg.d[i].SepetUrunu.UrunAdi Yukarıdaki kodda SepetUrunu ile ne kast edilmektedir acaba.Tablo ismimi

  • Mehmet Akif Vurucu

    09.12.2016 12:50

    harika anlatım hocam teşekkürler

  • Deniz Yıldız

    17.04.2013 18:05

    Merhabalari yaptginiz örnek cok güzel ama ben jquery'ye yeni basladim ve c# kafasiyla düsünüyorum. Diyorum ki; Nerde bunun sqlconnection'u, Nerde bunun datatablei. Birde projeyi paylasma imkaniniz varmi. Daha açiklayici olur. Css lerini paylasmasanizda önemli degil.

  • Raynburn

    14.11.2012 14:00

    Css'lerinizi çok begendim. Rica etsem bu css'lerinizi bana mail olarak gönderebilir misiniz ?

  • Gökhan Aydın

    06.08.2012 11:47

    Merhabalar yazilima yeni baslamis biri olarak makaleniz çok hosuma gitti yalniz çaliistiramadim. heralde c# kod kismini yanlis yazdim. o kismini bana mail olarak gönderebilir misiniz acaba ? Tesekkür ederim yardiminiz için

Siz de düşüncelerinizi yazabilirsiniz:

;