TreeView
TreeView
Navigation
This view shows how to do navigation in TreeView for ASP.NET MVC.
Features
Sample
Description
The simplest and most common use for the TreeView control is navigation. The TreeView's hierarchical structure and auto-search functionality make it easy for users to drill-down and find the items they are interested in.
You can use the selected-item-changed or item-clicked events for navigation. The difference is that selected-item-changed occurs when the user moves the selection with the keyboard, and item-clicked occurs when the user clicks an item or presses the Enter key.
This example uses the item-clicked event.
Source
NavigationController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: Navigation public ActionResult Navigation() { return View(Property.GetData(Url)); } } }
Navigation.cshtml
@model Property[] @section Scripts{ <script type="text/javascript"> function itemClicked(treeView) { document.getElementById('tvNavItem').innerHTML = '@Html.Raw(TreeViewRes.Navigation_NavigatingInfo)'.replace('{0}', treeView.selectedItem.Header); } </script> } <c1-tree-view display-member-path="Header" child-items-path="Items" source="Model" item-clicked="itemClicked"></c1-tree-view> <br/> <div id="tvNavItem" style="background-color:yellow"></div> @section Summary{ <p>@Html.Raw(TreeViewRes.Navigation_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.Navigation_Text1)</p> <p>@Html.Raw(TreeViewRes.Navigation_Text2)</p> <p>@Html.Raw(TreeViewRes.Navigation_Text3)</p> }
Documentation