Blazor - FluentNumberField does not work unsigned types

Question

I am not able to use an uint32, int16, ... when using the FluentNumberField.

<FluentNumberField @bind-value="HouseDetail.Age" TValue="UInt16">Age</FluentNumberField>

I cannot change the field type to int because this is what is expected in the Sql Server type. This is extremely frustrating and there is not much documentation on the Fluent UI controls.

It is also very upsetting that I cannot use the display name as a label for the FluentTextField and I have to use some type of GetDisplayName extension method.

I am also very upset that the binding for the FluentComboBox does not work for enum types.

It has been extremely discouraging using the Fluent controls with Blazor. I wanted to use them with Razor pages but there is no way to bind anything. Does anyone know about any of this?

I don't really want to use React and I'm seriously thinking of forgetting about the Fluent controls until they are actually working with Blazor pages. Is there anyway to get the fluent controls to bind without using Blazor?

There is not much information on the newer Fluent controls anywhere and everyone is still using the old ones which don't work very well either.

I have tried using the TValue property but that doesn't help.

Answer 1

You don't have to use the Fluent Library. It's not a commonly used component library.

Here's an example using standard input controls that support uint and ulong.

Note uint and ulong are types while Uint16.. etc are objects.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="bg-secondary m-3 p-3">
    <div class="mb-3">
        <input class="form-control" @bind=value />
    </div>

    <div class="bg-dark text-white p-2 mt-2">
        <div>
            Value(as uint): @value
        </div>
    </div>
</div>

@code {
    private uint? value;
}

If you use the Fluent controls, you need to think about your data pipeline design. What you get from the database is a Dbo object. Your domain objects don't have to be the same. You map from one object to another when you move data from your data domain to your domain/core domain.

Consider this:

You get your data as an immutable record like this:

public record DboModel {
    public uint Value { get; init; }
}

When you want to edit that data you convert it to a Edit object:

public class EditModel
{
    private DboModel _baseRecord = new();

    public int Value { get; set; }

    public EditModel(DboModel record)
    {
        _baseRecord = record with { };
        this.Value = (int)(record.Value);
    }

    public DboModel AsRecord => new DboModel()
    {
        Value = (uint)this.Value
    };

    public bool IsDirty => _baseRecord != AsRecord;
}

And use AsRecord to get the record you want to save back. I've added the form locking code to demo how to tie it into the edit model.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<div class="bg-secondary m-3 p-3">
    <InputNumber class="form-control" @bind-Value=model.Value />

    <div class="bg-dark text-white p-2 m-2">
        <div>
            Value(as uint): @model.AsRecord.Value
        </div>
    </div>
</div>

@if(model.IsDirty)
{
    <div class="alert alert-danger">Navigation is locked</div>
}

<NavigationLock OnBeforeInternalNavigation=this.OnLocationChanging ConfirmExternalNavigation=model.IsDirty />


@code {
    private EditModel model = new(new DboModel());

    public void OnLocationChanging(LocationChangingContext context)
    {
        if (model.IsDirty)
            context.PreventNavigation();
    }

}

There is not much information on the newer Fluent controls anywhere and everyone is still using the old ones which don't work very well either.

Who is everyone? We very rarely see any questions on here about the Fluent controls. Most people use other libraries, or write their own.