Blazor 自定义可重用基础组件之 NumberBox（InputNumber）

只能输入数字的输入框，为避免命名冲突，先命名为NumberBox。

NumberBox.razor

@inherits InputBase<TValue>
@typeparam TValue
<div class="d-flex">
    <label class="control-label w-auto mt-2"><b>@Lable</b></label>
    <div style="width:@InputWidth">
        <input type="number" @bind-value="CurrentValueAsString" class="form-control" disabled="@Disabled" @ref="Element"  @attributes="AdditionalAttributes"/>
        <span class="w-100"><ValidationMessage For="ValueExpression" /></span>
    </div>
</div>

NumberBox.razor.cs

    public partial class NumberBox<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] TValue> : InputBase<TValue>
    {
        [Parameter]
        public required string Lable { get; set; }

        [Parameter]
        public string InputWidth { get; set; } = "300";

        [Parameter]
        public bool Disabled { get; set; }

        protected override void OnParametersSet()
        {
            base.OnParametersSet();
            Lable += "：";
            InputWidth += "px;";
        }

        //以下是复制于InputNumber 的源码，除了渲染部分注释掉外未作改动。
        private static readonly string _stepAttributeValue = GetStepAttributeValue();
        private static string GetStepAttributeValue()
        {

            // Unwrap Nullable<T>, because InputBase already deals with the Nullable aspect
            // of it for us. We will only get asked to parse the T for nonempty inputs.
            var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
            if (targetType == typeof(int) ||
                targetType == typeof(long) ||
                targetType == typeof(short) ||
                targetType == typeof(float) ||
                targetType == typeof(double) ||
                targetType == typeof(decimal))
            {
                return "any";
            }
            else
            {
                throw new InvalidOperationException($"The type '{targetType}' is not a supported numeric type.");
            }
        }

        /// <summary>
        /// Gets or sets the error message used when displaying an a parsing error.
        /// </summary>
        [Parameter] public string ParsingErrorMessage { get; set; } = "The {0} field must be a number.";

        /// <summary>
        /// Gets or sets the associated <see cref="ElementReference"/>.
        /// <para>
        /// May be <see langword="null"/> if accessed before the component is rendered.
        /// </para>
        /// </summary>
        [DisallowNull] public ElementReference? Element { get; protected set; }

        //这里是生成渲染树，我们用MyInputNumber.razor代替了。
        /// <inheritdoc />
        //protected override void BuildRenderTree(RenderTreeBuilder builder)
        //{
        //    builder.OpenElement(0, "input");
        //    builder.AddAttribute(1, "step", _stepAttributeValue);
        //    builder.AddMultipleAttributes(2, AdditionalAttributes);
        //    builder.AddAttribute(3, "type", "number");
        //    builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
        //    builder.AddAttributeIfNotNullOrEmpty(5, "class", CssClass);
        //    builder.AddAttribute(6, "value", CurrentValueAsString);
        //    builder.AddAttribute(7, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        //    builder.SetUpdatesAttributeName("value");
        //    builder.AddElementReferenceCapture(8, __inputReference => Element = __inputReference);
        //    builder.CloseElement();
        //}

        /// <inheritdoc />
        protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
        {
            if (BindConverter.TryConvertTo<TValue>(value, CultureInfo.InvariantCulture, out result))
            {
                validationErrorMessage = null;
                return true;
            }
            else
            {
                validationErrorMessage = string.Format(CultureInfo.InvariantCulture, ParsingErrorMessage, DisplayName ?? FieldIdentifier.FieldName);
                return false;
            }
        }

        /// <summary>
        /// Formats the value as a string. Derived classes can override this to determine the formatting used for <c>CurrentValueAsString</c>.
        /// </summary>
        /// <param name="value">The value to format.</param>
        /// <returns>A string representation of the value.</returns>
        protected override string? FormatValueAsString(TValue? value)
        {
            // Avoiding a cast to IFormattable to avoid boxing.
            switch (value)
            {
                case null:
                    return null;

                case int @int:
                    return BindConverter.FormatValue(@int, CultureInfo.InvariantCulture);

                case long @long:
                    return BindConverter.FormatValue(@long, CultureInfo.InvariantCulture);

                case short @short:
                    return BindConverter.FormatValue(@short, CultureInfo.InvariantCulture);

                case float @float:
                    return BindConverter.FormatValue(@float, CultureInfo.InvariantCulture);

                case double @double:
                    return BindConverter.FormatValue(@double, CultureInfo.InvariantCulture);

                case decimal @decimal:
                    return BindConverter.FormatValue(@decimal, CultureInfo.InvariantCulture);

                default:
                    throw new InvalidOperationException($"Unsupported type {value.GetType()}");
            }
        }
    }

使用：

<EditForm Model="MyNumber1">
    <p>
        <MyInputNumber Lable="数字测试" @bind-Value="MyNumber1.MyNumber1" InputWidth="300" ParsingErrorMessage="这里只能输入数字！" />
    </p>
</EditForm>
@code{
    private MyNumber MyNumber1 = new();
    internal class MyNumber
    {
        internal int MyNumber1 { get; set; }
    }
}

//其中加不加 TValue="int"好像都行

效果：