c# - 如何将 Kendo Treeview 绑定(bind)到文件目录

Question

我想将文件夹层次结构显示为 Kendo Treeview 。我认为这涉及将目录转换为 JSON。

这是实现我的目标的可能且正确的方法吗？还是有其他方法将 Treeview 绑定(bind)到远程文件目录？

Answer 1

由于您的标签是 kendo-ui 和 C#，我假设您正在使用 Kendo UI for ASP.NET MVC。如果不是，只需使用适当的 JS 更改 View 代码，其他代码应该在 ASP.NET MVC 中按预期工作。

创建具有 2 个操作的 Controller PathController:Read 和 Index。

在您的索引 View 中调用 Kendo UI Treeview 助手

@(Html.Kendo().TreeView()
    .Name("PathTreeView")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "Path"))
    )
)

为kendo Treeview 创建一个 View 模型 KendoTreeViewViewModel:

public class KendoTreeViewViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public bool HasChildren { get; set; }
}

在您的读取操作中返回包含文件和文件夹的 JSON:

public JsonResult Read(string path)
{
    const string StartDirectory = @"C:\";
    path = path ?? StartDirectory;
    var files = Directory.GetFiles(path).Select(file => 
        new KendoTreeViewViewModel
            {
                Id = file,
                HasChildren = false,
                Name = Path.GetFileName(file)
            });

    var directories = Directory.GetDirectories(path).Select(dir =>
        new KendoTreeViewViewModel
            {
                Id = dir,
                HasChildren = true,
                Name = Path.GetFileName(dir)
            });

    var result = files.ToList();
    result.AddRange(directories);
    result = result.OrderBy(x => x.HasChildren).ToList();

    return this.Json(result, JsonRequestBehavior.AllowGet);
}