TreeView
ナビゲーション
このビューは、TreeView for ASP.NET MVC でナビゲーションを行う方法を示します。
機能
サンプル
説明
TreeView コントロールの最も単純で一般的な用途はナビゲーションです。TreeView の階層構造と自動検索機能により、目的の項目へのドリルダウンと検索を容易に行うことができます。
ナビゲーションには、selected-item-changed イベントまたは item-clicked イベントを使用できます。両者の違いは、キーボードを使用して選択項目を移動したときには selected-item-changed が発生するのに対して、項目をクリックするか［Enter］キーを押したときには item-clicked が発生する点です。
この例では、item-clicked イベントを使用します。
ソース
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>
}
マニュアル