Файловый менеджер с использованием Web.API и Angular JS

0

В моем решении у меня есть 2 проекта. Сначала WebAPI, где я получаю классы: FileClass для файлов, DirectoryClass для каталогов и ClassContext, который содержит список файлов и список каталогов. В HomeController я получаю метод Get (строковый путь) и возвращает экземпляр класса ClassContext. Затем эти данные преобразуются в JSON. Мое второе решение - простые веб-формы, где я использую AngularJS для отображения этих каталогов и файлов. Я много пытаюсь получить эти данные, и на данный момент показываются каталоги и файлы.

Мой вопрос: я хочу нажать на каталоги, а затем его подкаталоги и файлы должны быть открыты. Как я могу сделать эту логику с помощью 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>
Теги:
asp.net-web-api

1 ответ

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
    Когда я запускаю второй проект, я получаю такие json: {"Files": [], "Directories": [{"Name": "C: \\", "Path": "C: \\"}, { "Имя": "D: \\", "Путь": "D: \\"}]} Я получаю 0 файлов и 2 логических диска. И я вижу их на мой взгляд. Я хочу, например, нажать на D: \ и получить все каталоги и файлы. Я делал такой проект на ASP.NET MVC, но теперь я хочу использовать Angular. Как я должен получить новые каталоги и файлы и показать их ??
  • 0
    Так что не похоже, что вы не получаете результаты от вашего API, что вы ожидаете. Верный?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню