Blazor中Fluent UI面板关闭与选中模板数据传递问题

一、实现Submit时关闭对话框 #

要让ChecklistItemPanel的SubmitItems方法触发对话框关闭，需借助对话框内容组件（ChecklistItemDialogue）的DialogInstance调用关闭方法，步骤如下：

1. 修改ChecklistItemDialogue组件 #

该组件实现了IDialogContentComponent<string>，可直接访问DialogInstance。添加接收选中模板的回调并传递给ChecklistItemPanel：

@implements IDialogContentComponent<string>
@inject IDialogService DialogService

<div>
    <FluentStack Orientation="Orientation.Horizontal">
        <!-- 传递提交回调给子组件 -->
        <ChecklistItemPanel 
            ChecklistId="@Content" 
            OnSubmit="@HandleSubmit" />
        @if (isPanelOpen)
        {
            <NewCheckListItem ChecklistId="@Content"/>
        }
    </FluentStack>
    <FluentButton OnClick="@(() => isPanelOpen = !isPanelOpen)">Open new panel </FluentButton>
</div>

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

    private bool isPanelOpen = false;

    // 接收ChecklistItemPanel的提交事件，关闭对话框并返回数据
    private async Task HandleSubmit(List<ChecklistItemTemplate> selectedTemplates)
    {
        await DialogInstance.CloseAsync(DialogResult.Ok(selectedTemplates));
    }

    // 注入对话框实例，用于关闭操作
    [CascadingParameter]
    public IDialogInstance DialogInstance { get; set; } = default!;
}

2. 修改ChecklistItemPanel组件 #

添加OnSubmit回调，在SubmitItems方法中调用该回调传递选中模板：

<FluentStack Orientation="Orientation.Vertical">
    <h3>Add Checklist Item</h3>
    <SelectecChecklistItemTemplates SelectedItemTemplates="SelectedItemTemplates" />
    @foreach (var template in ChecklistItemTemplates)
    {
        <FluentCard Width="20rem" >
            <FluentLabel>@template.ItemName</FluentLabel>
            <FluentLabel>@template.ItemDesc</FluentLabel>
            <FluentButton @onclick="@(() => AddChecklistItem(template))">+</FluentButton>
        </FluentCard>
    }
    <FluentDatePicker Value="startDate" ValueChanged="@(e => startDate = e.Value)" Placeholder="Select Start Date" />
    <FluentDatePicker Value="endDate" ValueChanged="@(e => endDate = e.Value)" Placeholder="Select End Date" />
    <FluentButton @onclick="SubmitItems">Submit</FluentButton>
</FluentStack>

@code {
    [Parameter]
    public string ChecklistId { get; set; }
    public List<ChecklistItemTemplate>? SelectedItemTemplates { get; set; } = null;
    [Parameter] public EventCallback<ChecklistItemTemplate> TemplateSelected { get; set; }
    [Inject] protected ChecklistRepo? checklistRepo { get; set; }
    private DateTime startDate { get; set; } = new DateTime(2024, 6, 1);
    private DateTime endDate { get; set; } = new DateTime(2024, 6, 30);
    List<ChecklistItemTemplate> ChecklistItemTemplates = new List<ChecklistItemTemplate>();

    // 定义提交回调，用于向上传递数据
    [Parameter]
    public EventCallback<List<ChecklistItemTemplate>> OnSubmit { get; set; }

    private async Task SubmitItems()
    {
        if (SelectedItemTemplates == null || !SelectedItemTemplates.Any())
        {
            Console.WriteLine("No templates selected.");
            return;
        }

        // 调用API创建项
        foreach (var template in SelectedItemTemplates)
        {
            await checklistRepo.CreateItemFromTemplate(template, Guid.Parse(ChecklistId), startDate, endDate);
        }

        // 触发回调，传递选中模板并触发关闭
        await OnSubmit.InvokeAsync(SelectedItemTemplates);
    }

    // 其他原有方法保持不变
}

二、传递SelectedItemTemplates并更新UI #

在OpenChecklistItemPanel中通过对话框返回结果获取选中模板，然后触发回调更新UI：

修改OpenChecklistItemPanel组件 #

<FluentButton @onclick="() => LogDetails(Checklist)" Appearance="Appearance.Accent">
   Add checklist item 
</FluentButton>

@code {
    [Parameter]
    public Checklist? Checklist { get; set; }
    [Inject] private IDialogService DialogService { get; set; }
    private IDialogReference _dialog;
    public string width { get; set; } = "*";

    // 通知父组件更新UI的回调
    [Parameter]
    public EventCallback OnItemAdded { get; set; }

    private async void LogDetails(Checklist checklist)
    {
        // 原有日志代码...
        await OpenPanelAsync();
    }

    private async Task OpenPanelAsync()
    {
        _dialog = await DialogService.ShowPanelAsync<ChecklistItemDialogue>(Checklist.PK_ChecklistID.ToString(),
            new DialogParameters<string>
            {
                Alignment = HorizontalAlignment.Right,
                Title = "Simple Form",
                ShowDismiss = true,
                Width = width,
            });

        DialogResult result = await _dialog.Result;
        await HandlePanel(result);
    }

    private async Task HandlePanel(DialogResult result)
    {
        if (!result.Cancelled)
        {
            var selectedTemplates = result.Data as List<ChecklistItemTemplate>;
            if (selectedTemplates != null)
            {
                // 日志输出选中模板...
                // 触发父组件更新UI
                await OnItemAdded.InvokeAsync();
            }
        }
    }

    // 其他原有方法保持不变
}

关键说明 #

1. 对话框关闭：通过IDialogInstance.CloseAsync方法，在接收提交事件后关闭对话框并携带数据。
2. 数据传递：通过层层定义EventCallback，将选中模板从ChecklistItemPanel传递到ChecklistItemDialogue，再通过DialogResult传递到OpenChecklistItemPanel。
3. UI更新：OpenChecklistItemPanel的OnItemAdded回调需由父组件实现，在回调中重新加载数据完成UI刷新。

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