将 Asp.net MVC 模型数据绑定到 kendo TreeView 模板（本地数据）

Question

我正在使用模板在剑道树形视图中显示我的数据。目前，数据来自 Asp.net MVC 模型。我是剑道新手。我看到了各种用于绑定到本地数据的剑道示例，但我很困惑如何将本地数据绑定到剑道树视图中的模板内。

我知道这有点含糊。感谢您的及时回复。

任何简单的例子都会有很大帮助。

Answer 1

这是 ASP.NET MVC 和 Kendo UI 的基本示例。欲了解更多信息，请参阅 Telerik documentation

查看

<script id="TreeViewTemplate" type="text/kendo-ui-template">
    <div>
        <span style="background-color: Pink">#: item.text #</span>
        <span style="background-color: yellow">#: item.id #</span>
        <span style="background-color: Green">#: item.expanded #</span>
    </div>
</script>


@(

     Html.Kendo().TreeView()
                 .Name("TreeViewTemplateBiding")
                 .TemplateId("TreeViewTemplate")
                 .BindTo((IEnumerable<NodeViewModel>)ViewBag.Tree, (NavigationBindingFactory<TreeViewItem> mappings) =>
                            {
                                mappings.For<NodeViewModel>(binding => binding.ItemDataBound((item, node) =>
                                {
                                    item.Id = node.Id.ToString();
                                    item.Text = node.Title;
                                    item.Expanded = node.Expanded;
                                })
                        .Children(node => node.Children));
                            })
)

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var items = new List<NodeViewModel>();

        var root = new NodeViewModel { Id = 1, Title = "Root" };
        items.Add(root);

        root.Children.Add(new NodeViewModel { Id = 2, Title = "One" });
        root.Children.Add(new NodeViewModel { Id = 3, Title = "Two" });

        this.ViewBag.Tree = items;

        return View();
    }
}

public class NodeViewModel
{
    public NodeViewModel()
    {
        this.Expanded = true;
        this.Children = new List<NodeViewModel>();
    }

    public int Id { get; set; }
    public string Title { get; set; }
    public bool Expanded { get; set; }

    public bool HasChildren
    {
        get { return Children.Any(); }
    }

    public IList<NodeViewModel> Children { get; private set; }
}