Jure Fadiga
Jure Fadiga

Reputation: 185

Blazor Fluent UI Dropdown issue with LayerHost is not present

I am working on my first Blazor client-side project and I am using the Blazor Fluent UI packages for components. Currently I am adding Dropdown components in my page but when I run the project and click on the dropdown component I get an error:

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()

I am creating my Dropdown component based on this code example:

<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;
   }


}

the link for the example is: https://www.blazorfluentui.net/dropdownPage

I have found the LayerHost component inside the App.razor page but even after adding it I get the same exception.

This is my code for my App.razor page:

<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>

How do I tell the Dropdown component to use the BFULayerHost ?

Upvotes: 0

Views: 819

Answers (1)

david laporte
david laporte

Reputation: 436

Had the same problem, solve it by putting the inside the BFULayerHost :

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

Upvotes: 1

Related Questions