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 | using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.ModelBinding; using MvcExplorer.Models; using System.Collections.Generic; 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(IFormCollection collection) { _optionModel.LoadPostData(collection); 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 | @{ 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(InputNumberRes.Index_Text8)"); } function onValueChanged(input, e) { _invalidTooltip.hide(); } </script>} <div> <label>@Html.Raw(InputNumberRes.Index_Text0)</label> <c1-input-number value="0" format="n0" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text1)</label> <c1-input-number value="@Math.PI" format="n" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text2)</label> <c1-input-number value="3.5" format="c2" step="0.5" min="0" max="10" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text3)</label> <c1-input-number value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text7)</label> <c1-input-number id="invalidInput" min="100" max="1000" value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)" invalid-input="onInvalidInput" value-changed="onValueChanged"></c1-input-number> </div> <div> <label>@Html.Raw(InputNumberRes.Index_Text5)</label> <c1-input-number value="null" placeholder="@InputNumberRes.Index_EnterANumber" is-required="false" format="g5" input-type="number" handle-wheel="@Convert.ToBoolean(optionsModel.Options["Handle Wheel"].CurrentValue)"></c1-input-number> </div> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Description{ <p>@Html.Raw(InputNumberRes.Index_Text4)</p> <p>@Html.Raw(InputNumberRes.Index_Text6)</p> <p>@Html.Raw(InputNumberRes.HandleWheelDescription_Text0)</p> } |