2016-05-23 13 views
0

私のソリューションでは2つのプロジェクトがあります。まず、WebAPIです。ファイルのFileClass、ディレクトリのDirectoryClass、ファイルのリストとディレクトリのリストを含むClassContextがあります。 HomeControllerでメソッドGet(文字列パス)を取得し、ClassContextのインスタンスを返します。 このデータはJSONで変換されます。 私の2番目の要請は単純なWebフォームです。ここではAngularJSを使用してこれらのディレクトリとファイルを表示します。 私はこれらのデータを取得するために多くの努力をしてきましたが、現在はディレクトリとファイルが表示されています。Web.APIとAngular JSを使用するファイルマネージャ

私の質問は次のとおりです。ディレクトリをクリックしたい場合は、そのサブディレクトリとファイルを開く必要があります。 AngularJSでこのロジックを実行するにはどうすればよいですか?

最初のプロジェクトのコントローラーのコード:第二プロジェクトのビューの

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

コード:

<!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> 

答えて

0

それはあなたのJSONの結果がどのように見えるが、私はあなたが何であるかを考えるものを解読するには少し難しいですディレクトリとファイルのネストされたビューを取得することです。その場合、htmlは次のようになります。

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

これが間違っている場合は、サンプルjsonで質問を更新してください。

+0

私は2番目のプロジェクトを開始すると、json: {"ファイル":[] "ディレクトリ":[{"名前": "C:\\"、 "パス": "C:\\ "}、{" Name ":" D:\\ "、" Path ":" D:\\ "}]} ファイルは0個、論理ドライブは2個です。そして、私は彼らを私の見解で見る。 たとえば、D:\をクリックして、すべてのディレクトリとファイルを取得します。 ASP.NET MVCでこのようなプロジェクトを行ったことがありますが、今はAngularを使用したいと思います。 新しいディレクトリとファイルを取得して表示する方法はありますか? – Spiderman5

+0

あなたが期待しているAPIから結果が得られないようには聞こえません。正しい? – jbrown

+0

ディスクCとDを取得しました。 次のデータを取得するために、自分のコードに追加する必要があるものは何ですか? Dをクリックしても何も起こりません。 – Spiderman5

関連する問題