Reputation: 185
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
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