使用FluentDatePicker绑定DateTime属性时类型转换错误求助

问题场景 #

在Blazor项目中实现人员信息修改对话框，姓名绑定FluentTextField正常，但绑定FluentDatePicker到Person对象的BirthDate属性时触发错误：

cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.DateTime>' to 'Microsoft.AspNetCore.Components.EventCallback'

对话框组件代码 #

@implements IDialogContentComponent<FleuntBlazorWebApp.UI.Pages.People.Person>

<FluentDialogBody>
    <FluentTextField Label="Name:" @bind-Value="@Content.Name"/>
    <FluentDatePicker Label="Birthday" @bind-Value="@(Content.BirthDate)" />
</FluentDialogBody>

@code{
    [Parameter]
    public FleuntBlazorWebApp.UI.Pages.People.Person Content { get; set; } = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; }

    private async Task SaveAsync()
    {
        await Dialog.CloseAsync(Content);
    }

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

Person对象代码 #

public record Person
{
    public int PersonId { get; set; }
    public string Name { get; set; }
    public DateTime BirthDate { get; set; }
}

解决方案 #

错误根源是直接绑定嵌套属性Content.BirthDate时，Blazor无法正确生成匹配的EventCallback（Person是不可变record类型，无法直接修改嵌套属性）。提供两种解决方式：

方式1：使用本地变量中转绑定 #

在组件内声明本地变量存储生日值，初始化时同步Content的原始值，保存时再同步回Content对象：

@implements IDialogContentComponent<FleuntBlazorWebApp.UI.Pages.People.Person>

<FluentDialogBody>
    <FluentTextField Label="Name:" @bind-Value="@Content.Name"/>
    <FluentDatePicker Label="Birthday" @bind-Value="@_localBirthDate" />
</FluentDialogBody>

@code{
    [Parameter]
    public FleuntBlazorWebApp.UI.Pages.People.Person Content { get; set; } = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; }

    private DateTime _localBirthDate;

    protected override void OnInitialized()
    {
        _localBirthDate = Content.BirthDate;
        base.OnInitialized();
    }

    private async Task SaveAsync()
    {
        // 利用record的with语法创建新对象更新BirthDate
        Content = Content with { BirthDate = _localBirthDate };
        await Dialog.CloseAsync(Content);
    }

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

方式2：手动拆分绑定事件 #

直接指定Value和ValueChanged事件，明确处理类型转换：

<FluentDatePicker Label="Birthday" 
                  Value="@Content.BirthDate" 
                  ValueChanged="@((DateTime value) => Content = Content with { BirthDate = value })" />

原因说明 #

FluentDatePicker的@bind-Value要求绑定到可直接赋值的属性，而Content.BirthDate是嵌套在不可变record中的属性，无法直接通过EventCallback更新。通过本地变量中转或手动处理ValueChanged事件，可解决类型不匹配问题，同时符合record类型的不可变特性。

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