Blazor 应用程序中的动态自定义元素

Question

我正在开发一个内置于 C# 和 Blazor WASM 的 webapp，它是 Asp.Net 托管的。 我正在制作一个 blazor 组件，通过使用已经在生产中的库，将生成一个 HTML 片段（或完全嵌入），然后以这种方式显示

...
    <div>
        @((MarkupString)document)
    </div>
...

带有包含库生成的标记的document 。

只要我们使用 static 内容进行操作，一切都很好，但现在我们需要在其中输入一些内容，然后将其发送回服务器以执行一些操作。

在MarkupString中，无法以在片段中显示的方式包含<InputFile />或<InputText />组件，我可以读取它们的内容，而且我找不到与标准 HTML 实际交互的方法标签，尤其是关于文件上传。

此外，我们可能很快就需要一个带有预览的特定图像上传器，它是一个自定义的 Blazor 组件，这让我想到了 CustomElements .NET 7 功能，它看起来像我需要的两个问题。

但是我找不到如何在我的应用程序中实际实现它，而且我找到的文档在这方面仍然非常片面。 有没有办法做我需要的？

编辑：通过 Chen 的回答设法部分解决了这个问题。 不过，我在绑定方面仍然遇到问题，因为@bind-Value指令不适用于

Unhandled exception rendering component: Microsoft.AspNetCore.Components.Forms.InputText requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.

使用此标记：

...
<custom-input-text @bind-value="$field1" name="$field1"></custom-input-text>
...

（bind-Value 中的大写 V 全部变成小写）

我是不是又做错了什么？

Answer 1

CustomElements应该满足您的要求，您可以在 Blazor 组件中创建自己的逻辑，然后在您的应用程序中使用它。

要使用该组件，您需要按此特定顺序将以下 JavaScript 脚本引用添加到您的主机应用程序。

<script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

还需要添加相应的中间件：

app.UseBlazorFrameworkFiles();

并使用app.UseWebAssemblyDebugging(); 用于调试。

然后需要在Blazor程序中注册相应的组件：

builder.RootComponents.RegisterCustomElement<Counter>("my-counter");

然后你就可以在你的应用中调用这个组件了，包括传递参数等等。

<my-counter title="Khalid" increment-amount="2" />

这里有一个 完整的示例，并有详细的解释，您可以将其作为参考。

有用的网址：

Blazor 自定义元素。

使用 .NET 7 的 Blazor 自定义元素呈现动态内容。

ASP.NET 核心 Razor 组件。

希望这可以帮到你。