Однажды HR предложили мне в качестве тестового задания сделать проводник на вебе. Примерное описание ТЗ содержится в заголовке. Задание меня заинтересовало.

Непродолжительный поиск в гугле ничего похожего не дал. Тем интереснее.

Для работы с файлами нам достаточно стандартных классов:

• (System.IO) DriveInfo- Предоставляет информацию о дисках. Так мы узнаем какие диски подключены, их имена, емкость и свободное пространство

• (System.IO) DirectoryInfo — Предоставляет информацию о папках. получение информации о вложенных папках и файлах

• (System.IO) FileInfo — Предоставляет информацию о файлах. получение размера

Первое, с чего предлагаю начать – создадим модельку которая смотрит подключенные диски, чтобы смотреть по каким путям нам вообще ходить, показать какие диски есть и отобразить их размеры:

Для этого в папке Models создал папку FilesModels и в ней DisksModel.cs и вставляем код:

public class DisksModel
    {
        public decimal TotalFreeSpace { get; }
        public decimal TotalSize { get; }
        public List<DriveInfo> Disks { get; }
        public DisksModel()
        {
            Disks = DriveInfo.GetDrives().Where(r => r.IsReady).Where(r => r.DriveType == DriveType.Fixed).ToList();
            TotalSize = Disks.Sum(r => r.TotalSize);
            TotalFreeSpace = Disks.Sum(r => r.TotalFreeSpace);
        }
}

В конструкторе мы получаем информацию по имеющимся дискам, выбираем только готовые к работе и не берем флэшки.

Также дополнительно, чтобы возвращать размерность в нужных единицах измерения заодно вставил статичный класс.

public static class DiskMetods
    {
        public static decimal ToKB(this decimal size, int decimals = 2)
        {
            return Math.Round(size / 1024, decimals);
        }
        public static decimal ToMB(this decimal size, int decimals = 2)
        {
            return Math.Round(size.ToKB(0) / 1024, decimals);
        }
        public static decimal ToGB(this decimal size, int decimals = 2)
        {
            return Math.Round(size.ToMB(0) / 1024, decimals);
        }
        public static decimal ToTB(this decimal size, int decimals = 2)
        {
            return Math.Round(size.ToGB(0) / 1024, decimals);
        }
        public static decimal ToKB(this long size, int decimals = 2)
        {
            return Math.Round((decimal)size / 1024, decimals);
        }
        public static decimal ToMB(this long size, int decimals = 2)
        {
            return Math.Round(size.ToKB(0) / 1024, decimals);
        }
        public static decimal ToGB(this long size, int decimals = 2)
        {
            return Math.Round(size.ToMB(0) / 1024, decimals);
        }
        public static decimal ToTB(this long size, int decimals = 2)
        {
            return Math.Round(size.ToGB(0) / 1024, decimals);
        }
    }

Создаем контролер для работы с файлами в папке FilesControllers создаем FilesController.cs.

Указываем какую страницу открывать и в нем же статично получаем информацию о дисках для дальнейшего использования.

public static DisksModel disk = new DisksModel();
        [HttpGet]
        public IActionResult Files()
        {
            return View("~/Views/FilesViews/Files.cshtml");
        }

Далее в папке Views создаем папку FilesViews и страницу Files.cshtml.

И создаём там таблицы, в которых будут отображаться информация о дисках на компьютере заодно в прогресс баре указывается сколько места заполнено. И как раз используется информация из статического класса в контроллере и переводим в гигабайты за счет ранее написанных методов.

<div id="diskInfo">
    <div id="tableDisk">
        <table onclick="VieUnvie()" style="cursor: pointer">
            <tr>
                <td>
                    <img src="~/img/hd_disk_harddisk_162.png" style="height:45px;width:45px" />
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                Все пространство дисков
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <progress value="@(WebFileManager.Controllers.FilesController.disk.TotalSize.ToGB(0) - WebFileManager.Controllers.FilesController.disk.TotalFreeSpace.ToGB(0))" max="@WebFileManager.Controllers.FilesController.disk.TotalSize.ToGB(0)"></progress>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @WebFileManager.Controllers.FilesController.disk.TotalFreeSpace.ToGB() ГБ свободно из @WebFileManager.Controllers.FilesController.disk.TotalSize.ToGB() ГБ
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table id="allDisk" style="display:none; cursor: pointer">
            @{foreach (DriveInfo driveInfo in WebFileManager.Controllers.FilesController.disk.Disks)
                {
                    <tr class="DiskRow" onclick="getFolder(null,'@(driveInfo.Name+"\\")', null, false)">
                        <td width="45px">
                        </td>
                        <td>
                            <img src="~/img/hd_disk_harddisk_162.png" style="height:45px;width:45px" />
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        локальный диск (@driveInfo.Name.Replace("\\", ""))
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <progress value="@(driveInfo.TotalSize.ToGB(0) - driveInfo.TotalFreeSpace.ToGB(0))" max="@driveInfo.TotalSize.ToGB(0)"></progress>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        @driveInfo.TotalFreeSpace.ToGB() ГБ свободно из @driveInfo.TotalSize.ToGB() ГБ
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                }
            }
        </table>
    </div>
</div>

Добавим скрипт украшательства ради для сворачивания/разворачивания дисков в/из общего объема, а onclick=»getFolder(null,’@(driveInfo.Name+»\» встретится чуть позже.

function VieUnvie() {
        var table = document.getElementById("allDisk");
        if (table.style.display == "none") {
            table.style.display = "block";
        }
        else {
            table.style.display = "none";
        }
    }

Прописываем еще одну кнопку в _Layout.cshtml

<li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Files" asp-action="Files">Проводник</a>
                        </li>

Получим:

Теперь необходимо отобразить размеры файлов и папок. В этом есть проблема, т.к. в DirectoryInfo нет информации о размере, и, как я понял, тот же проводник windows просто каждый раз считает размеры файлов в папке, дальше идет по вложенным папкам и потом возвращает конечную сумму файлов (например, когда вы нажимаете свойство папки, какое-то время идет подсчет размера на ваших глазах и время подсчета зависит в первую очередь от количества файлов внутри). Так же поступим и мы.

Понадобится модель для хранения информации. Предлагаю такую:

public class FolderModel
    {
        public DirectoryInfo ThisDirectoryInfo { get; set; }
        public FileInfo[] Files { get;  }
        public List<FolderModel> Folders { get; }
        public decimal Size { get; } = 0;



        public FolderModel() { }
        public FolderModel(string path):this(new DirectoryInfo(path)) { }
        public FolderModel(DirectoryInfo directoryInfo)
        {
            ThisDirectoryInfo = directoryInfo;
            Files = directoryInfo.GetFiles();
            Folders = ThisDirectoryInfo.GetDirectories().Where(r => !r.Attributes.HasFlag(FileAttributes.System) & !r.Attributes.HasFlag(FileAttributes.Hidden)).ToArray().GetFolderModels();
            Size += Files.Sum(r => r.Length) + Folders.Sum(r => r.Size);
        }
        public static List<FolderModel> GetFolderModels()
        {
            List<FolderModel> folderModels = new List<FolderModel>();
            foreach (var el in WebFileManager.Controllers.FilesController.disk.Disks)
            {
                folderModels.Add(new FolderModel(el.Name));
            }
            //folderModels.Add(new FolderModel("C:\\"));
            return folderModels;
        }

    }

Мы получили массив файлов в папке с их размерами, рекурсивно ходим по вложенным папкам возвращая их размер (т.е. размер файлов в них), и конечную сумму размеров.

Дополнительные функции, одна из которых понадобится для получения нашей модели по указанному пути:

public static class FolderModelMetods
    {
        /// <summary>
        /// возвращает FolderModel по массиву DirectoryInfo
        /// </summary>
        /// <param name="directoryInfos"></param>
        /// <returns></returns>
        public static List<FolderModel> GetFolderModels(this DirectoryInfo[] directoryInfos)
        {
            List<FolderModel> folderModels = new List<FolderModel>();
            foreach(DirectoryInfo directoryInfo in directoryInfos)
            {
                try
                {
                    folderModels.Add(new FolderModel(directoryInfo));
                }
                catch 
                {
                }
            }
            return folderModels;
        }
        /// <summary>
        /// возвращает FolderModel по указанному пути
        /// </summary>
        /// <param name="folderModels"> откуда ищет</param>
        /// <param name="fullPath">путь по которому брать модель</param>
        /// <returns></returns>
        public static FolderModel GetCurentFolderModel(this List<FolderModel> folderModels, string fullPath)
        {
            string[] pathEls = fullPath.Split('\\').Where(r=>r!="").ToArray();
            FolderModel folderModel = folderModels.FirstOrDefault(r => r.ThisDirectoryInfo.Name.Replace("\\", "") == pathEls[0]);
            for (int i = 1; i < pathEls.Length; i++)
            {
                folderModel = folderModel.Folders.FirstOrDefault(r => r.ThisDirectoryInfo.Name.Trim() == pathEls[i].Trim());
            }
            return folderModel;
        }
    }

Здесь стоит трай катч. Это был быстрый способ для обхода ошибок связанных с чтением системных закрытых файлов и папок. Теперь вопрос: как это представить и что выводить на экран. Проводник windows обычно выводит имя, дату изменения, тип и размер файлов, значит и мы выведем такое. Первое, что пришло в голову — написать отдельную модель.

public class FolderViewModel
    {
        public string CurentPath { get; set; }
        public string Name { get; set; }
        public string Type { get; set; }
        public decimal Size { get; set; }
        public DateTime ChangeDate { get; set; }
    }

В этой модели мы как раз реализуем все то что хотим увидеть. Ну и заодно сразу добавим методы в статичном классе.

public static class FolderViewModelM
    {
        public static List<FolderViewModel> GetFolderViewModel(this List<FolderModel> folderModels, string path, string folderName, string SortName, string SortType)
        {
            List<FolderViewModel> folderViewModels;
            if(folderName==null) { folderViewModels = folderModels.GetFolderViewModel((path).Replace("\\\\", "\\")); }
            else { folderViewModels = folderModels.GetFolderViewModel((path + "\\" + folderName).Replace("\\\\", "\\")); }
            if (SortName != null)
            {
                switch (SortName)
                {
                    case "Name":
                        if (SortType == "Asc") { folderViewModels = folderViewModels.OrderBy(r => r.Name).ToList(); }
                        else { folderViewModels = folderViewModels.OrderByDescending(r => r.Name).ToList(); }
                        break;
                    case "Type":
                        if (SortType == "Asc") { folderViewModels = folderViewModels.OrderBy(r => r.Type).ToList(); }
                        else { folderViewModels = folderViewModels.OrderByDescending(r => r.Type).ToList(); }
                        break;
                    case "Size":
                        if (SortType == "Asc") { folderViewModels = folderViewModels.OrderBy(r => r.Size).ToList(); }
                        else { folderViewModels = folderViewModels.OrderByDescending(r => r.Size).ToList(); }
                        break;
                    case "ChangeDate":
                        if (SortType == "Asc") { folderViewModels = folderViewModels.OrderBy(r => r.ChangeDate).ToList(); }
                        else { folderViewModels = folderViewModels.OrderByDescending(r => r.ChangeDate).ToList(); }
                        break;
                }
            }
            return folderViewModels;
        }
        public static List<FolderViewModel> GetFolderViewModel(this List<FolderModel> folderModels, string fullPath)
        {
            FolderModel folderModel = folderModels.GetCurentFolderModel(fullPath);
            return folderModel.ToFolderViewModel();
        }
        public static List<FolderViewModel> ToFolderViewModel(this FolderModel folderModel)
        {
            List<FolderViewModel> folderViewModels = new List<FolderViewModel>();
            foreach (var folder in folderModel.Folders)
            {
                folderViewModels.Add(new FolderViewModel()
                {
                    Name = folder.ThisDirectoryInfo.Name,
                    ChangeDate = folder.ThisDirectoryInfo.LastWriteTime,
                    Type = "Folder",
                    Size = folder.Size.ToMB(),
                    CurentPath = folderModel.ThisDirectoryInfo.FullName
                });
            }
            foreach (var file in folderModel.Files)
            {
                folderViewModels.Add(new FolderViewModel()
                {
                    Name = file.Name,
                    ChangeDate = file.LastWriteTime,
                    Type = "File",
                    Size = file.Length.ToMB(),
                    CurentPath = folderModel.ThisDirectoryInfo.FullName
                });
            }
            return folderViewModels;
        }
        public static string ToJson(this List<FolderViewModel> folderViewModels)
        {
            return JsonSerializer.Serialize(folderViewModels);
        }
    }

Мы реализуем перевод в json для передачи на страницу и несколько методов перевода из предыдущей модели в нашу новую. Также в одном из методов реализована сортировка.

Надо придумать представление. Самым простым будет использование все той же таблицы. Сначала в наше ранее используемое представление (в то, где мы рисовали диски) записываем:

@using WebFileManager.Models.FilesModels;
@using System.IO;

Указываем, какую используем модель и дополнительно пространство. Теперь сделаем саму таблицу.

<div id="FileBrowser" style="width:100%; height:auto">
    <div id="PanelPath" style="width:100%">
        <div id="PanelPathButtons">
            <button id="left" onclick="Back()"><img src="~/img/left.png" width="20px" height="10px" /></button>
            <button id="right" onclick="Next()"><img src="~/img/right.png" width="20px" height="10px" /></button>
        </div>
        <div id="PathNow">@WebFileManager.Controllers.FilesController.folderModels[0].ThisDirectoryInfo.FullName</div>
    </div>
    <div id="FileManager">

        <div id="PathView" class="FileManager" style="width:30%;">
            fff
        </div>
        <div id="FilesView" class="FileManager" style="width: 70%; ">
            <table id="FilesAndFolders">
                <tr>
                    <th onclick="Sort(this)" style="cursor: pointer"> Name </th>
                    <th onclick="Sort(this)" style="cursor: pointer">Change date</th>
                    <th onclick="Sort(this)" style="cursor: pointer"> Type </th>
                    <th onclick="Sort(this)" style="cursor: pointer"> Size </th>
                </tr>
                @{
                    foreach (var folder in WebFileManager.Controllers.FilesController.folderModels[0].Folders)
                    {
                        <tr class="FileFolderRow">
                            <td>
                                <img src="~/img/folder.png" /> @folder.ThisDirectoryInfo.Name
                            </td>
                            <td>
                                @folder.ThisDirectoryInfo.LastWriteTime
                            </td>
                            <td>
                                Folder
                            </td>
                            <td>
                                @folder.Size.ToMB() MB
                            </td>
                        </tr>
                    }
                    foreach (var file in WebFileManager.Controllers.FilesController.folderModels[0].Files)
                    {
                        <tr class="FileFolderRow">
                            <td>
                                <img src="~/img/file.png" />@file.Name
                            </td>
                            <td>
                                File
                            </td>
                            <td>
                                @file.Length.ToMB() MB
                            </td>
                        </tr>
                    }
                }
                <tr>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>

При открытии страницы сначала показываем содержимое первого диска из списка. Также делаем кнопки назад и вперед, место, где указываем путь.

Также функции:

function Back() {
        getFolder(null, $('#PathNow')[0].innerText, null, true);
        $("#right").prop("disabled", false)
    }

Соответственно возврат назад:

function getFolder(FN, PN, Sor, BK) {
         $.ajax({
                    url: '@Url.Action("NewFolder", "Files")',
                    data:{
                        folderName: FN
                        , pathNow: PN
                        , orderBy: Sor
                        , back:BK
                }
                    , type: 'POST'
                    , success: function (data) {
                        $(".FileFolderRow").remove();
                        GetFileFolderRow(data);
                        pathNow: $('#PathNow')[0].innerText = data[0]["CurentPath"];
                        setSes("maxPath", data[0]["CurentPath"]);
                    }
                })
    }

Получение представления по указанному пути — как раз та функция, которая встречалась еще в отображении дисков на странице.

function GetFileFolderRow(data) {
        for (var i = 0; i < data.length; i++) {
            let tr = document.createElement("tr"),
                td0 = document.createElement("td"),
                td1 = document.createElement("td"),
                td2 = document.createElement("td"),
                td3 = document.createElement("td"),
                img = document.createElement("img");
            if (data[i]["Type"] == "File") { img.src = "/img/file.png" }
            else { img.src = "/img/folder.png" }
            td0.appendChild(img);
            td0.appendChild(document.createTextNode(data[i]["Name"]));
            td1.innerText = data[i]["ChangeDate"];
            td2.innerText = data[i]["Type"];
            td3.innerText = data[i]["Size"] + " MB";
            tr.className = "FileFolderRow";
            tr.append(td0);
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            $("#FilesAndFolders").append(tr);
        }
        $(dbClickRow())
    }

Записываем в таблицу полученную модель.

И функция для нажатия на строку в таблице. Если папка, то пытается пройти дальше, а на файл просто отвечает, что не может его открыть.

function dbClickRow () {
        $(".FileFolderRow").dblclick(function (e) {
            var newFolder = this.getElementsByTagName("td")[0].innerText.trim();
            if (this.getElementsByTagName("td")[2].innerText == "Folder") {
                getFolder(newFolder, $('#PathNow')[0].innerText, null, false)
            }
            else {
                alert("i can't open files ");
            }
        })

Добавляем совсем короткий скрипт для сортировки, который по сути так же делает запрос на получение страницы и заодно передает по какому полю сортировать.

function Sort(e) {
        getFolder(null, $('#PathNow')[0].innerText, e.innerText, false);
    }

Вспомним про метод, возвращающей модель для представления с сортировкой. Он определяет, по какому полю сортировать. Соответственно где-то надо хранить для пользователей их значения. Самым очевидным способом является сессия. Поэтому в startup.cs добавляем services.AddMvc() и app.UseSession(), выглядит примерно так:

Осталось реализовать в контролере как будем возвращать страницы.

В fileController добавляем:

public static List<FolderModel> folderModels = FolderModel.GetFolderModels();

Сам код:

[HttpPost]
        public ContentResult NewFolder(string folderName, string pathNow, string orderBy=null, bool back=false)
        {
            if (orderBy != null)
            {
                if (HttpContext.Session.GetString("OrderBy") == orderBy)
                {
                    if (HttpContext.Session.GetString("SortType") == "Asc") { HttpContext.Session.SetString("SortType", "Desc"); }
                    else { HttpContext.Session.SetString("SortType", "Asc"); }
                }
                else
                {
                    HttpContext.Session.SetString("OrderBy", orderBy);
                    HttpContext.Session.SetString("SortType", "Asc");
                }
            }
            return Content(folderModels.GetFolderViewModel(!back ? pathNow: pathNow.Substring(0, pathNow.LastIndexOf("\\")), folderName, HttpContext.Session.GetString("OrderBy"), HttpContext.Session.GetString("SortType")).ToJson(), "application/json");
        }

Если запрос приходит с указанием сортировки, то пишем в сессию по какому полю, а если такое поле уже указанно, то меняем порядок и отправляем модель.

Надеюсь, кому-то пригодится данный материал, также каждый желающий может аргументированно провести автора лицом по коду.

→ Весь проект лежит тут github

Спасибо за внимание.

Автор статьи: @Sith_Lord