通用剃须刀组件允许算术运算

Question

我想要创建一个剃须刀组件，允许输入int或浮动数字，并使用自旋控件增加或减少它们。但是，我不知道如何告诉Blazor生成器/ C#编译器如何处理传递给组件的值的算术操作，因为类型是泛型的。我需要做些什么才能使这种行动成为可能？

这是我的密码：

@typeparam TValue

@code {
    [Parameter]
    public TValue Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    public void SpinUp() { Value += (TValue) 1; }

    public void SpinDown() { Value -= (TValue) 1; }
}

我理解在编译时，泛型组件中没有关于TValue是否支持数字算法的信息。问题是如何告诉编译器TValue总是必须是数字数据类型(例如，受到某种限制)？

为了保持简短，我省略了所有HTML，因为它说明了这个问题。SpinUp()和SpinDown()是由两个按钮组成的控件的回调函数，您可以单击这些按钮来增加或减少数值文本框中的值。

Answer 1

听起来有点长，但是：

为任何缩短它的方式高兴！

@typeparam TValue
<div>
    <button class="btn btn-danger" @onclick=SpinDown>-</button>
    <button class="btn btn-success" @onclick=SpinUp>+</button>
</div>

<div>
    Value = @Value?.ToString()
</div>
@code {
    [Parameter]
    public TValue? Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    private void SpinUp()
    {
        TValue value;
        switch (Value)
        {
            case int val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case long val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case short val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case decimal val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case float val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case double val:
                val++;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            default:
                throw new Exception("Can't do maths operations on the type suplied");

        };

        ValueChanged.InvokeAsync(value);
    }

    private void SpinDown()
    {
        TValue value;
        switch (Value)
        {
            case int val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case long val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case short val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case decimal val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case float val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            case double val:
                val--;
                value = (TValue)Convert.ChangeType(val, typeof(TValue));
                break;

            default:
                throw new Exception("Can't do maths operations on the type suplied");

        };

        ValueChanged.InvokeAsync(value);
    }
}

我的测试页面：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Spinner @bind-Value=value/>

<div>
    Value : @value.ToString()
</div>
@code {
    private double value = 0;
}

Answer 2

如果您愿意使用.NET 7预览位，您可以这样做。

public partial class NumericThing<TValue>  where TValue : INumber<TValue>
{
    [Parameter]
    public TValue Value { get; set; }
        
    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    public void SpinUp()
    {           
        Value += TValue.CreateChecked(1);
    }

    public void SpinDown()
    {
        Value -= TValue.CreateChecked(1);
    }
}