InputNumber
InputNumber
Overview
This sample shows the basic usage of the InputNumber control.
Features
Settings
Description
This sample shows the basic usage of the InputNumber control.
You can also use InputType property for more masks as well as showing appropriate soft keyboard type on mobile phone, tablet, iPad etc.
When HandleWheel is true, the user can edit the value using the mouse wheel.
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 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class InputNumberController : Controller { private readonly ControlOptions _optionModel = new ControlOptions { Options = new OptionDictionary { {"Handle Wheel",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "True"}} } }; public ActionResult Index(FormCollection collection) { IValueProvider data = collection; _optionModel.LoadPostData(data); ViewBag.DemoOptions = _optionModel; return View(); } }} |
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true;}@section Scripts{<style> .invalid-tooltip { background-color: red; color: yellow; opacity: 0.9; border-color: lightcoral; }</style><script> var _invalidTooltip; c1.documentReady(function () { _invalidTooltip = new wijmo.Tooltip(); _invalidTooltip.cssClass = 'invalid-tooltip'; _invalidTooltip.position = 11; window.addEventListener('resize', function () { if (_invalidTooltip.isVisible) { _invalidTooltip.hide(); onInvalidInput(); } }); }) function onInvalidInput(input, e) { e && (e.cancel = true); _invalidTooltip.show("#invalidInput", "@Html.Raw(Resources.InputNumber.Index_Text8)"); } function onValueChanged(input, e) { _invalidTooltip.hide(); }</script>}<div> <label>@Html.Raw(Resources.InputNumber.Index_Text0)</label> @Html.C1().InputNumber().Value(0).Format("n0").HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))</div><div> <label>@Html.Raw(Resources.InputNumber.Index_Text1)</label> @Html.C1().InputNumber().Value(Math.PI).Format("n").HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue))</div><div> <label>@Html.Raw(Resources.InputNumber.Index_Text2)</label> @(Html.C1().InputNumber() .Value(3.5).Format("c2") .Step(0.5).Min(0).Max(10) .HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)) )</div><div> <label>@Html.Raw(Resources.InputNumber.Index_Text3)</label> @(Html.C1().InputNumber() .Placeholder(Resources.InputNumber.Index_Placeholder1) .IsRequired(false).Value(null) .HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)) )</div><div> <label>@Html.Raw(Resources.InputNumber.Index_Text7)</label> @(Html.C1().InputNumber().Id("invalidInput") .Placeholder(Resources.InputNumber.Index_Placeholder1) .IsRequired(false).Value(null) .Min(100).Max(1000) .HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)) .OnClientInvalidInput("onInvalidInput") .OnClientValueChanged("onValueChanged") )</div><div> <label>@Html.Raw(Resources.InputNumber.Index_Text5)</label> @(Html.C1().InputNumber() .Placeholder(Resources.InputNumber.Index_Placeholder1) .IsRequired(false).Value(null) .Format("g5") .InputType("number") .HandleWheel(Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)) .HtmlAttributes(new { title = "InputType: number" }) )</div>@section Settings{ @Html.Partial("_OptionsMenu", optionsModel)}@section Description{ <p>@Html.Raw(Resources.InputNumber.Index_Text4)</p> <p>@Html.Raw(Resources.InputNumber.Index_Text6)</p> <p>@Html.Raw(Resources.InputNumber.HandleWheelDescription_Text0)</p>} |