Web Günlüğü

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();
            
        }
    }

$(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