Can not reset FluentSelect to null so it must be selected by user.

[ZnowuJa]

Hi,
In Dialog (panel and dialog) for complex type I can not reset FluentSelect dropdown to "null" so user has to select one option.
Currently in Add action, user always can see first CategoryType from database, while selected option is null so it crashes on save.
My goal is to "clear" CategoryType dropdown on Add Action so user is forced to select one of them.

Here my classes:

public class CategoryTypeVm 
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int StatusId { get; set; }
}

public class CategoryVm 
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Prefix { get; set; }
    public int? StatusId { get; set; }
    public CategoryTypeVm? CategoryTypeVm { get; set; }
}

My page:

@page "/categories"

@inject IMediator _mediator
@inject ILogger<Category_Page> _logger
@inject IDialogService _dialogService
@inject IToastService _toastService

<h3>Categories</h3>

@if (cats == null)
{
    <FluentProgressRing>Loading...</FluentProgressRing>
}
else
{
    <FluentDataGrid Items="@cats" TGridItem="CategoryVm">
        <PropertyColumn Property="@(c => c.Id)" Sortable="true" Align="Align.Start" Tooltip="true" />
        <PropertyColumn Property="@(c => c.Name)" Sortable="true" Align="Align.Start" Tooltip="true" />
        <PropertyColumn Property="@(c => c.Prefix)" Sortable="true" Align="Align.Start" Tooltip="true" />
        <PropertyColumn Property="@(c => c.CategoryTypeVm.Name)" Sortable="true" Align="Align.Start" Tooltip="true" />
        <TemplateColumn Title="Actions" Align="Align.End">
            <FluentButton IconEnd="@(new Icons.Regular.Size20.BookOpen())" OnClick="@(() => View(context))" />
            <FluentButton IconEnd="@(new Icons.Regular.Size20.Edit())" OnClick="@(() => EditCatType(context))" />
            <FluentButton IconEnd="@(new Icons.Regular.Size20.Delete())" OnClick="@(() => Delete(context))" />

        </TemplateColumn>
    </FluentDataGrid>
    <FluentButton IconStart="@(new Icons.Regular.Size24.Add())" OnClick="@(() => Add())" />
}

@code {
    private IQueryable<CategoryVm> cats;
    protected override async Task OnInitializedAsync()
    {
        await Load();
    }
    private async Task Load()
    {
        cats = await _mediator.Send(new GetAllCategoriesQuery());
        Console.WriteLine(cats.Count());
    }
    private async Task EditCatType(CategoryVm ctVm)
    {
        ToastIntent intent;
        string message = string.Empty;
        int i = 0;

        var data = ctVm;
        var dialog = await _dialogService.ShowDialogAsync<Category_Edit_Component>(data, new DialogParameters()
            {
                Height = "240px",
                Width = "720px",
                Title = data.Id > 0 ? "Update Category Name" : "Create new Category",
                PreventDismissOnOverlayClick = false,
                PreventScroll = true,
            });
        var result = await dialog.Result;


        if (!result.Cancelled && result.Data != null)
        {
            ctVm = (CategoryVm)result.Data;
            if (ctVm.Id > 0)
            {
                i = await _mediator.Send(new UpdateCategoryCommand(ctVm.Id, ctVm.Name, ctVm.Prefix, ctVm.CategoryTypeVm));
                intent = ToastIntent.Success;
                message = "Category has been updated!";
            }
            else if (ctVm.Id == 0)
            {
                Console.WriteLine("Tu weszlismy?" + ctVm.Name + ctVm.Prefix + ctVm.CategoryTypeVm.Name);
                i = await _mediator.Send(new CreateCategoryCommand(ctVm.Name, ctVm.Prefix, ctVm.CategoryTypeVm));
                intent = ToastIntent.Success;
                message = "Category has been Created!";
            }
            else
            {
                intent = ToastIntent.Warning;
                message = "Something went realy wrong!";
            }
        }
        else if (result.Cancelled)
        {
            intent = ToastIntent.Info;
            message = "Update Cancelled...";
        }
        else
        {
            intent = ToastIntent.Error;
            message = "Something went wrong!!!";
        }

        await Load();
        _toastService.ShowToast(intent, message, 3000);
        Console.WriteLine(result.GetType());
    }

    private async Task View(CategoryVm catType)
    {
        await _dialogService.ShowInfoAsync(message: $"Category type id: {catType.Id}, name: {catType.Name}");
    }

    private async Task Add()
    {
        CategoryVm ctVm = new CategoryVm { Id = 0, Name = string.Empty, Prefix = string.Empty, CategoryTypeVm = new CategoryTypeVm() };
        await EditCatType(ctVm);
    }

    private async Task Delete(CategoryVm ctVm)
    {
        ToastIntent intent;
        string message = string.Empty;

        var i = await _mediator.Send(new DeleteCategoryCommand(ctVm.Id));

        if (i == ctVm.Id)
        {
            intent = ToastIntent.Success;
            message = "Category has been deleted!";
        }
        else
        {
            intent = ToastIntent.Error;
            message = "Something went wrong!!!";
        }
        await Load();
        _toastService.ShowToast(intent, message, 3000);
    }
}

And my Component:

@* Category Edit Component *@

@using Application.ITWarehouseCQRS.Categories
@using Application.ITWarehouseCQRS.Categories.Queries
@using Application.ITWarehouseCQRS.Categories.Commands
@using Application.ITWarehouseCQRS.CategoryTypes
@using Application.ITWarehouseCQRS.CategoryTypes.Queries

@using MediatR
@inject IMediator _mediator;
@implements IDialogContentComponent<CategoryVm>

@* Header *@
<FluentDialogHeader ShowDismiss="true">
    <FluentStack VerticalAlignment="VerticalAlignment.Center">
        <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())" />
        <FluentLabel Typo="Typography.PaneHeader">
            @Dialog.Instance.Parameters.Title
        </FluentLabel>
    </FluentStack>
</FluentDialogHeader>

@* Footer *@
<FluentDialogFooter>
    <FluentButton Appearance="Appearance.Accent" OnClick="@SaveAsync">Save</FluentButton>
    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
</FluentDialogFooter>

@* Body *@
<FluentDialogBody Orientation="Orientation.Horizontal">
    <EditForm Model="@Content">
        <FluentValidationValidator TValidator="CategoryVmValidator" />

        <FluentTextField Id="Name" @bind-Value="@Content.Name" Placeholder="Enter name" />
        <FluentValidationMessage For="@(() => Content.Name)" />
 
       <FluentTextField Id="Prefix" @bind-Value="@Content.Prefix" Placeholder="Enter prefix" />
        <FluentValidationMessage For="@(() => Content.Prefix)" />

        @{
            // Check if it's an Edit operation
            if (Content.Id != 0)
            {
                <FluentSelect TOption="CategoryTypeVm"
                              Label="Select a category type"
                              Items="@catTypeVmList"
                              Id="Id"
                              Width="150px"
                              Height="250px"
                              OptionValue="@(p => p.Id.ToString())"
                              OptionText="@(p => p.Name)"
                              @bind-SelectedOption="@Content.CategoryTypeVm" />
            }
            else
            {
                // For new records, don't bind SelectedOption to Content.CategoryTypeVm
                <FluentSelect TOption="CategoryTypeVm"
                              Label="Select a category xtype"
                              Items="@catTypeVmList"
                              Id="Id"
                              Width="150px"
                              Height="250px"
                              OptionValue="@(p => p.Id.ToString())"
                              OptionText="@(p => p.Name)"
                              @bind-SelectedOption="@SelectedOption" />
            }
        }
        <FluentValidationMessage For="@(() => Content.CategoryTypeVm)" />
    </EditForm>
</FluentDialogBody>

@code {
    [Parameter]
    public CategoryVm Content { get; set; } = default!;

    private EditContext EditContext;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; } = default!;

    private IQueryable<CategoryTypeVm> catTypeVmList { get; set; }
    private CategoryTypeVm SelectedOption { get; set; } = new CategoryTypeVm { };

    protected override async Task OnInitializedAsync()
    {
        EditContext = new EditContext(Content);
        catTypeVmList = await _mediator.Send(new GetAllCategoryTypesQuery());
    }

    private async Task SaveAsync()
    {
        if (Content.Id != 0)
        {
            await Dialog.CloseAsync(Content);
        }
        else
        {
            Content.CategoryTypeVm = SelectedOption;
            await Dialog.CloseAsync(Content);
        }
    }

    private async Task CancelAsync()
    {
        await Dialog.CancelAsync();
    }
}

It is al in Blazor SSR .Net8.

[vnbaaij]

You need to add a FluentOption to the select with an empty value (and perhaps a text like 'select a category')

[ZnowuJa]

I do not get how does it work.
Isn't it enough to assign @bind-SelectedOption="@SelectedOption" where SelectedOption is newly created empty object?
I tried to add FluentOption, but with no success, and can not find good example how to do it.

[vnbaaij]

No that is not enough because there needs to be a corresponding item in the list (it is a 'bound' property). You need to add an element to your CategoryTypeVm so it will render a FluentOption where the value = null and the Text is somthing you can come up with.

[ZnowuJa]

Thank you! It worked!