c# - 不存在 LayerHost 的 Blazor Fluent UI 下拉问题
问题描述
我正在处理我的第一个 Blazor 客户端项目,并且正在使用 Blazor Fluent UI 包作为组件。目前我正在我的页面中添加下拉组件,但是当我运行项目并单击下拉组件时,我收到一个错误:
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件:LayerHost 不存在。您需要在应用的根目录附近添加一个 LayerHost。System.Exception:LayerHost 不存在。您需要在应用的根目录附近添加一个 LayerHost。在 BlazorFluentUI.BFULayer.OnParametersSetAsync() 在 Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() 在 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;
}
}
该示例的链接是: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>
如何告诉 Dropdown 组件使用 BFULayerHost ?
解决方案
有同样的问题,通过将 BFULayerHost 放在里面来解决它:
<BFULayerHost>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
...
</Router>
</BFULayerHost>
推荐阅读
- firebase - 我可以为多个用户使用一个 Firebase 身份验证帐户吗?
- javascript - 我应该在哪里存储自动登录 chrome 扩展的密码?
- aws-cdk - 有没有办法动态设置 CDK Stage env 帐户?
- php - Laravel 关系中的记录数
- ruby-on-rails - Ruby:已弃用:如果期望 nil,请使用 assert_nil。这将在 Minitest 6 中失败
- amazon-web-services - AWS TimeStream:超过一天的记录被拒绝
- r - 我应该如何创建具有其他变量条件的新变量?
- jss - JSS - 如何根据 body 元素上的类名创建规则?
- json - 用于在网站上共享办公室详细信息的基于标准的文件格式
- typo3 - tx-news 忽略 gridelement 中的所有 flexform 设置