Render Blazor components from JavaScript:Set childContent Parameter

abdollahkahne commented 2 years ago

Is there an existing issue for this?

[x] I have searched the existing issues

Describe the bug

I am using Blazor Web Assembly in .Net 6 and I want to Render a component from JavaScript. The Component requires a ChildContent (RenderFragment class in .Net) but when I try to pass it using the following expression it gives me an error. I tried both string and lambda function but it give me error in both case.

var dialogElem=document.getElementById("dialog");
Blazor.rootComponents.add(dialogElem,"dialog",{title:"Title of Dialog",childContent:`Test sample`});

The question I have here is how I can set Render Fragment Parameter from JavaScript?

Expected Behavior

No response

Steps To Reproduce

1- Create A Blazor WAsm using default template 2- Create a simple component like below as Dialog.razor

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>
@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
        @* This is added to wasm console which is equal to browser console! *@
    }
}

3- Change Index.html file to load component from JavaScript as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWebAssemblySignalRApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorWebAssemblySignalRApp.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div>
        <div id="dialog">Here we add Dialog component using click</div>
        <button onclick="addDialog()">Add Dialog</button>
    </div>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        function addDialog() {
            var dialogElem=document.getElementById("dialog");
            Blazor.rootComponents.add(dialogElem,"dialog",{title:"Title of Dialog",childContent:"This is a sample node"});
        }
    </script>
</body>
</html>

4- Enable Rendering components from JavaScript by adding the following line to Startup/Program builder.RootComponents.RegisterForJavaScript<Dialog>("dialog");

Exceptions (if any)

No response

.NET Version

6.0.101

Anything else?

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

abdollahkahne commented 2 years ago

Apparently this is also the case with Component Tag Helper in razor page/view according to following paragraph. So here we can use the same guideline (Prerendering in WebAssembly).

The Component Tag Helper doesn't support receiving a RenderFragment delegate for child content (for example, param-ChildContent="..."). We recommend creating a Razor component (.razor) that references the component you want to render with the child content you want to pass and then invoke the Razor component from the page or view.

ghost commented 11 months ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

dotnet / aspnetcore