Add support for binding long / float / double / decimal

src/Microsoft.AspNetCore.Blazor/Components/BindMethods.cs

@@ -93,6 +93,38 @@ namespace Microsoft.AspNetCore.Blazor.Components
             return _ => setter(int.Parse((string)((UIChangeEventArgs)_).Value));
         }
 
+        /// <summary>
+        /// Not intended to be used directly.
+        /// </summary>
+        public static Action<UIEventArgs> SetValueHandler(Action<long> setter, long existingValue)
+        {
+            return _ => setter(long.Parse((string)((UIChangeEventArgs)_).Value));
+        }
+
+        /// <summary>
+        /// Not intended to be used directly.
+        /// </summary>
+        public static Action<UIEventArgs> SetValueHandler(Action<float> setter, float existingValue)
+        {
+            return _ => setter(float.Parse((string)((UIChangeEventArgs)_).Value));
+        }
+
+        /// <summary>
+        /// Not intended to be used directly.
+        /// </summary>
+        public static Action<UIEventArgs> SetValueHandler(Action<double> setter, double existingValue)
+        {
+            return _ => setter(double.Parse((string)((UIChangeEventArgs)_).Value));
+        }
+
+        /// <summary>
+        /// Not intended to be used directly.
+        /// </summary>
+        public static Action<UIEventArgs> SetValueHandler(Action<decimal> setter, decimal existingValue)
+        {
+            return _ => setter(decimal.Parse((string)((UIChangeEventArgs)_).Value));
+        }
+
         /// <summary>
         /// Not intended to be used directly.
         /// </summary>

test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/BindTest.cs

@@ -161,5 +161,98 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
             Assert.Equal("Fourth", boundValue.Text);
             Assert.Equal("Fourth choice", target.SelectedOption.Text);
         }
+
+        [Fact]
+        public void CanBindTextboxInt()
+        {
+            var target = Browser.FindElement(By.Id("textbox-int"));
+            var boundValue = Browser.FindElement(By.Id("textbox-int-value"));
+            var mirrorValue = Browser.FindElement(By.Id("textbox-int-mirror"));
+            Assert.Equal("-42", target.GetAttribute("value"));
+            Assert.Equal("-42", boundValue.Text);
+            Assert.Equal("-42", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            target.Clear();
+            target.SendKeys("42\t");
+            Assert.Equal("42", boundValue.Text);
+            Assert.Equal("42", mirrorValue.GetAttribute("value"));
+        }
+
+        [Fact]
+        public void CanBindTextboxLong()
+        {
+            var target = Browser.FindElement(By.Id("textbox-long"));
+            var boundValue = Browser.FindElement(By.Id("textbox-long-value"));
+            var mirrorValue = Browser.FindElement(By.Id("textbox-long-mirror"));
+            Assert.Equal("3000000000", target.GetAttribute("value"));
+            Assert.Equal("3000000000", boundValue.Text);
+            Assert.Equal("3000000000", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            target.Clear();
+            target.SendKeys("-3000000000\t");
+            Assert.Equal("-3000000000", boundValue.Text);
+            Assert.Equal("-3000000000", mirrorValue.GetAttribute("value"));
+        }
+
+        [Fact]
+        public void CanBindTextboxFloat()
+        {
+            var target = Browser.FindElement(By.Id("textbox-float"));
+            var boundValue = Browser.FindElement(By.Id("textbox-float-value"));
+            var mirrorValue = Browser.FindElement(By.Id("textbox-float-mirror"));
+            Assert.Equal("3.141", target.GetAttribute("value"));
+            Assert.Equal("3.141", boundValue.Text);
+            Assert.Equal("3.141", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            target.Clear();
+            target.SendKeys("-3.141\t");
+            Assert.Equal("-3.141", boundValue.Text);
+            Assert.Equal("-3.141", mirrorValue.GetAttribute("value"));
+        }
+
+        [Fact]
+        public void CanBindTextboxDouble()
+        {
+            var target = Browser.FindElement(By.Id("textbox-double"));
+            var boundValue = Browser.FindElement(By.Id("textbox-double-value"));
+            var mirrorValue = Browser.FindElement(By.Id("textbox-double-mirror"));
+            Assert.Equal("3.14159265359", target.GetAttribute("value"));
+            Assert.Equal("3.14159265359", boundValue.Text);
+            Assert.Equal("3.14159265359", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            target.Clear();
+            target.SendKeys("-3.14159265359\t");
+            Assert.Equal("-3.14159265359", boundValue.Text);
+            Assert.Equal("-3.14159265359", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            // Double shouldn't preserve trailing zeros
+            target.Clear();
+            target.SendKeys("0.010\t");
+            Assert.Equal("0.01", boundValue.Text);
+            Assert.Equal("0.01", mirrorValue.GetAttribute("value"));
+        }
+
+        [Fact]
+        public void CanBindTextboxDecimal()
+        {
+            var target = Browser.FindElement(By.Id("textbox-decimal"));
+            var boundValue = Browser.FindElement(By.Id("textbox-decimal-value"));
+            var mirrorValue = Browser.FindElement(By.Id("textbox-decimal-mirror"));
+            Assert.Equal("0.0000000000000000000000000001", target.GetAttribute("value"));
+            Assert.Equal("0.0000000000000000000000000001", boundValue.Text);
+            Assert.Equal("0.0000000000000000000000000001", mirrorValue.GetAttribute("value"));
+
+            // Modify target; verify value is updated and that textboxes linked to the same data are updated
+            // Decimal should preserve trailing zeros
+            target.Clear();
+            target.SendKeys("0.010\t");
+            Assert.Equal("0.010", boundValue.Text);
+            Assert.Equal("0.010", mirrorValue.GetAttribute("value"));
+        }
     }
 }

test/testapps/BasicTestApp/BindCasesComponent.cshtml

@@ -14,6 +14,38 @@
     <button id="textbox-initially-populated-setnull" onclick="@(() => { textboxInitiallyPopulatedValue = null; })">Set null</button>
 </p>
 
+<h2>Numeric Textboxes</h2>
+<p>
+    int:
+    <input id="textbox-int" bind="textboxIntValue" type="number" />
+    <span id="textbox-int-value">@textboxIntValue</span>
+    <input id="textbox-int-mirror" bind="textboxIntValue" readonly />
+</p>
+<p>
+    long:
+    <input id="textbox-long" bind="textboxLongValue" type="number" />
+    <span id="textbox-long-value">@textboxLongValue</span>
+    <input id="textbox-long-mirror" bind="textboxLongValue" readonly />
+</p>
+<p>
+    float:
+    <input id="textbox-float" bind="textboxFloatValue" type="number" />
+    <span id="textbox-float-value">@textboxFloatValue</span>
+    <input id="textbox-float-mirror" bind="textboxFloatValue" readonly />
+</p>
+<p>
+    double:
+    <input id="textbox-double" bind="textboxDoubleValue" type="number" />
+    <span id="textbox-double-value">@textboxDoubleValue</span>
+    <input id="textbox-double-mirror" bind="textboxDoubleValue" readonly />
+</p>
+<p>
+    decimal:
+    <input id="textbox-decimal" bind="textboxDecimalValue" type="number" />
+    <span id="textbox-decimal-value">@textboxDecimalValue</span>
+    <input id="textbox-decimal-mirror" bind="textboxDecimalValue" readonly />
+</p>
+
 <h2>Text Area</h2>
 <p>
     Initially blank:
@@ -65,6 +97,12 @@
     bool checkboxInitiallyUncheckedValue = false;
     bool checkboxInitiallyCheckedValue = true;
 
+    int textboxIntValue = -42;
+    long textboxLongValue = 3_000_000_000;
+    float textboxFloatValue = 3.141f;
+    double textboxDoubleValue = 3.14159265359d;
+    decimal textboxDecimalValue = 0.0000000000000000000000000001M;
+
     bool includeFourthOption = false;
     enum SelectableValue { First, Second, Third, Fourth }
     SelectableValue selectValue = SelectableValue.Second;