Blazor FluentNumberField不支持无符号类型等多类技术问题咨询

1. FluentNumberField 兼容 UInt16/Int16/UInt32 类型 #

FluentNumberField默认只支持int/long等常用数值类型，要适配UInt16这类类型，需要自定义类型转换器并注册：

步骤1：实现类型转换器 #

创建实现IModelConverter<T>的转换器类，以UInt16为例：

public class UInt16Converter : IModelConverter<ushort>
{
    public ushort ConvertFromString(string? value, CultureInfo? culture)
    {
        if (ushort.TryParse(value, NumberStyles.Integer, culture, out var result))
            return result;
        return default;
    }

    public string? ConvertToString(ushort value, CultureInfo? culture)
    {
        return value.ToString(culture);
    }
}

步骤2：使用转换器 #

• 局部使用：直接在控件上指定Converter参数

<FluentNumberField @bind-Value="HouseDetail.Age" TValue="UInt16" Converter="new UInt16Converter()">Age</FluentNumberField>

• 全局注册：在Program.cs添加服务，所有同类型控件自动生效

builder.Services.AddSingleton<IModelConverter<ushort>, UInt16Converter>();

2. FluentTextField 自动读取显示名称做标签 #

不用每次调用GetDisplayName，可以封装一个自定义组件自动读取[Display]注解的名称：

@typeparam TValue
@using System.ComponentModel.DataAnnotations

<FluentTextField @bind-Value="Value" Label="@GetLabel()"></FluentTextField>

@code {
    [Parameter, EditorRequired]
    public TValue Value { get; set; } = default!;

    [Parameter]
    public Expression<Func<TValue>>? ValueExpression { get; set; }

    private string GetLabel()
    {
        if (ValueExpression == null) return string.Empty;
        var member = (MemberExpression)ValueExpression.Body;
        var displayAttr = member.Member.GetCustomAttribute<DisplayAttribute>();
        return displayAttr?.Name ?? member.Member.Name;
    }
}

使用时只需绑定属性，自动取[Display(Name = "xxx")]的名称：

// 假设HouseDetail.Name有[Display(Name = "房屋名称")]注解
<CustomFluentTextField @bind-Value="HouseDetail.Name" />

3. FluentComboBox 绑定枚举类型 #

把枚举转为SelectItem列表，同时支持读取枚举的[Display]注解：

@using System.ComponentModel.DataAnnotations

<FluentComboBox @bind-Value="SelectedStatus" 
                Items="@StatusItems" 
                TextField="@(item => item.Text)" 
                ValueField="@(item => item.Value)">
    房屋状态
</FluentComboBox>

@code {
    public enum HouseStatus 
    { 
        [Display(Name = "可售")]
        Available, 
        [Display(Name = "已售")]
        Sold, 
        [Display(Name = "已出租")]
        Rented 
    }

    public HouseStatus SelectedStatus { get; set; }

    private List<SelectItem<HouseStatus>> StatusItems { get; set; } = new();

    protected override void OnInitialized()
    {
        StatusItems = Enum.GetValues<HouseStatus>()
            .Select(e => new SelectItem<HouseStatus>
            {
                Value = e,
                Text = GetEnumDisplayName(e)
            })
            .ToList();
    }

    private string GetEnumDisplayName(HouseStatus status)
    {
        var enumMember = typeof(HouseStatus).GetMember(status.ToString()).First();
        var displayAttr = enumMember.GetCustomAttribute<DisplayAttribute>();
        return displayAttr?.Name ?? status.ToString();
    }
}

4. Razor Pages 中实现 Fluent 控件绑定 #

Razor Pages需基于PageModel的绑定机制，步骤如下：

步骤1：配置PageModel #

给需要绑定的属性加[BindProperty]标记：

public class HouseEditModel : PageModel
{
    [BindProperty]
    public ushort Age { get; set; }

    public IActionResult OnPost()
    {
        // 处理提交的Age值
        return Page();
    }
}

步骤2：在视图中绑定控件 #

确保已注册Fluent UI服务（Program.cs中builder.Services.AddFluentUIComponents();），然后直接绑定到Model属性：

@page "/house/edit"
@model HouseEditModel

<FluentNumberField @bind-Value="Model.Age" TValue="UInt16" Converter="new UInt16Converter()">Age</FluentNumberField>
<FluentButton Type="ButtonType.Submit">保存</FluentButton>

5. 无需Blazor使用Fluent UI控件 #

可以用Fluent UI Web Components（纯前端实现），直接在普通HTML/JS项目中引入使用：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.5.1/dist/css/web-components.min.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.5.1/dist/web-components.min.js"></script>
</head>
<body>
    <fluent-number-field id="ageInput" label="年龄"></fluent-number-field>
    <fluent-button onclick="submitForm()">提交</fluent-button>

    <script>
        const ageInput = document.getElementById('ageInput');
        
        // 读取值
        function submitForm() {
            console.log("输入的年龄:", ageInput.value);
        }

        // 设置值
        ageInput.value = 30;
    </script>
</body>
</html>

Web Components版本支持原生双向绑定，通过value属性和change事件实现，API和Blazor版本对齐，无需依赖Blazor框架。

内容的提问来源于stack exchange，提问作者Coder6652