是否可以将小数绑定到 Blazor 中的文本框并删除尾随零？

Question

我有一个必需但很少使用的 4 位小数值（整数或 1 位是最常见的情况）。虽然显示删除尾随零的小数很简单，但如果没有自定义控件，尝试将其绑定到 InputNumber 并设置其格式似乎是不可能的。

Answer 1

正如@meziantou 所说，目前不支持它，您需要自定义输入组件。我不确定您是否只是想将数字强制到 x 位或只是格式化它，但这是 InputNumber 的自定义版本，专门用于小数，您可以根据自己的需要进行调整。

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Rendering;
using System;

namespace Whosebug.Answers
{
    public class InputFormattedNumber : InputNumber<Decimal>
    {
        [Parameter] public string FormatString { get; set; }

        private string formattedNumber => getFormattedValue(this.Value);

        private string stringValue
        {
            get => formattedNumber;
            set => CurrentValueAsString = getFormattedValue(decimal.Parse(value));
        }

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "input");
            builder.AddMultipleAttributes(2, AdditionalAttributes);
            builder.AddAttribute(3, "type", "number");
            builder.AddAttribute(4, "class", CssClass);
            builder.AddAttribute(5, "value", formattedNumber);
            builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => stringValue = __value, stringValue));
            builder.CloseElement();
        }

        private string getFormattedValue(decimal value)
        {
            if (!String.IsNullOrWhiteSpace(FormatString))
            {
                try
                {
                    return value.ToString(this.FormatString);
                }
                catch { }
            }
            return value.ToString();
        }

    }
}

还有一个演示表格：

@page "/Editor"
<h3>EditForm</h3>

<EditForm EditContext="this._editContext" OnSubmit="SubmitForm">
    <InputNumber @bind-Value="_model.Value"></InputNumber>
    <InputFormattedNumber @bind-Value="_model.FormattedValue" FormatString="0.00000"></InputFormattedNumber>
    <button type="submit" class="btn btn-success">Submit</button>
</EditForm>
<div class="m-2 p-2">Value: @_model.Value</div>
<div class="m-2 p-2">Formatted Value: @_model.FormattedValue</div>

@code {

    public class Model
    {
        public decimal Value { get; set; } = 4.00M;
        public decimal FormattedValue { get; set; } = 4.00M;
    }

    Model _model = new Model();
    EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(_model);
    }

    void SubmitForm()
    {
        var x = true;
    }
}

是否可以将小数绑定到 Blazor 中的文本框并删除尾随零？

Is it possible to bind a decimal to a textbox in Blazor with trailing zeros removed?

c#

asp.net

razor

blazor