mehmetduran.com - Paylaşmak Güzeldir...
Asp.net ve Jquery Ajax ile Dizindeki Dosya ve Klasörleri Listeleme
Bu yazımda Jquery Ajax kullanarak dizindeki dosya ve klasörleri listelemeyi göstermeye çalışacağım. Yönetim panelinde sitemde yer alan dosyaların içeriklerini değiştirebilmek için bu uygulamayı hazırladım. Ancak paylaşacağım örnekte sadece dosya ve klasörleri listeleyeceğiz. Listeleme işlemini de tree olarak yapacağız ve gösterimde klasör ile dosya ikonları kullanarak birbirlerinden ayırt edeceğiz. Ayrıca sınırsız şekilde dizindeki dosyaları listeleyip görünteleyebileceğiz. Yani iç içe klasör sayısında herhangi bir sınır yok. Bu uygulamayı nerelerde kullanabiliriz. Bu şekilde menü hazırlayabiliriz veya yönetim panelinde kolaylık olması için dosyaların dizinleri elde edip link verebiliriz veya benim yaptığım gibi dosyaları seçip içeriğini düzenleyebiliriz. Listelemeden sonra yapılacak olan işlemleri size bırakalım ve kodlarımıza bakalım.

Öncelikle dosya ve klasörleri elde edip verileri çekeceğimiz C# kodlarımıza bakalım. Ajax ile yapacağımız için Webmethod hazırladım ve bu webmethod ile tüm sorgulamaları yapıp istenilen dizindeki dosya ve klasör bilgilerini elde edeceğiz. Yani tüm sorgulamaları bu webmethod üzerinden yapacağız. Webmethodumuz ise yazmış olduğum dizin class'ının bir türü ve bu türün listesini dönderiyor. Bu class ile dosya var ise dosyanın adını, klasör var ise klasör adını tutuyorum. Bu şekilde klasör veya dosya isimlerinin olduğu bir veri elde ediyorum. Webmethodumuz şu şekilde:

  // Kullandığım class
  public class dizin
  {
    public string klasor { get; set; }
    public string dosya { get; set; }
  }
 
  [System.Web.Services.WebMethod]
  public static List<dizin> Dizin_Getir(string dizin)
  {
    System.Threading.Thread.Sleep(500);
    dizin = dizin.Replace("-", "/"); // javascript ile belirlediğimiz "-" işaretini değiştiriyoruz.
    if (dizin == "")
    {
      return new List<dizin>() {  };
    }
    else
    {
      List<dizin> sonuc = new List<dizin>();
 
      //Klasör isteği
      if (dizin.EndsWith("/"))
      {
        System.IO.DirectoryInfo dosyalar = new DirectoryInfo(HttpContext.Current.Server.MapPath("~/" + dizin));
        /*Dosyaları Alma*/
        List<FileInfo> dosya_isimleri = new List<FileInfo>();
        FileInfo[] dosyalarim;
        dosyalarim = dosyalar.GetFiles("*.aspx"); dosya_isimleri.AddRange(dosyalarim);
        dosyalarim = dosyalar.GetFiles("*.html"); dosya_isimleri.AddRange(dosyalarim);
        dosyalarim = dosyalar.GetFiles("*.htm"); dosya_isimleri.AddRange(dosyalarim);
        foreach (FileInfo file in dosya_isimleri)
        {
          sonuc.Add(new dizin() { dosya = file.Name, klasor = null });
        }
        /*Klasörleri Alma*/
        DirectoryInfo[] klasorlerim = dosyalar.GetDirectories();
        foreach (DirectoryInfo folder in klasorlerim)
        {
          sonuc.Add(new dizin() { dosya = null, klasor = folder.Name });
        }
      }
      return sonuc;
    }
  }

Webmethottan ettiğimiz verileri ise javascript ile değerlendirip dosya ve klasörleri kullanıcıya listeleyeceğiz. Ayrıca dosya ve klasör ayrımını burda yapıp ikonları da burada yerleştireceğiz. Bunun için de tanımladığımız Css class kullanacağız. Ayrıca listelenen her klasöre tıklandığında tekrardan o klasör altında yer alan dosya ve klasörleri alıp listeleyeğiz. Yani sonsuz bir biçimde listeleme yapabiliyoruz ve bunu yazmış olduğumuz tek webmethod üzerinden yapıyoruz. Şimdi de Jquery kodlarımıza bakalım.

<script type="text/javascript">
  $(function() {
      dizin_al0('/');
      $("#yenile").click(function() { dizin_al0('/'); });
  });
 
  function dizin_al(dizin) {
      var adres = dizin;
      $.ajax({
          type: "POST",
          url: "ajax_dizin.aspx/Dizin_Getir",
          data: "{dizin:'" + dizin + "/'}",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          success: function(msg) {
              $("#" + dizin).html("");
              $.each(msg.d, function(i) {
                  adres = dizin;
                  if (this.klasor != null) {
                      adres += "-" + this.klasor; // "-" işaretine dikkat ediyoruz.
                      $("#" + dizin).append("<a class='klasor' onclick=dizin_al('" + adres + "')>" + this.klasor + "</a> <div id='" + adres + "'></div>");
                  }
                  else if (this.dosya != null) { $("#" + dizin).append("<a class='dosya'>" + this.dosya + "</a> "); }
              });
              $("#" + adres).show(200);
          },
          error: function(msg) { alert("Hata oluştu."); }
      });
  }
</script>

Yazmış olduğum bu kodlar ana dizin listelendikten sonra yapılacak olan istekler için yazılan kodlar. Ana dizin listelemesi için aynı kodları kullanabiliriz ama ekrana yazdırırken rahat olmak için farklı bir fonksiyon yazdım. Bunu örneği inceleyerek görebilirsiniz.

Son olarak dikkat etmemiz gereken bir nokta ise listelenen dosya ve klasörlere html kod tarafında id atıyorum ve bu id'nin unique olması için dosya veya klasörün adı ile beraber dizinini veriyorum. Ancak bu işlemde "/" karakteri sorun çıkarıyor. Bunun için de id değerini verirken bu işareti değiştirmemiz gerekiyor. Bunun için örneğimde "-" karakterini kullandım. Bu karakteri server tarafında süzerek "/" karakteri ile değiştiriyorum ve istekte bulunulan dizini elde ediyorum. Bunun için buraya dikkat etmeliyiz. Ayrıca klasör isimleri de geçerli karakterler içermeli. Aksi halde hataya düşebiliriz. Tüm bu kuralara uyduktan sonra bu uygulamayı rahatlıkla kullanabiliriz.

Kendi yönetim panelimde aynen bu şekilde kullanıyorum ve dosyaları listeleyip, istediğimi seçerek içeriğini alıyorum ve değiştirebiliyorum. Bu işlemleri de tamamen Ajax ile yapıyorum. Dosya okuma ve değiştirme işlemi için buradaki yazımdan faydalanabilirsiniz. Böylece gayet güzel ve faydalı bir uygulama yapmış oluyoruz. Bu listeleme ile daha farklı kullanımlar da gerçekleştirebiliriz. Bunlar da hayal gücümüze kalmış.
Hazırladığım örneği buradan görebilir ve buradan da indirebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 12 Temmuz Pazar 2009 8 2055 4,8
Asp.net Ajax jQuery Jquery İndir Dosya Tree Treeview List Css Webmethod Generic Class JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar 8086 Microprocessor Emulator - İndir Sudoku Uygulamam (MDSudoku v1.0) Jquery ve Ajax ile Oylama (Rating) Yapımı jQuery ile 'Yukarı Çık' Uygulaması FaceBox Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 12 Temmuz Pazar 2009 19:14 #1
Gerçekten güzel birşey. Asp.nEt e geçmeyi planlıyorum. Ama yine görsel olarak extjsnin Filetree sine bakmalısın ! :)
Mehmet Duran 12 Temmuz Pazar 2009 19:19 #2
Burada asıl nokta klasör ve dosya listeleme. Tree yapmak amacım değildi ama birazcık benzesin diye bu şekilde hazırladım. Zaten tam olarak tree sayılmaz yaptığım. İkonları da Fck editorden arakladım. :D
Salih 12 Temmuz Pazar 2009 19:36 #3
dikkat et mahkemelik olma xD
Mehmet Duran 12 Temmuz Pazar 2009 19:42 #4
Fck ücretsiz bir editör. Onun için birşey olmaz. :D
Alp Çoker 12 Temmuz Pazar 2009 23:28 #5
WebMethod`daki Sleep'in nedeni nedir? Bir hatayla mı karşılaşmıştın ? document.ready olmasaydı onun için derdim de var :)
Mehmet Duran 12 Temmuz Pazar 2009 23:32 #6
Orada loading gif kullandım ve onun gözükmesi için öyle bir kullanım yaptım. :D Çok hızlı cevap geliyor.
$(function(){ }); ile $(document.ready(function(){ }); ikisi de aynı. İlki daha kısa olduğu için ilkini kullanmayı tercih ediyorum.
Alp Çoker 15 Temmuz Çarşamba 2009 02:09 #7
Tamamdır (: Eğer yorum yazarken "Cevap geldiğinde bana mail at" gibisinden bir checkbox ı yapabilirsen bana göre blog sisteminin hiç bir eksiği kalmaz.. Yorum yazdığımı unutup , 4 dakika sonra yazdığın cevaba 3 gün sonra aklıma geldi :)
Mehmet Duran 15 Temmuz Çarşamba 2009 10:45 #8
Bunu düşündüm ama bunun yerine Yorum RSS takibi hazırladım. Her yazı için yapılan yorumları RSS ile takip etmek mümkün. Şimdilik bununla idare etmek istiyorum. :D İlerde fırsat bulursam düzeltmeye çalışacağım.
İ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.
Ne edersen kendine, edersin kendi kendine.
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