Blazor应用程序Razor页面的InputText中的Binding Type双值



我对几乎所有的属性都使用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" />的东西它不起作用。

使用

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

它是可装订的。

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

我认为@Alanmakanambra和@Guy在Mercator的回答都可以被标记为正确,因为他们回答了这个问题。但我认为值得再加一条评论。

不同的浏览器对HTML输入的处理方式不同。特别是在手机浏览器中,数字输入可能会弹出内置控件(如数字键盘(。Blazor控件渲染为<input type="number">,每个浏览器都将显示其数字输入版本。

如果您进行自定义控件(例如,使用文本输入来处理数字输入(,那么您将绕过不同设备处理数字输入的本地方法。在手持电话的情况下,这使得用户很难(或几乎不可能(轻松输入数字信息。

有时你想绕过本机系统。也许你有一个定制的日历,你不希望苹果在iPhone上内置的任何日期选择器破坏你网站的外观。但总的来说,你不应该那样做。

短版本:使用<input type="number><InputNumber>

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

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"/>

工作解决方案。

我这样做是为了浮点:

<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#数据表中,这就是为什么onchange看起来是这样的,如果你只引用一个常规的double,它会简单得多。

另一个优点是它添加了一些数字内容,所以步骤是在元素上向上或向下按箭头,以及从值中添加或减去多少。

;InputNumber";不是需要存储double的解决方案,因为您只能向该组件中写入一个整数。因此,这个问题的解决方案(正如@Alamakanmbra提出的(是使用支持字符串属性并转换内部的数字。稍后,此属性可以用于";InputText";组成部分

最新更新