c# - 将 Asp.net MVC 模型数据绑定(bind)到 kendo TreeView 模板(本地数据)

Question

我正在使用模板在剑道 TreeView 中显示我的数据。目前，数据来自 Asp.net MVC 模型。我是剑道的新手。我看到了各种用于绑定(bind)到本地数据的剑道示例，但我对如何在剑道 TreeView 中的模板内绑定(bind)本地数据感到困惑。

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

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

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));
                            })
)

Controller

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; }
}