ASP.NET ortamında Jquery, Ajax ve JSON ile sayfada yüklenen resimlere resim yükleniyor efekti vermek |
|||||||||||||||
Daha önce resim galerisini ASP.NET ve Ajax ile nasıl yapıldığını yazmıştım.
Fakat resmin tamamen yüklenmesini beklemeden gösteriyordu. Bu yazımda biraz daha
farklı bir uygulama yazacağım.
3'er hücreden oluşan 3 satırlı bir tablo düşünün. Her hücrenin içinde bir tane
katman ve resim olsun. Bu şekliyle sayfadaki resimler tam yüklenmeden
gösterilecek. Bunun yerine resimler yüklene kadar arka planda animasyonlu bir
gif image olsun (aşağıdaki gibi). Resim yüklendikten sonra da resim hücrede
gösterilsin.
![]() ![]() İsterseniz ASP.NET-Jquery-ajax-json-yüklenen-resimlere-resim-yükleniyor-efekti-vermek linkinden çalışır haline de bakabilirsiniz. Ajax ile resim yükleniyor efekti vermek için sunucu tarafinda kullanacağımız yöntem:Yapacağımız uygulamanın kullanıcı taraflı programlamasını Jquery ile yapacağız. Resimlerin özniletik bilgilerini Jquery ile sunucudan JSON isteğinde bulunarak yapacağız. Aldığımız bilgiler img elementinin "alt", "src" ve "title" özniteliklerini içerecek. Tablomuzda toplam 9 hücre ve 9 resim olacağından sunucuda tarafında buna uygun bir JSON verisi yaratacağız. Bir img elementi için isteyeceğimiz JSON verisi şu şekilde olacak : {"title":"Güneş","description":"manzara","url":"1.jpg"} Bu veriyi sunucu tarafında yaratmamız gerekiyor. Bunun için ASP.NET JavaScriptSerializer sınıfından yararlanacağız. Bu sınıf .NET objelerini JSON verisine dönüştürebiliyor. Daha düşük hata olasığıyla JSON verisini yaratmak için verimizi temsil edecek bir class oluşturacağız. Class'ın veri alanları "title", "description" ve "url" olsun. Projemize New Item olarak C# dilini seçip Web Form ekleyelim. .cs dosyasına JSON verisinine dönüştürülecek objenin klasını yaratalım.class jsonimage { public string title { get; set; } public string description { get; set; } public string url { get; set; } public jsonimage(string title, string description, string url) { this.title = title; this.description = description; this.url = url; } public jsonimage() { } } protected void Page_Load(object sender, EventArgs e) { //json istegi olup olmadığını kontrol et if (Request.QueryString["json"] == "true") { jsonimage json; //Json datamızı oluşturacak classımız JavaScriptSerializer ser = new JavaScriptSerializer(); // birden fazla data objemızı json'a çevirmek için objeleri liste halinde // teker teker yaratıp listeye ekliyoruz. // json objemizi temsil edecek jsonimage tipi List'yi oluşturuyoruz List<jsonimage> im = new List<jsonimage>(); json = new jsonimage("Güneş", "manzara", "1.jpg"); im.Add(json); json = new jsonimage("dere", "yeşillik", "2.jpg"); im.Add(json); json = new jsonimage("kaya", "manzara", "3.jpg"); im.Add(json); json = new jsonimage("deniz", "manzara", "4.jpg"); im.Add(json); json = new jsonimage("orman", "yeşillik", "5.jpg"); im.Add(json); json = new jsonimage("çiçek 1", "yeşillik", "6.jpg"); im.Add(json); json = new jsonimage("çiçek 2", "yeşillik", "7.jpg"); im.Add(json); json = new jsonimage("çiçek 3", "yeşillik", "8.jpg"); im.Add(json); json = new jsonimage("kaplumbağa", "deniz", "9.jpg"); im.Add(json); // browser'a içerik bilgisini yolluyoruz // Response.ContentType = "application/JSON"; // browsera json datamızı elde edip yolluyoruz Response.Write(ser.Serialize(im)); //browser'a cevabın bittiğini söylüyoruz Response.End(); } } Bu haliyle internet tarayıcımızda çıktıyı görelim. Fakat JSON datasını görmek için adres satırın sonuna "?json=true" ekleyelim. ![]() Kullanıcı (istemci) tarafında resim yükleniyor efekti vermek için:Sunucu tarafındaki kodumuzu yazdıktan sonra kullanıcı tarafına geçelim. Kullanıcı tarafında yazacağımız javascript kodunun daha az yazmak için Jquery kullanacağız. Jquery ile şu işlemleri yapacağız:
$(document).ready(function(){ //tabloyu ilk başta göstermiyoruz $('#tablo').hide(); $("#getir").click(function(){ $('#tablo').show(); $.getJSON("imageGalery.aspx",{json:true}, function(data){ //her json verisi için fonksiyonu çağırıyoruz $.each(data, function(i,item){ // her json verisi için img elemtini yaratıyor // ve özelliklerini giriyoruz. // burada dikkat etmemiz gereken resim tam yüklenene // kadar img elementini eklemiyoruz. // bu yüzden resim yüklendikten sonra yapılacak // işi sonraki fonksiyonda ayrıca belirtiyoruz. var a=$("<img>").attr( "src", item.url).attr( "title", item.title).attr("alt",item.description).load( // img elementini burada ekliyoruz function () { // eklememiz gereken div elementini bulup önce // boşaltıyor sonra img elementini ekliyoruz. // gosterilecek resim sayısı part klasını // kullanan div elementi sayısını geçmemeli if ( i < $('.part').size()) $(".part:eq("+i+")").empty().append(a); });//.each });//callback fonksiyonu });//getJSON });//click fonksiyonu });//document ready <form name="form1" method="post" action="imageGalery.aspx" id="form1"> <div> <input id="getir" type="button" value="button" /> <table id="tablo" > <tr> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> </tr> <tr> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> </tr> <tr> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> <td> <div class="part" ></div> </td> </tr> </table> </div> </form> Jquery ve Ajax ile ASP.NET ortamında resim yükleniyor efekti JSON verisi kullanarak yaptık. Siz isterseniz XML kullanabilirsiniz. JSON şart değil tabii. Fakat JSON kullanımı açısından daha rahat olduğu kesin. Uygulama ile ilgili dosyaları linkinden indirebilirsiniz. |
|||||||||||||||
|
|||||||||||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
Web programlamayla ilg ..
PHP ile Regular Expres ..
Beginning JSF™ 2 APIs ..
Jquery ve PHP ile Ajax ..
ASP.NET ortamında Jque ..
PHP PEAR MDB2 modulü i ..
MySql veritabanı bağla ..
SQL injection ve Korun ..
PHP Pear MDB2 modülü i ..
Büyük boyutlu tablolar ..
PHP ile Regular Expres ..
Beginning JSF™ 2 APIs ..
Jquery ve PHP ile Ajax ..
ASP.NET ortamında Jque ..
PHP PEAR MDB2 modulü i ..
MySql veritabanı bağla ..
SQL injection ve Korun ..
PHP Pear MDB2 modülü i ..
Büyük boyutlu tablolar ..
Etiketler
| Ajax | Animasyon | Asenkron | Class | Çek-bırak | Çoklu-dosya | Domdocument | Iframe | Javascript | Jquery | Mysql | Php | Rozet | Singleton-patten | Tasarım | Tasarım-şablonu | Veritabanı | Veritabanı-dizayn | Xml | Xmlhttprequest | Yorum-ekleme |arama
Loading
sosyal




