在 Blazor 应用 Razor 页面的 InputText 中绑定类型双精度值答案

【问题标题】：Binding Type double values in InputText of Blazor app Razor page在 Blazor 应用 Razor 页面的 InputText 中绑定类型双精度值
【发布时间】：2021-09-17 07:43:28
【问题描述】：

我对几乎所有属性都使用 InputText。一些属性是 Double 类型。当我在 InputText 中绑定双精度值时，它给了我错误。我该如何解决这个问题？我不想使用 InputNumber。

 <div class="form-group col">
 <label title="The quantity ">Quantity</label>
 <i class="fa fa-info-circle" style="color:dimgrey" title="The quantity"> 
 </i>
 <InputText @bind-Value="@trade.qty" class="form-control" />
 <ValidationMessage For="@(() => trade.qty)" />
 </div>

我在@trade.qty 在<InputText @bind-Value="@trade.qty" class="form-control" /> 处遇到错误作为它的双精度值。

型号：

 public Double qty { get; set; }

我尝试过类似<InputText @bind-Value="@trade.qty.ToString()" class="form-control" /> 没用。

【问题讨论】：

标签： c# razor blazor razor-pages blazor-webassembly

【解决方案1】：

我不知道你为什么想要那个功能，但是创建支持字符串属性并转换里面的数字呢？

class MyModel
{
    public Double qty { get; set; }
    public string qtyString{
      get=>qty.ToString();
      set{
        if(Double.TryParse(value, out double val))
        qty = val;
         }
      }
}

<InputText @bind-Value="@mod.qtyString"/>

Working solution.

【讨论】：

当我只想使用 InputText 时，这对我有帮助。谢谢

【解决方案2】：

使用

<InputNumber @bind-Value=trade.qty min="1" max="999" />

可以绑定到double。

https://docs.microsoft.com/fr-fr/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0

【讨论】：

【解决方案3】：

我认为 Mercator 的答案中的 @Alanmakanambra 和 @Guy 都可以被标记为正确，因为他们回答了这个问题。但我认为值得添加额外的评论。

不同浏览器对 HTML 输入的处理方式不同。尤其是在手机浏览器中，数字输入很可能会弹出一个内置控件（如小键盘）。 Blazor 控件呈现为<input type="number">，每个浏览器都会显示其版本的数字输入。

如果您制作自定义控件（例如，使用文本输入来处理数字输入），那么您将绕过不同设备的原生方法来处理数字输入。对于手机，这使得用户很难（或几乎不可能）轻松输入数字信息。

有时您想绕过本机系统。也许您有一个自定义日历，并且您不希望 Apple 内置在 iPhone 中的任何日期选择器破坏您网站的外观。但一般来说，你不应该那样做。

短版：使用<input type="number> 或<InputNumber>

【讨论】：

【解决方案4】：

我这样做是为了浮动：

<input type="number" pattern="/^-?\d+\?\d*$/" readonly="@isReadOnly" onKeyPress="if(this.value.length==8) return false;" 
style="background-color:transparent; border:none; padding: 3px; width: 4em" 
value="@cellvalue.ToString(new System.Globalization.CultureInfo("en-US")).Replace(",",".")" 
@onchange="@((ChangeEventArgs __e) => row.SetField<float>(col, float.Parse(__e.Value.ToString().Replace(",",".")) )" size="8" step=0.01 max="9999" id="number" />

所以我使用输入类型，但是我的本地数字文化使用逗号的额外问题，我使用 onchange 和 value 替换了它，而不是直接绑定值。效果出奇的好，它甚至保留了逗号，但我可以在字段中手动输入它，也可以使用句号。请注意，我在这里拥有的数据位于 C# DataTable 中，这就是为什么 onchange 看起来像它的样子，如果你只有一个常规的 double 来引用它会简单得多。

另一个优点是它添加了一些数字内容，因此步骤是您在元素上按向上或向下箭头，然后从值中添加或减去多少。

【讨论】：