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

Question

I am using InputText for almost all the attributes. Some of the attributes are of type Double. When I bind the double value in InputText its giving me error. How can i resolve this? I dont want to use 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>

I am getting error at @trade.qty in <InputText @bind-Value="@trade.qty" class="form-control" /> as its a double value.

Model:

 public Double qty { get; set; }

I tried something like <InputText @bind-Value="@trade.qty.ToString()" class="form-control" /> It didnt't work.

Answer 1

Use

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

It is bindable to double.

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

Answer 2

I am not sure why you want that functionality, but what about creating support string property and converting the number inside?

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 3

I think both @Alanmakanambra and @Guy at Mercator's answers could both be marked as correct because they answer the question. But I thought it would be worth adding an additional comment.

HTML inputs are handled differently by different browsers. Especially in phone browsers, a numerical input is likely to popup a built-in control (like a numpad). The Blazor controls render to <input type="number"> , and each browser will present its version of a number input.

If you make a custom control (eg using a text input to process numerical input), then you will bypass different devices' native approach to handling numerical input. In the case of hand phones, this make it hard (or almost impossible) for the user to easily enter numerical information.

Sometimes you WANT to bypass native systems. Maybe you have a custom calendar, and you don't want whatever date picker Apple has built-in to an iPhone to ruin your website's appearance. But generally speaking, you shouldn't do that.

Short version: use <input type="number> or <InputNumber>

Answer 4

I do this for float:

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

So I use input type, but I had the extra issue of my local numbers culture uses comma and I have that replaced using onchange and value, instead of binding the value directly. Works surprisingly well and it even keeps the comma, but I can type it manually in the field as well using period. Do note that the data I have here, is inside a C# DataTable and this is why the onchange looks the way it does, it will be a lot simpler if you just have a regular double to refer to.

Another advantage is that it adds some number stuff to it, so the step is of you press the arrow up or down on the element, and how much is to be added or subtracted from the value.

Answer 5

The "InputNumber" isn't the solution when you need to store a double, because you only can write an integer into this component. So, a solution for this problem (as was proposed by @Alamakanambra) is the use of a support string property and converting the number inside. Later, this property can be used into the "InputText" component.