c# - Telerik (Kendo) UI for ASP.NET MVC TreeView 问题

Question

我正在为 ASP.NET MVC 使用 MVC 5 和最新版本的 Telerik(以前称为 Kendo)UI。我正在处理分层数据。我正在尝试在 _Layout View 中创建 TreeView 并使用 URL 或操作链接填充它。

我当前的代码:

在 _Layout View 中:

@Html.Partial("_ProductTree")

“_ProductTree”部分 View :

@(Html.Kendo().TreeView().Name("ProductTree")
    .DataSource(d => d
        .Model(m => m
            .Id("ProductId")
            .HasChildren("Categories"))
    .Read(r => r.Action("_ProductTree", "Home")))
    .DataTextField("ProductName"))

操作方法:

[ActionName("_ProductTree")]
public JsonResult GetProductTree()
{
    var products = _productBusinessService.GetProducts();

    var result = products.Select(p => new
    {
        p.ProductID,
        p.ProductName,
        Categories= c.Categories.Any()
    }).OrderBy(t => t.ProductName);

    return Json(result, JsonRequestBehavior.AllowGet);
}

我有很多问题:

1. 当我展开一个有子节点的父节点时，TreeView 会点击操作方法并将整个树附加到子节点，而不是只显示子节点。
2. 我需要能够将 TreeView 嵌套两层，例如 Product > Category > Type。
3. 我正在尝试弄清楚如何使用 LINQ 来聚合或投影数据，以实现双层次的高层管理。
4. 我尝试关闭 LoadOnDemand，但这会使 TreeView 为产品列表中的每条记录调用一次操作方法。

我已经尝试将 TreeView Razor 代码直接插入到 _Layout View 中(不使用局部 View )。我意识到我可能需要将操作方法​​移动到基 Controller 类中并在每个 Controller 中继承它以阻止它将列表附加到父节点。如果我不能尽快完成这项工作，我可能不得不使用 Kendo UI Professional 或开源替代品。

有些人可能会想说这个问题已经在其他地方得到了回答。 我找到的所有帖子都没有解决使用 Telerik TreeView 填充和显示嵌套(不止一层)分层数据的问题。

有这个帖子

Nested DataSources and TreeView with kendo ui

但它是针对 TreeView 的 JavaScript 版本(不是 MVC 的 UI)版本，尚未得到解答。

预先感谢您的帮助!

Answer 1

代码中的解决方案:

_Layout View :

@Html.Partial("_ProductTree")

或

@RenderSection("productTree", false)

然后在内容 View 中

@section productTree
{
    @Html.Partial("_ProductTree")
}

_ProductTree 部分 View

@(Html.Kendo().TreeView().Name("ProductTree")
    .DataSource(d => d
        .Model(m => m
            .Id("Id")
            .HasChildren("HasChildren")
            .Children("Children"))
    .Read(r => r.Action("_ProductTree", "Home")))
    .DataTextField("Name"))

我将操作方法​​移动到一个 BaseController 抽象类，它可以被任何需要显示 ProductTree TreeView 的 Controller 继承。数据是从 ProductService 和 CategoryService 中提取的，并使用 LINQ 投影聚合到匿名对象中:

    [ActionName("_ProductTree")]
    public JsonResult GetProductData()
    {
        var products = _productBusinessService.GetProducts();

        foreach (var product in product)
        {
            foreach (var category in product.Categories)
            {
                category.ProductTypes =
                    _productService.GetProductTypes(category.CategoryId);                                           
            }
        }

        var productTreeData = products.Select(p => new
        {
            Id = p.ProductId,
            Name = p.ProductName,
            HasChildren = p.Categories.Any(),
            Children = p.Categories.Select(c => new
            {
                Id = c.CategoryId,
                Name = c.CategoryName,
                HasChildren = c.ProductTypes.Any(),
                Children = c.ProductTypes.Select(t => new
                {
                    Id = t.ProductTypeId,
                    Name = t.ProductTypeName,
                    HasChildren = false
                }).OrderBy(t => t.Name).ToList()
            }).OrderBy(c => c.Name).ToList()
        }).OrderBy(p => p.Name).ToList();

        return Json(productTreeData, JsonRequestBehavior.AllowGet);
    }

结果是用于 ASP.NET Treeview 的 3 层深度、完全填充、排序的 Telerik UI，其中包含产品 >> 类别 >> ProductType 的名称和 ID。在这种情况下，打开或关闭 LoadOnDemand 似乎没有什么不同。在 TreeView 中使用 Bind 时应该有所不同。

希望对您有所帮助!