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 OnClientSelectedItemChanged or OnClientItemClicked events for navigation. The difference is that OnClientSelectedItemChanged occurs when the user moves the selection with the keyboard, and OnClientItemClicked occurs when the user clicks an item or presses the Enter key.
This example uses the OnClientItemClicked event.
Source
NavigationController.cs
using MvcExplorer.Models; using System.Web.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(Resources.TreeView.Navigation_NavigatingInfo)'.replace('{0}', treeView.selectedItem.Header); } </script> } @(Html.C1().TreeView() .Bind(Model) .DisplayMemberPath("Header") .ChildItemsPath("Items") .OnClientItemClicked("itemClicked")) <br/> <div id="tvNavItem" style="background-color:yellow"></div> @section Summary{ <p>@Html.Raw(Resources.TreeView.Navigation_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.TreeView.Navigation_Text1)</p> <p>@Html.Raw(Resources.TreeView.Navigation_Text2)</p> <p>@Html.Raw(Resources.TreeView.Navigation_Text3)</p> }
Documentation