The TreeView provides support for declaratively defining its items and for local (on the server) and remote (using a DataSource configuration object) binding.
publicActionResultLocal_Data_Binding(){
ViewBag.treeData =GetData();returnView();}privateIEnumerable<TreeViewItemModel>GetData(){List<TreeViewItemModel> inline =newList<TreeViewItemModel>{newTreeViewItemModel{
Text ="Furniture",
Items =newList<TreeViewItemModel>{newTreeViewItemModel(){
Text ="Tables & Chairs"},newTreeViewItemModel{
Text ="Sofas"},newTreeViewItemModel{
Text ="Occasional Furniture"}}},newTreeViewItemModel{
Text ="Decor",
Items =newList<TreeViewItemModel>{newTreeViewItemModel(){
Text ="Bed Linen"},newTreeViewItemModel{
Text ="Curtains & Blinds"},newTreeViewItemModel{
Text ="Carpets"}}}};return inline;}
publicstaticIList<HierarchicalViewModel>GetHierarchicalData(){var result =newList<HierarchicalViewModel>(){newHierarchicalViewModel(){ ID =1, ParentID =null, HasChildren =true, Name ="Parent item"},newHierarchicalViewModel(){ ID =2, ParentID =1, HasChildren =true, Name ="Parent item"},newHierarchicalViewModel(){ ID =3, ParentID =1, HasChildren =false, Name ="Item"},newHierarchicalViewModel(){ ID =4, ParentID =2, HasChildren =false, Name ="Item"},newHierarchicalViewModel(){ ID =5, ParentID =2, HasChildren =false, Name ="Item"}};return result;}publicActionResultRead_TreeViewData(int? id){var result =GetHierarchicalData().Where(x => id.HasValue ? x.ParentID == id : x.ParentID ==null).Select(item =>new{
id = item.ID,
Name = item.Name,
expanded = item.Expanded,
imageUrl = item.ImageUrl,
hasChildren = item.HasChildren
});returnJson(result, JsonRequestBehavior.AllowGet);}
C#
publicclassHierarchicalViewModel{publicint ID {get;set;}publicint? ParentID {get;set;}publicbool HasChildren {get;set;}publicstring Name {get;set;}publicbool Expanded {get;set;}publicstring ImageUrl {get;set;}}
By default, the TreeView sends to the remote endpoint the id of the expanded node. To send additional data, use the DataSource Data method and provide the name of a JavaScript function which will return a JavaScript object with the additional data.