Форматировать InputNumber как процент

Question

У меня есть модель, привязанная к форме редактирования. Одно из свойств модели - десятичная дробь в процентах. Я хотел бы показать пользователю и позволить ему вводить такие вещи, как:

10,5 вместо 0,015

Есть ли форматер InputNumber? Я бы согласился, если бы сторонний nuget справился с этим. Это упрощенный пример кода

<EditForm Model="@Model">
<InputNumber @bind-Value="Model.PercentValue" />
</EditForm>

Answer 1

Создайте новый файл, назовите его InputPercent.razor, затем вставьте в него этот код:

      @typeparam TNullableNumber
@inherits InputBase<TNullableNumber>
<div class="input-group">
    <input @attributes="AdditionalAttributes"
           class="form-control"
           inputmode="decimal"
           @onchange="valueChanged"
           type="number"
           value="@percent" />
    <span class="input-group-text">%</span>
</div>

@code {
    decimal percent = 0;
    Type type;

    protected override void OnParametersSet()
    {
        type = Nullable.GetUnderlyingType(typeof(TNullableNumber)) ?? typeof(TNullableNumber);

        percent = (decimal)(object)CurrentValue * 100;
    }

    protected override bool TryParseValueFromString(string value, out TNullableNumber result, out string validationErrorMessage)
    {
        throw new NotImplementedException();
    }

    void valueChanged(ChangeEventArgs args)
    {
        var val = args.Value.ToString();

        if (type == typeof(float) && float.TryParse(val, out float resultFloat))
        {
            CurrentValue = (TNullableNumber)(object)(resultFloat / 100);
        }
        else if (type == typeof(double) && double.TryParse(val, out double resultDouble))
        {
            CurrentValue = (TNullableNumber)(object)(resultDouble / 100);
        }
        else if (type == typeof(decimal) && decimal.TryParse(val, out decimal resultDecimal))
        {
            CurrentValue = (TNullableNumber)(object)(resultDecimal / 100);
        }
        else throw new InvalidCastException("Only float, double, and decimal types can be used for the InputPercent component");
    }
}

Я добавил кое-что из Bootstrap, если вы не используете Bootstrap, просто удалите его.

Я не проверял, работает ли он с нулевыми числами с плавающей запятой, двойными и десятичными типами, скрестив пальцы.

Используйте его как любой компонент ввода:

      <InputPercent @bind-Value="MyClass.MyPercentValue" />