Datei-Manager mit Web.API und Angular JS

In meiner Lösung habe ich 2 Projekte. Zuerst ist WebAPI, wo ich Klassen erhalte: FileClass für Dateien, DirectoryClass für Verzeichnisse und ClassContext, die Liste von Dateien und Liste von Verzeichnissen enthält. Im HomeController erhalte ich die Methode Get (string path) und gibt die Instanz von ClassContext zurück. Dann konvertiert diese Daten in JSON. Meine zweite Lösung ist einfache Web Forms, wo ich AngularJS verwenden, um diese Verzeichnisse und Dateien anzuzeigen. Ich habe viel versucht, diese Daten zu bekommen und im Moment werden Verzeichnisse und Fils angezeigt.Datei-Manager mit Web.API und Angular JS

Meine Frage ist: Ich möchte auf Verzeichnisse klicken, und dann müssen die Unterverzeichnisse und Dateien geöffnet werden. Wie kann ich diese Logik mit AngularJS machen?

Code of-Controller des ersten Projekts:

public ClassContext Get(string path) 
    { 
     List<string> directories = new List<string>(); 
     List<string> files = new List<string>(); 

     db.Directories = new List<DirectoryClass>(); 
     db.Files = new List<FileClass>(); 

     // checks if path is empty 
     if (path.IsEmpty()) 
     { 
      directories.AddRange(Environment.GetLogicalDrives()); 

      for (var i = 0; i < directories.Count; i++) 
      { 
       string str = directories[i]; 

       DirectoryClass dir = new DirectoryClass() 
       { 
        Name = str, 
        Path = str 
       }; 

       db.Directories.Add(dir); 
      } 

      return db; 
     } 

     DriveInfo drives = new DriveInfo(path); 

     // checks if the logical drive is ready 
     if (!drives.IsReady) 
     { 
      path = String.Empty; 
      return Get(path); 
     } 

     // checks if there is a file with such path 
     if (System.IO.File.Exists(path)) 
     { 
      OpenFile(path); 

      var lastIndex = path.LastIndexOf("\\"); 
      path = path.Substring(0, lastIndex); 
     } 

     directories.AddRange(Directory.GetDirectories(path)); 

     // add directories 
     for (var i = 0; i < directories.Count; i++) 
     { 
      string fullName = directories[i]; 
      var lastIndex = directories[i].LastIndexOf("\\"); 

      string name = fullName.Substring(lastIndex + 1); 

      DirectoryClass dir = new DirectoryClass() 
      { 
       Name = name, 
       Path = fullName 
      }; 

      db.Directories.Add(dir); 
     }    

     files.AddRange(Directory.GetFiles(path)); 

     // add files 
     for (var i = 0; i < files.Count; i++) 
     { 
      string fullName = files[i]; 
      var lastIndex = files[i].LastIndexOf("\\"); 

      string name = fullName.Substring(lastIndex + 1); 

      FileClass file = new FileClass() 
      { 
       Name = name, 
       Path = fullName 
      }; 

      db.Files.Add(file); 
     } 

     return db; 
    }

Code of Ansicht Zweites Projekt:

<!DOCTYPE html> 
<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 

<div ng-controller="FilesController"> 
    <h3>Directories:</h3> 
    <div ng-repeat="item in result.Directories"> 
     <a href="#">{{item.Name}}</a> 
    </div> 

    <h3>Files:</h3> 
    <div ng-repeat="item in result.Files"> 
     <a href="#">{{item.Name}}</a> 
    </div> 
</div> 

<script src="Scripts/angular.min.js"></script> 
<script> 
    var myApp = angular.module("myApp", []); 
</script> 
<script> 
myApp.controller("FilesController", function($scope, $http) { 
    $http.get("http://localhost:55555/api/Home?path") .success(function(response) { 
     }); 
    }); 
</script> 
</body> 
</html>

Quelle

2016-05-23 Spiderman5

Es ist ein wenig schwer zu entziffern, was Ihre json Ergebnisse aussehen, aber ich denke, was du bist Es wird versucht, eine verschachtelte Ansicht von Verzeichnissen und Dateien zu erhalten. Wenn das der Fall ist, dann sollten Sie Ihre html wie folgt aussehen:

<div ng-controller="FilesController"> 
    <h3>Directories:</h3> 
    <div ng-repeat="item in result.Directories"> 
    <a href="#">{{item.Name}}</a> 
    <h3>Files:</h3> 
    <div ng-repeat="file in item.Files"> 
     <a href="#">{{file.Name}}</a> 
    </div> 
    </div> 
</div>

Wenn dies falsch ist, dann geben Sie bitte Ihre Frage mit etwas Probe json aktualisieren.

Quelle

2016-05-23 17:12:37 jbrown

Als ich das zweite Projekt zu starten, erhalte ich solche json: { "Files": [], "Verzeichnisse": [{ "Name": "C: \\", "Pfad": "C: \\ "}, {" Name ":" D: \\ "," Pfad ":" D: \\ "}]} Ich bekomme 0 Dateien und 2 logische Laufwerke. Und ich sehe sie aus meiner Sicht. Ich möchte zum Beispiel auf D: \ klicken und alle Verzeichnisse und Dateien abrufen. Ich habe ein solches Projekt auf ASP.NET MVC, aber jetzt möchte ich Angular verwenden. Wie muss ich neue Verzeichnisse und Dateien bekommen und sie zeigen ?? – Spiderman5

Es klingt also nicht so, als würden Sie nicht die Ergebnisse Ihrer API erhalten, die Sie erwarten. Richtig? – jbrown

Ich bekomme Platten C und D. Was muss ich in meinem Code hinzufügen, um die nächsten Daten zu erhalten? Ich klicke auf D und nichts ist passiert. – Spiderman5

Datei-Manager mit Web.API und Angular JS

Antwort

Verwandte Themen