Blazor - ability to insert a component dynamically and have it draw itself

[LaughingJohn]

One frustration I have had is in the use of RenderFragment. This is related to the polymorphic lists you are looking at.

What I wanted to be able to do is have component at the very top level (app) which can render other components (in my case dialogs). I've found this very cumbersome to achieve.

My aim was to be able to replicate MessageBox as per WPF/Winforms/Silverlight (and other shared dialogs) and be able to create one in code and display it from any other component without having to add it to the markup of every component that uses it.

Ideally I want to have a parent component into which I can pass other child components which I have "newed up" and filled in the parameters in code. I then want the base component to be able to add that to its render tree and have the child component render itself (which it already knows how to do because of razor). Crucially I want the component in the render tree to be a reference to the one that I pass in and not a copy.

It's quite hard to explain what I've come up with for dialogs, but essentially I have to define a dialog, and then also create a method to render the dialog. I have a top level dialog manager and via a couple of service classes I pass in the Render method to get it to display the dialog. It's better than nothing but pretty naff.

I've attached my attempt at a solution - some of the complexity may be down to my misunderstanding, but any help gratefully received!

Thanks.
TestDialogManager.zip

[SteveSandersonMS]

We can certainly add a DynamicComponent component to the core framework, supporting usage like this:

<DynamicComponent ComponentType="@myType" Parameters="@myParams" />

@code {
    Type myType = ...;
    IDictionary<string, object> myParams = ...;
}

Plenty of people have asked for this. It seems totally reasonable.

Crucially I want the component in the render tree to be a reference to the one that I pass in and not a copy.

Unfortunately that won't fit within the model here. If we did this, it would break a whole load of guarantees about component lifecycles. Today, we know for sure that the framework uses each component instance in exactly one place, calls its lifecycle methods at a predictable stage during rendering, and that it knows it can dispose that instance once it gets removed from the render output. We also know for sure the semantics of @ref and the fact that references will be populated at a specific time when the component is now within the render output. All these guarantees would be lost if the framework gave up control over instantiating and disposing component instances.

Instead, if your goal is to use procedural logic to configure complex parameters for a child component, then to factor that out into some data class and pass an instance of that to the child component as config. Does that seem reasonable for your use case?

[julienGrd]

@LaughingJohn I'm not sure if i totally understand but i have this kind of behavior in my app : ability to launch modal everywhere in c# code

I give you the really simple version, my architecture is more complex but the main idea is here

You need to have :

• 1 service (injected where you need) of type suscriber/receiver which allow a component to receive message of some type and other components/services/etc to send message of same type
• For your message you create a class which take at least a RenderFragment,
• when somponents/services need to launch modal, they send a message with the service, you can send fragment representing your modal component by this kind of way

public RenderFragment ModalFragment
        {
            get
            {
                return builder =>
                {
                    builder.OpenComponent<MyModalComponent>(0);
                    var idx = 1;
                    //if you need pass parameter
                    //builder.AddAttribute(idx, "ModalTemplateModel", this);
                    builder.CloseComponent();
                };
            }
        }

• Your MyModal Component is for example a bootstrap modal (better to make a modal component generic and call this component in all your modal components)

<div class="modal fade" id="@ModalTemplateModel.Id" tabindex="0" @onkeyup="@OnKeyDown">
    <div class="modal-dialog @(CssClass ?? "") @(ModalTemplateModel.IsPopover ? "geckos-popover" : ModalTemplateModel.Size.GetDescription())" style="@Style" role="document">
        <div class="modal-content">
            <div class="modal-header">
...

And finally, somewhere (me i put this in a ModalContainerComponent rendered by the layout),

• suscribe to new message, when received add the message in a list and call StateHasChanged
• on the view of your component, iterate over the messages to render the renderFragment
• on my side i have a js interop to openModal in js (but maybe you will not need)
• you will have to suscribe when your modals are closed to remove them from the list

I personnaly put a real architecture behind this to drive my modal as i want, i personnalize title, size, button, and declare only the body in my child component. Also put Event OnClose, OnValidante, OnCancel this kind of stuff.
So everywhere In my code I can launch this kind of code

var result = await new MyModalTemplateModel(/*some parameters if you want*/).ShowAsync();
if (result.IsValid) 
result.Data ....;

with MyModalTemplateModel an implementation of a base class wich specialized a Component (the component of your modal) and a type of result.

I can't share all my code because it's not an open source project but if you need help i can send you some piece of code.

good luck

[LaughingJohn]

Thanks Julien,

I think your solution is not dissimilar to what I ended up doing myself (see attached solution), I have a service, an event, renderers etc. I may not be quite as advanced as you, but the idea is the same. The bit I couldn't get my head around is the fact I had to build a renderer separate from the component when by nature the component knows how to render itself using the Razor page. It means that you sort-of have to define how the component renders itself twice. You can't just create a component in code and then inject it as an object into the render tree.

Quite a lot of work to display a dialog! :)

[LaughingJohn]

Thanks Steve, I think as I come from more of a WPF/SL background I'm used to being able to create a component dynamically and inject it into the UI. I suspect anyone else from a similar background will suffer the same confusion.

It's not the end of the world and my current solution works OK, but it just feels a bit convoluted/dirty. And having to create renderers seems weird. Is there some way you could "new up" a component and feed it to a method that does the rendering for you (maybe I just need the underlying render method exposed?). Although I guess that still means having 2 instances of the object, one to create the "rendering" and the one that is actually rendered?

[LaughingJohn]

One final aside, the project I have attached shows a single "messagebox" dialog but the real app is quite complex and will have several dialogs (10+) with different parameters in and out, many of which will be re-used throughout the application. I was trying to avoid having lists of different dialog components all over the Razor files as it seemed messy.

I appreciate this might be "just the way it is", but thought it might be useful to share a real life scenario.

Thanks for coming back to me BTW - I appreciate you're all busy! :)

[sylvainonweb]

Hi @LaughingJohn,
If you want a solution to manage MessageBox (but not other dialogs), you can look at my repo here

https://github.com/sylvainonweb/blazor-ui/tree/master/common/message-box

Hi @julienGrd,

I tried to implement my way of managing popup dialog (see #18142) but unfortunately failed if user needs to open a 2nd popup because when this 2nd popup is closed, the 1st one is refreshed (redrawn) and lost changes done by the user (ex : selected value of combobox is reset to its initial value)

I would really be interested if you could help me and told me more about your solution.

Thanks in advance.

[sylvainonweb]

@LaughingJohn,

To be able to use modal the way you want, please use the repository of @chrissainty (https://github.com/Blazored/Modal) who really make a great job.

Just be careful to not use property with [Parameter] attribute to store state of your modal component (see Blazored/Modal#115 and dotnet/AspNetCore.Docs#17178 for explanation).
I made this mistake and search for a workaround since a very long time and thought that my solution wasn't right :)

[julienGrd]

@sylvainonweb sorry for the late response !
i check the code https://github.com/Blazored/Modal and it seem more clean than i have to propose so i think you can stay on this library or inspire to make you own system

for the problem if i understood of the modals depending of each other, me i centralized the place the modals was opened, for example in a ModalContainerComponent which suscribe to modal message. Component wich need to launch modal send a message with the modal as a render fragment, and the modalContainer render them (and in my case can drive them).

as this way, all the modals in the app don't depend to each others, especially in the dom.

Thank you for contacting us. Due to a lack of activity on this discussion issue we're closing it in an effort to keep our backlog clean. If you believe there is a concern related to the ASP.NET Core framework, which hasn't been addressed yet, please file a new issue.

This issue will be locked after 30 more days of inactivity. If you still wish to discuss this subject after then, please create a new issue!

[LaughingJohn]

Before this gets locked, I just want to say thank you for the replies, much appreciated. My point really wasn't about dialog boxes though, it was really about having to create a renderer and pass that about instead of being able to pass the component about and have it rendered via the razor.