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 15 27015 4,7
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 Oylama (Rating) Bölümü Hazır Javascript ile Mouse Pozisyonunu Bulma Asp.net'te Jquery ve Ajax ile Veritabanına Kayıt Ekleme jQuery Ajax İşlemlerinde Parametre Olarak Nesne Taşıma Jquery ve Asp.net MVC ile Ajax İşlemleri
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.
Bayram 25 Ağustos Çarşamba 2010 23:14 #9
Tam zamanında imdadıma yetişen bir makale... Teşekkürler...
Nusret Büyükçelebi 29 Aralık Çarşamba 2010 16:20 #10
Merhabalar, Peki bu dosya isimlerini listeleme işlemini excelle yine böyle ağaçlı yapıyla aktarmayı denediniz mi yada olabilir mi öyle bişey. ?
Mehmet Duran 06 Ocak Perşembe 2011 11:27 #11
@Nusret, bunun için excel'deki ağaç yapısının nasıl oluşturulduğuna bakmak lazım. Oradaki yapıya göre verileri uyarlmaka ve excel'e basmak yeterli olur. Ancak ben excel'le pek uğraşmadım ve bilgim yok.
Murat 04 Şubat Cuma 2011 01:08 #12
Güzel bir çalışma. Birşey sormak istiyorum: Bu yapıyı bir login ekranı arkasına yerleştirdik diyelim. Login olan kullanıcılar klasör/dosya yapısını görecek ve dosya indirebilecekler fakat dosyaların yolunu bilen birinin Login olmadan dosyaları doğrudan indirmesini engellemenin bir yolu var mı?
Mehmet Duran 04 Şubat Cuma 2011 16:12 #13
@Murat, bunun için direk olarak dosyaya erişimi kapatıp kullanıcının dosyaya sayfa (veya httphandler de olabilir) ile ulaşmasını sağlayacaksın. Burada sayfada stediğin kontrolü yaparsın. Koşullarına uygun olanların dosyalara erişmelerine, indirmelerine izin verirsin.
Murat 09 Şubat Çarşamba 2011 17:21 #14
Öncelikle verdiğiniz cevap için teşekkür ediyorum. Ben ASP'de böyle birşey denedim fakat kontrol panelden klasör için listelemeyi kapattığımda ASP kodlar ile de dosya listeleme engelleniyor. Bunu ASP.NET ile aşabilir miyim? Bilmiyorum web.config de bir ayar vs. olabilir mi? Ya da kontrol paneldeki kullanıcı yetkileri ile script arasında iletişim(?) kurulabilir mi?
Mehmet Duran 08 Nisan Cuma 2011 22:02 #15
@Murat, söylediğin işlem için dizinlere IIS kullanıcıları için izin vermen ve diğerleri için izinleri kaldırman yeterli olacaktır. Bu şekilde kodlama kısmında dizinlere ve dosyalara erişebilirsin. Web.config ve Asp.net ile yapabilmen için kullanıcı sisteminin olması gerekir. Ama bunu dosya izinleri ile yapman daha doğru olur.
İ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