Blazor Fluent UI 不存在 LayerHost 的下拉问题

Question

我正在处理我的第一个 Blazor 客户端项目，我正在使用 Blazor Fluent UI 组件包。目前，我正在我的页面中添加下拉组件，但是当我运行项目并单击下拉组件时，出现错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: LayerHost is not present. You need to add a LayerHost near the root of the app. System.Exception: LayerHost is not present. You need to add a LayerHost near the root of the app. at BlazorFluentUI.BFULayer.OnParametersSetAsync() at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

我正在根据此代码示例创建我的下拉组件：

<BFUDropdown ItemsSource=@items
                Placeholder="Select an option"
                OnChange=@UncontrolledSingleChangeHandler
                Label=@($"Selected: {uncontrolledSingleSelectionResult?.Text}")
                Style="width:300px;" />
@code {


   IBFUDropdownOption uncontrolledSingleSelectionResult;
   IEnumerable<IBFUDropdownOption> uncontrolledMultiSelectionResult = new List<IBFUDropdownOption>();

   IBFUDropdownOption controlledSingleSelectionResult;
   IEnumerable<IBFUDropdownOption> controlledMultiSelectionResult;

   List<IBFUDropdownOption> items;

   protected override Task OnInitializedAsync()
   {
       items = new List<DataItem> {
           new DataItem("Fruits", SelectableOptionMenuItemType.Header),
           new DataItem("Apple"),
           new DataItem("Banana"),
           new DataItem("Orange"),
           new DataItem("Grape"),
           new DataItem("divider1", SelectableOptionMenuItemType.Divider),
           new DataItem("Vegetables", SelectableOptionMenuItemType.Header),
           new DataItem("Broccoli"),
           new DataItem("Carrot"),
           new DataItem("Lettuce")
       }.Select(x => new BFUDropdownOption { Key = x.Key, Text = x.DisplayName, ItemType = x.Type }).Cast<IBFUDropdownOption>().ToList();

       controlledSingleSelectionResult = items.First(x => x.Key == "Banana");

       controlledMultiSelectionResult = items.Where(x => x.Key == "Banana" || x.Key == "Orange");

       return base.OnInitializedAsync();
   }

   void UncontrolledSingleChangeHandler(BFUDropdownChangeArgs args)
   {
       uncontrolledSingleSelectionResult = args.Option;
   }

   void UncontrolledMultiChangeHandler(BFUDropdownChangeArgs args)
   {
       if (args.IsAdded)
           uncontrolledMultiSelectionResult = uncontrolledMultiSelectionResult.Append(args.Option);
       else
           uncontrolledMultiSelectionResult = uncontrolledMultiSelectionResult.Where(x=> x != args.Option);
   }


   ExampleModel exampleModel = new ExampleModel();

   class ExampleModel
   {
       [Required]
       public IBFUDropdownOption SelectionResult { get; set; }
   }

   public void HandleValidSubmit()
   {
       var i = 3;
   }


}

示例的 link 是：https://www.blazorfluentui.net/dropdownPage

我在 App.razor 页面中找到了 LayerHost 组件，但即使在添加它之后我也遇到了同样的异常。

这是我的 App.razor 页面的代码：

<BFUTheme>
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @if (!context.User.Identity.IsAuthenticated)
                        {
                            <RedirectToLogin />
                        }
                        else
                        {
                            <p>You are not authorized to access this resource.</p>
                        }
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
        <BFULayerHost>
        </BFULayerHost>
    </CascadingAuthenticationState>
</BFUTheme>

如何让下拉组件使用 BFULayerHost？

Answer 1

有同样的问题，通过在BFULayerHost里面放解决它：

    <BFULayerHost>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    ...
    </Router>
    </BFULayerHost>

Blazor Fluent UI 不存在 LayerHost 的下拉问题

Blazor Fluent UI Dropdown issue with LayerHost is not present

c#

blazor-client-side