Blazor Web App中Fluent UI Dialog组件报错及传参问题求助

错误原因 #

Blazor的[Parameter]和[CascadingParameter]特性仅支持标注在**属性（Property）**上，不能用于字段（Field）。你的PersonDialog组件中，将Content和Dialog声明为字段（无get/set访问器），这直接触发了报错。

修正步骤 #

1. 修复Dialog组件的参数声明 #

将字段改为带get/set的属性，同时修正BirthDate的输入控件（用FluentDatePicker而非FluentNumberField），并添加保存/取消按钮：

@implements IDialogContentComponent

<FluentDialogBody>
    <FluentTextField @bind-Value="@Content.Name" Label="Name" />
    <FluentDatePicker @bind-Value="@Content.BirthDate" Label="Birth Date" />
</FluentDialogBody>
<FluentDialogActions>
    <FluentButton OnClick="SaveAsync" Appearance="Appearance.Primary">Save</FluentButton>
    <FluentButton OnClick="CancelAsync">Cancel</FluentButton>
</FluentDialogActions>

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

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

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

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

2. 修正Person实例的更新逻辑 #

由于Person是record类型（不可变），在EditPerson方法中，不能直接赋值原变量，需要替换集合中的对应元素：

async Task EditPerson(Person person)
{
    var dialog = await DialogService.ShowDialogAsync<PersonDialog>(person, new DialogParameters()
    {
        Height = "240px",
        Title = $"Updating {person.Name}",
        PreventDismissOnOverlayClick = true,
        PreventScroll = true,
    });

    var result = await dialog.Result;
    if (!result.Cancelled && result.Data is Person updatedPerson)
    {
        // 替换集合中的原对象（利用record的PersonId唯一标识）
        people = people.Where(p => p.PersonId != person.PersonId)
                       .Append(updatedPerson)
                       .AsQueryable();
        ToastService.ShowSuccess("Person updated");
    }
}

3. 其他小问题修正 #

• 统一修正命名空间拼写错误：FleuntBlazorWebApp改为FluentBlazorWebApp（代码中多处出现）。
• 优化DeletePerson方法的判断逻辑（用PersonId更可靠）：

void DeletePerson(Person person)
{
    people = people.Where(p => p.PersonId != person.PersonId).AsQueryable();
    ToastService.ShowSuccess("Person deleted");
}

关键说明 #

• Blazor组件参数必须是带get/set的属性，字段无法被框架识别为可传递参数。
• Record类型是不可变的，编辑时需创建新实例并替换原集合中的元素，否则UI不会更新。
• Fluent UI Dialog需要显式添加FluentDialogActions放置操作按钮，否则无法触发保存/取消逻辑。

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