Blazor 中的 InputNumber 绑定转换器答案

【问题标题】：InputNumber binding converter in BlazorBlazor 中的 InputNumber 绑定转换器
【发布时间】：2020-03-27 12:07:29
【问题描述】：

我需要使用一些转换器来修改给 InputNumber 组件的数值。有谁知道如何以与 WPF 值转换器相同的方式修改绑定过程中的值？例如在绑定属性中将给定值除以 10（用户输入 10 => 属性设置为 1，但仍向用户显示为 10）？

如果我只想显示百分比（模型属性 0.57 => 显示值 57 %）怎么办？我可以使用某种格式化方式来实现这一点吗？

【问题讨论】：

您可以在模型上使用只读属性来返回您需要的内容

标签： blazor converters

【解决方案1】：

@Jazb 评论示例

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputNumber id="name" @bind-Value="exampleModel.PropertyAsInt" />
    <InputNumber @bind-Value="exampleModel.PropertyAsDouble" />

    <button type="submit">Submit</button>
</EditForm>

@code {
     private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine(exampleModel.GetFormattedIntProperty);
        Console.WriteLine($"{exampleModel.GetFormattedDouble}%");
    }
}

型号：

public class ExampleModel
    {
        public int PropertyAsInt { get; set; } = 10;
        public double PropertyAsDouble { get; set; } = 57;

        public int GetFormattedIntProperty
        {
            get
            {
                return int.Parse(PropertyAsInt.ToString()[0..1]);
            }
        }

        public double GetFormattedDouble
        {
            get
            {
                return PropertyAsDouble / 100;
            }
        }
    }

【讨论】：

【解决方案2】：

所以扩展@Zsolt Bendes 回答我的意见：我认为转换应该在视图级别处理。模型不应该知道视图实现（例如模型中的百分比值属性在 0...1 范围内）。我认为最好在后面的代码（或@code 块）上实现这些附加属性以充当转换器。如果您有多个需要转换为的属性，这种方式会有点重复，例如百分比值，但我还没有找到更好的方法。所以我建议的代码是（部分类）：

    <EditForm Model="@Example" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div class="row">
            <label for="prop">Property as percentage:</label>
            <InputNumber id="prop" @bind-Value=PercentageProperty/>
            <p>%</p>
        </div>

        <button type="submit">Submit</button>
    </EditForm>

    public partial class Component : ComponentBase
    {
        public ExampleModel Example { get; set; }

        public  double PercentageProperty { get => Example.ModelProperty * 100; set => Example.ModelProperty = value / 100; }

        public void HandleValidSubmit()
        {
            // Code to handle submit
        }
    }


    public class ExampleModel
    {
        public double ModelProperty { get; set; }
    }

希望 Blazor 团队设法使 InputNumber 组件绑定能够处理委托，或以其他方式处理可重用转换器...

【讨论】：