如何关闭 Fluent UI 面板？

Question

我有 3 个 Blazor 组件：1 个只有一个用于标记的按钮，但它会打开一个 Microsoft FLuent UI 对话框，该对话框将一个组件 (ChecklistItemDialogue) 作为参数，如果 checklistItemDialogue 内部有 2 个组件（ChecklistItemPanel 和 Newchecklistitem）。我想做的只是在 ChecklistItempanel 内部调用 SubmitItems 方法后关闭模型。我希望模型在触发时关闭。此外，我想找到一种方法来访问 selectedItemTemplates 并将它们向上传递几层以在请求成功后更新 UI

我无法根据 FLuent Ui Blazor 网站上的文档找到正确执行此操作的解决方案，这里是组件的代码：

打开检查清单项目面板：

@using SFSCheckList.Data.Repos
@using SFSCheckList.Data.Models


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


@code {
    [Parameter]
    public EventCallback SubmitItems { get; set; }

    [Parameter]
    public Checklist? Checklist { get; set; }

    [Inject] private IDialogService DialogService { get; set; }

    private IDialogReference _dialog;

    public string width { get; set; } = "*";
    private async void LogDetails(Checklist checklist)
    {
        Console.WriteLine("Details on the panel button !!!!");
        Console.WriteLine($"Checklist ID: {checklist.PK_ChecklistID}");
        Console.WriteLine($"Checklist Name: {checklist.ChecklistName}");
        Console.WriteLine($"Checklist Description: {checklist.ChecklistDescription}");
        Console.WriteLine($"Start Date: {checklist.AvailableStartDate}");
        Console.WriteLine($"End Date: {checklist.AvailableEndDate}");
        Console.WriteLine($"FY: {checklist.FY}");
        Console.WriteLine($"Created: {checklist.LCTS}");
        await OpenPanelAsync();
    }

    private async Task OpenPanelAsync()
    {
        Console.WriteLine(Checklist.PK_ChecklistID.ToString());
        _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;
        HandlePanel(result);
    }



    private async Task HandlePanel(DialogResult result)
    {
        if (result.Cancelled)
        {
            Console.WriteLine("Panel cancelled" );

        }
        else
        {
            var selectedTemplates = result.Data as List<ChecklistItemTemplate>;
            if (selectedTemplates != null)
            {
                Console.WriteLine("Items submitted:");
                foreach (var template in selectedTemplates)
                {
                    await Task.Run(() => Console.WriteLine($"- {template.ItemName}: {template.ItemDesc} the itemsmsss"));
                }

                // Handle the selected templates as needed
            }
        }
    }

    private void HandleWidthChanged(string newWidth)
    {
        width = newWidth;
        Console.WriteLine("clicked onnnnn");
    }

    public EventCallback OnItemAdded { get; set; }
}

清单项目对话：

@implements IDialogContentComponent<string>

<div>
    <FluentStack Orientation="Orientation.Horizontal">
        <ChecklistItemPanel ChecklistId="@Content" />
        @if (isPanelOpen)
        {
            <NewCheckListItem ChecklistId="@Content"/>

        }
    </FluentStack>
    <FluentButton OnClick="@(() => isPanelOpen = !isPanelOpen)">Open new panel </FluentButton>

</div>

@code {



    [Parameter]
    public EventCallback SubmitItemTemplate { get; set; }


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

    private bool isPanelOpen = false;
    protected override async Task OnParametersSetAsync()
    {
        // Logging to verify the content
        Console.WriteLine($"Content: {Content}");
    }

}

清单项目面板：

 @using SFSCheckList.Data.Repos
@using SFSCheckList.Data.Models 


<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>
@* <FluentButton @onclick="@OpenPanelAsync" Appearance="Appearance.Accent">
    Open panel (&gt;&gt;)
</FluentButton> *@

<style>
    .checklist-item {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        width: 20rem;
        cursor: pointer;
        border-radius: 5px;
        list-style-type: none;
        background-color: white;
    }

        .checklist-item:hover {
            background-color: lightgrey;
        }
</style>


@code {
   

    [Inject] private IDialogService DialogService { get; set; }

    private CheckListItemList itemList = null;


    public class ChecklistItemDialogParameters
    {
        public string ChecklistId { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public IDialogReference Dialog { get; set; }
    }

 

    [Parameter]
    public ChecklistItemDialogParameters Parameters { get; set; }

    [Parameter]
    public string ChecklistId { get; set; }
    public List<SFSCheckList.Data.Models.ChecklistItemTemplate>? SelectedItemTemplates { get; set; } = null;
    [Parameter]
    public string Width { get; set; } = "20vw";

    [Parameter] public EventCallback<ChecklistItemTemplate> TemplateSelected { get; set; }

    [Inject]
    protected ChecklistRepo? checklistRepo { get; set; }

    private IDialogReference _dialog;

    public string width { get; set; } = "20vw";
    public string height { get; set; } = "100vh";
    private DateTime startDate { get; set; } = new DateTime(2024, 6, 1);
    private DateTime endDate { get; set; } = new DateTime(2024, 6, 30);

    List<SFSCheckList.Data.Models.ChecklistItemTemplate> ChecklistItemTemplates = new List<SFSCheckList.Data.Models.ChecklistItemTemplate>();

    private async Task getTemplates()
    {
        ChecklistItemTemplates = await checklistRepo.GetItemTemplates();
        foreach (var template in ChecklistItemTemplates)
        {
            Console.WriteLine(template.ItemName);
        }
    }



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

        foreach (var template in SelectedItemTemplates)
        {
            await checklistRepo.CreateItemFromTemplate(template, Guid.Parse(ChecklistId), startDate, endDate);
        }

    }


    private async Task AddChecklistItem(ChecklistItemTemplate template)
    {
        await TemplateSelected.InvokeAsync(template);
        SelectedItemTemplates.Add(template);
        Console.WriteLine("template" + template.ItemName);

    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await getTemplates();
        SelectedItemTemplates = new List<SFSCheckList.Data.Models.ChecklistItemTemplate>(); // Initialize here

    }
  
}

Answer 1

对话框内容组件：

@implements IDialogContentComponent<MenuState>
 ...
<FluentDialogFooter Style="width: 100%;">
    <FluentButton OnClick="@Close">Close</FluentButton>
...
</FluentDialogFooter>

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

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

    private string? currentUrl;
}