Date Image Friday, October 16, 2009 | Kategoriler | Asp.Net, Javascript, Ajax, Tümü

Jquery İle Json Data Çekerek Ürün Sayfası Hazırlamak

   Uygulamalarda, bazen verilerin sayfa postback olmadan asenkron olarak gösterilmesi istenir. Bu gibi durumlarda genellikle ajax update panel kullanarak hiçbir şey değişmemiş gibi işlemlerinizi yapıp datalarınızı yayınlayabilirsiniz. Ancak update panel kullanmak istemeye bilirsiniz. Benim de çok fazla kullandığım en başarılı javascript kütüphanelerinden biri olan Jquery yi kullanarak json formatında veri çekebilirsiniz. bu durumda verileriniz, kendi oluşturmul olduğunuz bir class olabilir. Json ile kendi tiplerinizi isteyebilirsiniz hiç bir sorun olmayacaktır. Örneğimde ben class oluşturmak yerine object tipinde product oluşturmayı tercih ettim.

[System.Web.Services.WebMethod]

        public static object[] GetProducts()

        {

            List<object> products = new List<object>();

            products.Add(new { ProductId = "1", ProductName = "book" });

            products.Add(new { ProductId = "2", ProductName = "table" });

            products.Add(new { ProductId = "3", ProductName = "laptop" });

            products.Add(new { ProductId = "4", ProductName = "harddisk" });

            products.Add(new { ProductId = "5", ProductName = "t-shirt" });

            return products.ToArray();

        }

Burda yaptığımız sayfada javascript ile alacağımız verilerin gönderilmesini sağlayacak metotu yazdık. Ben ürünleri elle oluşturdum, veritabanından da çekilebilirdi.Gördüğünüz gibi new keywordü ile yeni bir nesne oluşturdum ve ProductId ve ProductName diye 2 tane property yarattım.Object tipinde dizi olarak dataları döndürdüm.

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

    <script language="javascript">

 

        $(document).ready(function() {

            Fill();

        });

       

        function Fill() {

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

            $.ajax({

                type: "POST",

                url: "ajaxJqueryProcess.aspx/GetProducts",

                data: "{}",

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

                dataType: "json",

                success: function(result) {

                $("#products").append("<h3>"+ result.d.length +" ürün gösteriliyor..</h3>");

                $.each(result.d, function(p) {

                $("#products").append("<a href='/products.aspx?id=" + this.ProductId + "'>" + this.ProductName + "</a><br/>");

                    });

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

                }

            });

        }

    </script>

Burda da jscript kodumuzu yazdık. gördüğünüz gibi url de belirtiyoruz nerden veri alacağımızı.successde de gelen verileri alıp işliyoruz.

<body>

    <form id="form1" runat="server">

    <img id="loading" src="images/ajax-loader.gif" />

    <div id="products">

    </div>

    </form>

</body>

Gelen veriler arasında dönüp products idli divimiz içine append metoduyla linkler ekliyoruz. İşlemler bitince de loaderımızı gizliyoruz ve datalarımız ekrana geliyor.

 jsonProduct

Etiketler :