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

Question

I'm developing a webapp built in C# with Blazor WASM that is Asp.Net hosted. I'm making a blazor component that through the use of a library already in production, will generate a HTML fragment (or full embed) that is then displayed in this way

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

with document containing the markup generated by the library.

As long as we're doing it with static content all is fine and dandy, but now we need to have some input in there that will then be sent back to the server to execute some actions.

In a MarkupString there is no way to include <InputFile /> or <InputText /> components in such a way that they are shown in the fragment and I can read their contents, and I can find no way to actually interact with the standard HTML tags, especially regarding the file upload.

Moreover we'll probably soon need to have a specific image uploader with preview which would be a custom Blazor component and this led me to the CustomElements .NET 7 feature that looks like what I need for both problems.

However I couldn't find how to actually implement this in my app, and the documentation I found is still very partial in that way. Is there a way to do what I need?

EDIT: Managed to fix this partially, with Chen's answer. I still have trouble with the binding though, as the @bind-Value directive is not working with

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

with this markup:

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

(the capital V in bind-Value becomes lowercase all by itself)

Am I doing something wrong again?

Answer 1

CustomElements should meet your requirements, you can create your own logic in Blazor components, and then use it in your application.

To use the component, you need to add the following JavaScript script references to your host app in this specific order.

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

You also need to add the corresponding middleware:

app.UseBlazorFrameworkFiles();

And use app.UseWebAssemblyDebugging(); for debugging.

Then you need to register the corresponding component in the Blazor program:

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

Then you can call this component in your application, including passing parameters, etc.

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

Here is a complete example with detailed explanation , you can use it as a reference.

Helpful links:

Blazor Custom Elements .

Using .NET 7's Blazor Custom Elements to render dynamic content .

ASP.NET Core Razor components .

Hope this can help you.