TreeView
TreeView
Navigation
This view shows how to do navigation in 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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using MvcExplorer.Models;using System.Web.Mvc;namespace MvcExplorer.Controllers{ partial class TreeViewController { // GET: Navigation public ActionResult Navigation() { return View(Property.GetData(Url)); } }} |
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 | @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>} |