how display directories and files to open the files in server side in datatable?

Question

Hi,
I've an application aspNet core 5 razor page to display several datatable associated to the view in sql.
the view is :

The data is located in File Table where is the files and directories.

Right now my application returns all files of the directories and subdirectories.

To display the files I used relative path. How I can modify the method of the relative path to display the directories and subdirectories to have acces to the files? also in my datatable I would like to add a column to identify the directories with logo directories et files with logo.

Actually I used the webapi action

 [HttpGet]  
        public async Task<IActionResult> GetFileByFilePath(string relativePath)  
        {  
             string directory = await _filerepository.GetFileTableDirectory();  
            string path = $"{directory}\\{relativePath}";  
  
           if (System.IO.File.Exists(path))  
          {  
               return File(System.IO.File.OpenRead(path), "application/octet-stream", Path.GetFileName(path));  
          }  
             return NotFound();  
        }  

Service method

 public async Task<string> GetFileTableDirectory()  
        {  
            FileTableRoot results = await _context.Set<FileTableRoot>()  
                .FromSqlRaw("SELECT FileTableRootPath() as Name").FirstOrDefaultAsync();  
            return $"{results?.Name}";  
        }  

I tried to modified webapi action and associate services

 [HttpGet("{filename}")]  
 public async Task<IActionResult> GetAsync(string filename)  
 {  
     string directory = await _fileTableService.GetFileTableDirectory();  
     string path = $"{directory}\\{filename}";  
      
     if(System.IO.File.Exists(path))  
     {  
         return File(System.IO.File.OpenRead(path), "application/octet-stream");  
     }  
     return NotFound();  
 }  

This action seems not adapted to my application.

Have you any suggestions?

Answer 1

Is it necessary to go through the search value?

Of course not. The Search input the easiest approach because the Search input is designed to filter records. Plus the server side processing is setup.

You selected the jQuery DataTable as the presentation design. In my opinion, the jQuery DataTable is a poor HTML design for displaying a directory structure. An unordered list is a much better representation and the approach I recommended around 5 months ago.

With that being said, it is up to you to come up with a design

As you suggested, the key to the code is to have created the two columns in the view; I think we can do something with that.

I have no idea what you are thinking... IsDirectory is currently being used in the jQuery DataTable to render HTML for a file or a directory.

The SQL View returns the relative path. It seems to me the relative path is the key. Write a service method that returns a distinct list of relative paths. Use this list in your HTML design. For example, a standard HTML select (dropdown). The user selects an option from the select which sets a column filter.

The jQuery DataTable has the ability to add column filters. Place the select in the path column header. See the openly published jQuery DataTable documentation.

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Answer 2

I populate the dropdown with the repositories from sql view.

I would like know when I clic on one repository I would like to filter the list inside the datatable;
I would have to pass the value of the directory which is a relative path in the search field of the datable.

The Html of the dropdown :

 <select class="form-control" id="select1" width="100%" name="DirList" asp-items="Model.Options"></select>  

Js/jequery

function setSearchD(value) {  
    $("#table2").dataTable().fnFilter(decodeURI(value));  
}  
  
  
$(document).ready(function () {  
  
    $("#select1").change(function () {  
                
        return  '<a href = "javascript:void" onclick = "setSearchD(\'' + encodeURI(@model.options) + '\'); return false;" > </a > '  
    });  
});  

It's here where is my problem. Could you help me on it?