In my solution there are 2 projects. The first is WebAPI, where I have classes: FileClass for files, DirectoryClass for folders and ClassContext, which contains List of files and List of folders. In HomeController, I have a Get method (string path) and it returns an instance of the ClassContext class. Then this data is converted to JSON. My 2 project is a simple Web Forms where I use AngularJS to display folders and files. I have been going to receive this data for a very long time and at the moment the necessary folders and files are shown.

My question is: I want to click on the folders and to immediately display its folders and files. How do I do this using AngularJS or in addition to it?

Code HomeController first project:

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

View code for the second project:

 <!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>
  • add a click handler, ng-click and load what you need inside it - Grundy

0