CODEWITHSUNDEEP
blazorconverters
hablahat
hablahat

Reputation: 192

InputNumber binding converter in Blazor

I need to use some converters to modify numeric values given to InputNumber component. Does anyone know how to modify the value in the binding process the same way as with WPF Value Converters? For example dividing the given value by 10 in the binded property (user inputs 10 => property gets set as 1, but still shown as 10 to user)?

What if I just want to show percentages (model property 0.57 => show value 57 %)? Can I use some way of formatting to achieve this?

Upvotes: 6

Views: 10356

Answers (2)

hablahat
hablahat

Reputation: 192

So expanding @Zsolt Bendes answer with my opinion: I think that the conversion should be handled on the view level. The model should not know about the view implementation (e.g. percentage value property in the model is in range 0...1). I think it's better to implement these additional properties on your code behind (or @code block) to act as a converter. This way gets kind of repetitive if you have several properties that need to be converted to e.g. percentage values, but I have not discovered a better way. So my suggested code is (with partial class):

    <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; }
    }

Hopefully Blazor team manages to make InputNumber component binding able to handle delegates, or some other way to handle reusable converters...

Upvotes: 2

Zsolt Bendes
Zsolt Bendes

Reputation: 2569

Example of @Jazb comment

<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}%");
    }
}

The model:

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;
            }
        }
    }

Upvotes: 3

Related Questions