问题标签 [blazor-component]

我有一个top-rowdiv 如下：

我将有几个组件通过单击按钮MenuBar在 div 类中交换出来。如何使用 Blazor 组件定位该 div？menu

更新
我想我找到了Chris Sainty的解决方案。

编辑
澄清我打算完成什么：

我有 2 个组件：

• <MenuBar1 />
• <MenuBar2 />

两者都包含不同的 html 来构造一个简单的菜单栏。我有导航链接，点击后会引发onClick事件。

单击链接时，如何换出MenuBar组件？

I had no idea how to phrase a good title here.

I'm basically trying to use the open-closed principle, so I don't need to specify precisely which component to render, but just use an interface/abstract class instead.

I'm making a node editor. I have a List of NodeModelBases, to hold the data for each node, and for each of these, I want to insert a corresponding NodeComponent to be rendered. Currently:

The idea is that NodeModelBase is inherited by specific types of Nodes, so I could have a "StartNode : NodeModelBase", "DelayNode : NodeModelBase" , etc., i.e. sub-classes of NodeModelBase. I may potentially have 20 or more sub-classes, and I would like to not update the above for-loop for each new added node type.

I then want to render their respective component. Currently, I have a Blazor component called NodeBase, which I just insert, because I only have one node type so far. But I would like to be able to do something like: node.GetHTML() and insert this instead.

I could have a long if-else to check which sub-class of NodeModelBase I have, and then insert the correct component, something like:

But that's pretty inconvenient.

I know this can be done programmatically by using the RenderTreeBuilder, and making calls like builder.OpenElement(...), or builder.AddAttribute(...), so the result would look something like:

But being a html/blazor novice, I would much prefer to be able to define the html/razor syntax normally, and somehow return/insert that.

So, any suggestions on how to be flexible about which component is inserted?

我是 blazor 的新手，仍在学习，我的仪表板有一个状态问题。

我有一个组件可以获取仪表板和面板：

它通过 OnParametersSetAsync 获取数据并且工作正常，它获取新面板并呈现它们

但是当我切换到另一个仪表板时，前一个仪表板的相同值仍然存在于“DashboardMatereChartJs”中。

如果仪表板之间的面板数量不同，它将呈现新面板。

我将 panelId 级联给孩子，这样 blazor 就会明白它需要更改状态。

仪表板材料：

DashboardMatereChartJs：

DashboardHeader 将始终具有正确的数据

问题似乎是当 PanelId 更改时组件不会调用 OnInitializedAsync 。我认为这是一个结构问题，因为我试图通过@ref 强制 statehaschanged 并从父级调用 StateHasChanged，但仍然不起作用。

如果我通过“DashboardMatareChartJs”上的 OnParametersSetAsync 获取数据，那么它将加载新数据，但它会多次加载它并且对于仍在视图中的面板。我知道这意味着我可能还没有 100% 了解 blazor 的生命周期，所以希望有人能把我推向正确的方向。

提前致谢！

我正在从列表中选择项目，并显示它们的不同内容。它可以正常使用此代码：

在 Item 组件中，我正在使用其他组件并作为参数 Item 本身传递，例如： <ItemHistory ItemModel="@Item"/> 但是 ItemHIstory 组件在选择不同的项目时不会刷新。始终显示第一个选定项目的历史记录。

问题出在哪里？

随着新的 .NET 5 预览 CSS 隔离出现在 blazor 中。有人知道，是否可以在 blazor 服务器中使用 CSS 隔离？

我玩了很多，但在我的 blazor 服务器应用程序中，CSS 隔离不起作用。还是此功能仅在 blazor WebAssembly 中可用？

所以我试了一下：

• 创建一个新的 blazor 组件，例如 test.razor
• 创建名为 test.razor.css 的组件 CSS 文件并在此文件中编写 CSS 代码
• 现在启动 blazor-server 应用程序，但不会添加静态 CSS 文件并且找不到 CSS 类。

TargetFramework 是“net5.0”。安装的 dotnet 版本是“5.0.100-rc.2.20479.15”。

问候丹尼尔

I need to display validation messages if a nested-component is not properly filled in. The component is consumed by other parent-components and they need to get feedback on whether there are validation issues.

I have tried the following code for the nested-component and used the CanSubmit method. While the method correctly tells if there are validation problems the validation messages are not showing.

All the code below can be tested on blzorrepl: https://blazorrepl.com/repl/GvOQlvvv1789ra1G37

This is my parent-component code, a bit reduced but reproducing the problem:

The testMessage is only used to show the validation status.

What can I do to make parent-component cause the nested-component to show validation messages? I can only place the submit in the parent-component.

As it was requested, here is a more complete example of what I am doing, a list of items which can be edited inline as well as a form to add more instances. https://blazorrepl.com/repl/mlYwlQPm34bekYE824

当我NavLink在 Blazor 服务器应用程序中使用 a 时，它会呈现为<a>. 我想得到一个包含它的列表项，例如<li><a>.

我还想尽可能地利用NavLink（例如跟踪活动网址）的默认行为。

我尝试了一些简单的东西，比如

但是，当我尝试这个

<ListItemNavLink ListItemCssClass="sidebar-item" class="sidebar-link" href="x">

我明白了。

<li><a listitemcssclass="sidebar-item" href="x" class="sidebar-link">

这不正是我想要的。我想得到这样的东西（请注意应用的 ACTIVE 类状态）：

有什么提示吗？谢谢

我发现了 Chris Sainty 的这篇很棒的帖子：从零开始为 Blazor 创建定制输入组件。这正是我需要的，但不是用string，而是用上传的文件IBrowserFile。所以我已经为我调整和扩展了这个例子。自定义组件显示新文件并将其保存在我的模型中，但在 CSS 中，不幸的是状态保持在class="modified invalid". 我必须在这里遗漏一个小细节。它是什么？提前感谢您的任何提示。

这是我的代码简化为基本要素。

选择.razor

选择测试模型.cs

文档模型

DocumentComponent.razor

它在浏览器中的行为如何（Chrome）

加载页面后，一切看起来都符合预期。

之后我上传一个文件。所以我有一个文件，我希望有两个。验证变为红色，我得到“修改无效”。到目前为止一切都很好。

最后我将另一个文件拖到组件中并得到两个文件。我也可以在模型中看到这一点。但不幸的是，没有设置类属性“修改有效”。

再次感谢您的任何建议

我的数据表组件：

当我将 paginateButton 发送到方法时，出现错误：

“DataTablesBlazorVersion.Components.DataTables.PaginateButton”没有与名称“onclick”匹配的属性。

我正在尝试将我的 Blazor Server 项目拆分为组件，以使其更易于管理。

我希望我的组件有一个作为参数传入的函数。该函数接受一个字符串参数，并在单击按钮时使用与组件不同的名称调用它。

我尝试了一些我在网上找到的答案，但它们似乎不起作用（如绑定事件）

代码

我有一个名为的组件ItemMenu.razor和我的 index page Index.razor。

ItemMenu.razor：

Index.razor：

错误

第 3 行Index.html抛出错误No overload for 'ShowName' matches delegate 'Action'

解决方案

原来我只需要将我的变量重命名为OnClick而不是OnClickFunction...

好的@enet 指出变量名不是问题。在 blazor 中，我们应该使用 EventCallback 而不是 Action。

原来在我的案例中真正的问题是 Visual Studio，因为我之前在查看其他答案时发现了这个解决方案。VS 决定在这一行显示一个错误，即使它编译并运行良好......