Blazor Server应用中实现Fluent UI数字面板对话框并正确返回输入值的问题

我完全理解你的困扰——做触摸面板的数字输入时，好不容易搭好了Fluent UI的数字面板对话框，结果点击OK拿不到用户输入的值，确实挺让人头疼的。问题的根源其实是你虽然实现了IDialogContentComponent<string>接口，但没有处理对话框主按钮（OK）的回调逻辑，导致默认情况下对话框不会把你的面板输入值作为结果返回。

下面是具体的解决方案，分两步修改：

1. 完善数字面板组件（NumPadPanel.razor）的对话框回调逻辑 #

你需要在NumPadPanel中实现IDialogContentComponent<string>接口要求的主/次要按钮回调方法，主动把当前输入的Content值作为对话框结果返回。修改后的完整代码如下：

@implements IDialogContentComponent<string>
<FluentDialogBody>
    <FluentTextField ReadOnly="true" Style="width: 250px" @bind-Value="Content" /><br />
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 1))">1</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 2))">2</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 3))">3</FluentButton><br />
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 4))">4</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 5))">5</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 6))">6</FluentButton><br />
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 7))">7</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 8))">8</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 9))">9</FluentButton><br />
    <FluentButton Class="num-pad-btn" @onclick="ClearInput">Clear</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="@((e) => AddDigit(e, 0))">0</FluentButton>
    <FluentButton Class="num-pad-btn" @onclick="Backspace">Backspace</FluentButton><br />
</FluentDialogBody>

@code {
    [Parameter]
    public string Content { get; set; } = string.Empty;

    public void AddDigit(MouseEventArgs e, int digit)
    {
        Content += digit.ToString();
        StateHasChanged();
    }

    public void ClearInput()
    {
        Content = string.Empty;
    }

    public void Backspace()
    {
        if (Content.Length > 0)
        {
            Content = Content.Substring(0, Content.Length - 1);
        }
    }

    // 新增：处理OK按钮点击，返回当前输入的内容
    public Task<DialogResult> OnPrimaryActionAsync()
    {
        return Task.FromResult(DialogResult.Ok(Content));
    }

    // 新增：处理Cancel按钮点击，返回取消结果
    public Task<DialogResult> OnSecondaryActionAsync()
    {
        return Task.FromResult(DialogResult.Cancel());
    }
}

核心变化是添加了两个接口要求的回调方法：

• 点击OK时，通过DialogResult.Ok(Content)把当前输入的数字字符串作为结果返回
• 点击Cancel时，返回取消状态，和你的原有逻辑保持一致

2. 优化宿主组件的输入框（可选但推荐） #

为了彻底避免弹出系统软键盘，建议你把宿主组件中的FluentTextField设置为ReadOnly="true"，这样点击输入框时只会触发打开对话框的事件，不会唤起系统软键盘：

<FluentTextField Label="kW Command" Appearance="FluentInputAppearance.Outline" Value="@RealPowerCmd" Style="width: 75px" @onclick="OpenDialogRealPower" ReadOnly="true" />

测试验证 #

修改完成后，当你在数字面板输入内容并点击OK，宿主组件中的result.Data就能正确拿到用户输入的字符串，最终赋值给RealPowerCmd并更新UI了。

内容来源于stack exchange