Hi ruben00000,
In order to add files from folder to Tree node you need to check the file exists in folder or not.
If file exists, then loop through all files and add as childer for the node.
Here i have created a sample. Please refer it.
Folder Structure
Namespaces
using System.IO;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetFolderStructure()
{
string path = Server.MapPath("~/Vehicles");
var result = new List<object>();
var directories = Directory.GetDirectories(path);
foreach (var directory in directories)
{
result.Add(CreateNode(directory));
}
return Json(result, JsonRequestBehavior.AllowGet);
}
private object CreateNode(string directory)
{
var nodeName = Path.GetFileName(directory);
var hasChildren = Directory.GetDirectories(directory).Any();
object node = null;
// Chekcks whether there is sub folder or not.
if (hasChildren)
{
// Fetch the sub folders.
var subDirectories = Directory.GetDirectories(directory);
var children = new List<object>();
foreach (var subDirectory in subDirectories)
{
children.Add(CreateNode(subDirectory));
}
// Create a new object with children added.
node = new
{
id = directory,
text = nodeName,
state = new { opened = false, disabled = false },
children = children,
type = "folder"
};
}
else
{
if (Directory.GetFiles(directory).Any())
{
node = AddFiles(directory);
}
else
{
node = new
{
id = directory,
text = nodeName,
state = new { opened = false, disabled = false },
// No children, so set to false.
children = false,
type = "folder"
};
}
}
return node;
}
private object AddFiles(string directory)
{
var nodeName = Path.GetFileName(directory);
object node = null;
string[] files = Directory.GetFiles(directory);
var children = new List<object>();
foreach (string file in files)
{
children.Add(new
{
id = Path.GetFileName(file),
text = Path.GetFileName(file),
state = new { opened = false, disabled = false },
children = false,
type = "file",
icon = "jstree-icon jstree-file"
});
}
node = new
{
id = directory,
text = nodeName,
state = new { opened = false, disabled = false },
children = children,
type = "folder"
};
return node;
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class='row'>
<div class="col-3">
<div id='tree' style="color: black; overflow:scroll; height:80vh;"></div>
</div>
<div class="col-9">
<div class="card border-secondary" style="min-height: 80vh">
<div class="card-body" id="box_area" style="background: white; border: 1px solid;border-color:#f3e9e9"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tree').jstree({
'core': {
'data': {
'url': '@Url.Action("GetFolderStructure", "Home")',
'dataType': 'json'
}
}
});
$('#tree').on('activate_node.jstree', function (e, data) {
var node = data.node;
if (node.children.length === 0) {
// Load node only if it's not loaded yet
$('#tree').jstree(true).load_node(node);
}
});
$('#tree').on('select_node.jstree', function (e, data) {
var node = data.node;
var path = node.id;
if (path == undefined)
return;
// Prevent default navigation behavior
e.preventDefault();
// Expand or collapse the selected node
$('#tree').jstree(true).toggle_node(node);
});
});
</script>
</body>
</html>
Screenshot
