Menu コントロールは、クイックスタートで示した文字列と同様にさまざまなタイプの値を簡単に追加したり、別のコントロールと連結することができます。このセクションでは、Menu コントロールを InputNumber と組み合わせて使用し、InputNumber コントロールで選択された値に基づいて Menu の値を更新する方法について説明します。
次の図は、InputNumber に連結された Menu を示しています。
次のコード例は、Menu を InputNumber コントロールに連結する方法を示します。
コードの場合
MenuController.cs
| Razor |
コードのコピー
|
|---|---|
public ActionResult Feature() { return View(); } |
|
Menu.cshtml
| C# |
コードのコピー
|
|---|---|
<script>
function execute(arg) {
var inputNumber = wijmo.Control.getControl("#mInputNumber");
// 引数を数字に変換します
arg = wijmo.changeType(arg, wijmo.DataType.Number);
// 変換が成功かどうかを確認します
if (wijmo.isNumber(arg)) {
// 値を更新します
inputNumber.value += arg;
}
}
function canExecute(arg) {
var inputNumber = wijmo.Control.getControl("#mInputNumber");
// 引数を数字に変換します
arg = wijmo.changeType(arg, wijmo.DataType.Number);
// 変換が成功かどうかを確認しますl
if (wijmo.isNumber(arg)) {
var val = inputNumber.value + arg;
// 更新した値が有効であるかどうかを確認します
return val >= 0 && val <= 1;
}
return false;
}
</script>
<div>
@(Html.C1().Menu().Header("税金の計算")
.Command("execute", canExecute: "canExecute")
.MenuItems(items =>
{
items.Add("+ 25%", 0.25);
items.Add("+ 10%", 0.10);
items.Add("+ 5%", 0.05);
items.Add("+ 1%", 0.01);
items.AddSeparator();
items.Add("- 1%", -0.01);
items.Add("- 5%", -0.05);
items.Add("- 10%", -0.10);
items.Add("- 25%", -0.25);
})
)
@(Html.C1().InputNumber().Id("mInputNumber")
.Value(0.07).Step(0.05).Format("p0").Min(0).Max(1)
)
</div>
|
|