Blazor 应用程序 Razor 页面的 InputText 中的绑定类型双精度值

Question

我对几乎所有属性都使用 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>

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

型号：

 public Double qty { get; set; }

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

Answer 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.

Answer 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

Answer 3

我认为墨卡托的@Alanmakanambra 和@Guy 的回答都可以标记为正确，因为他们回答了问题。但我认为添加额外的评论是值得的。

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

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

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

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

Answer 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 和值替换了它，而不是直接绑定值。效果出奇地好，它甚至保留了逗号，但我可以在字段中手动输入它，也可以使用句点。请注意，我这里的数据在 C# DataTable 中，这就是为什么 onchange 看起来像它的样子，如果你有一个常规的双精度引用，它会简单得多。

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

Blazor 应用程序 Razor 页面的 InputText 中的绑定类型双精度值

Binding Type double values in InputText of Blazor app Razor page

c#

razor

razor-pages

blazor

blazor-webassembly