Menu
Menu
連結モード
機能
サンプル
HeaderPathを使用します。
HeaderPathを使用します。
説明
このサンプルでは、データ連結メニューコントロールの使用方法を示します。
HeaderPathプロパティを使用して、ヘッダに表示される値をドロップダウンリストに表示される値から切り離します。
ソース
BindModeController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class MenuController : Controller { public ActionResult BindMode() { var list = new List<Tuple<string, string>>(); list.Add(Tuple.Create("Color: red", "red")); list.Add(Tuple.Create("Color: green", "green")); list.Add(Tuple.Create("Color: blue", "blue")); return View(list); } } }
BindMode.cshtml
@model List<Tuple<string, string>> @section Scripts{ <script> function setColor(arg) { document.getElementById("box").style.background = "linear-gradient(150deg, white -30%, " + arg + ")"; } function changeHeaderPath() { var menu = wijmo.Control.getControl("#DemoMenu"); var checkbox = document.getElementById("changeHeaderPath"); if (checkbox.checked) { menu.headerPath = "Item1"; if (document.getElementById("box").style.background != '') { menu.header = menu.selectedValue.Item1; } } else { menu.headerPath = null; menu.header = "@(Resources.Menu.BindMode_Text0)"; } } </script> } @section Styles{ <style> #box { width: 100px; height: 100px; color: white; background: linear-gradient(150deg, white -30%, gray); margin: 20px; box-shadow: 4px 4px 10px 0px darkgray; } </style> } <div id="box"></div> @(Html.C1().Menu().Bind(Model) .Id("DemoMenu") .Header(Resources.Menu.BindMode_Text0) .DisplayMemberPath("Item1") .Command("setColor") .CommandParameterPath("Item2") ) <br /> <input id="changeHeaderPath" type="checkbox" onchange="changeHeaderPath()" /> @Html.Raw(Resources.Menu.BindMode_Text2) <br /> @section Description{ <p>@Html.Raw(Resources.Menu.BindMode_Text1)</p> <p>@Html.Raw(Resources.Menu.BindMode_Text3)</p> }
マニュアル