TreeView
TreeView
Overview
This view shows basic features of TreeView for ASP.NET MVC.
Features
Electronics
Trimmers/Shavers
Tablets
Phones
Apple
Motorola
Nokia
Samsung
Speakers
Monitors
Toys
Shopkins
Train Sets
Science Kit
Play-Doh
Crayola
Home
Coffeee Maker
Breadmaker
Solar Panel
Work Table
Propane Grill
Settings
Description
The TreeView control displays a hierarchical list which may contain text, checkboxes, images, or arbitrary HTML content. A TreeView is typically used to display the headings in a document, the entries in an index, the files and directories on a disk, or any other kind of information that might usefully be displayed as a hierarchy.
To create trees, you will normally have to set three attributes:
- source It is an array that contains the hierarchical data. Each item in the array contains information about a node and (optionally) an array of child nodes.
- display-member-path It defines the name of the property in the items that contains the text to be displayed in the tree nodes. By default, this property is set to the string 'header'.
- child-items-path It defines the name of the property in the items that contains the array of child nodes. By default, this property is set to the string 'items'.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using System.Linq; using System.Collections.Generic; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class TreeViewController : Controller { // GET: Index public ActionResult Index(IFormCollection collection) { _treeViewDataModel.LoadPostData(collection); ViewBag.DemoOptions = _treeViewDataModel; return View(Property.GetData(Url)); } private readonly ControlOptions _treeViewDataModel = new ControlOptions { Options = new OptionDictionary { { "IsAnimated" , new OptionItem{Values = new List< string > { "True" , "False" },CurrentValue = "True" }}, { "AutoCollapse" , new OptionItem{Values = new List< string > { "True" , "False" },CurrentValue = "True" }}, { "ExpandOnClick" , new OptionItem{Values = new List< string > { "True" , "False" },CurrentValue = "True" }}, { "ExpandOnLoad" , new OptionItem{Values = new List< string > { "True" , "False" },CurrentValue = "True" }} } }; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | @model Property[] @ { ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true ; } < c1-tree-view display-member-path = "Header" child-items-path = "Items" source = "Model" is-animated = "@Convert.ToBoolean(optionsModel.Options[" IsAnimated "].CurrentValue)" auto-collapse = "@Convert.ToBoolean(optionsModel.Options[" AutoCollapse "].CurrentValue)" expand-on-click = "@Convert.ToBoolean(optionsModel.Options[" ExpandOnClick "].CurrentValue)" expand-on-load = "@Convert.ToBoolean(optionsModel.Options[" ExpandOnLoad "].CurrentValue)" > </ c1-tree-view > @section Settings{ @await Html.PartialAsync( "_OptionsMenu" , optionsModel) } @section Summary{ < p > @Html .Raw(TreeViewRes.Index_Text0)</ p > } @section Description{ < p > @Html .Raw(TreeViewRes.Index_Text1)</ p > < p > @Html .Raw(TreeViewRes.Index_Text2)</ p > } |