Blazor - Add/load components dynamically

0
votes

I think I'm making a mistake right now. I have an overlay component. This overlays everything and can dynamically display content.

Overlay-Component

In the navigation there is a function to filter the interface by tags. When clicking on this button, this overlay component should be displayed.

Nav-Component

As far as I have found out so far, there is only one a workaround: Stackoverflow-Question to add & remove components dynamically. So the component is always present, but is dynamically displayed and hidden.

I have now bound the visibility to a property. This works fine so far, but I was wondering how to do this with the data. I always want to have the current data from the database on the view.

My idea now would be to say, every time the Visible property is set to true, the data is reloaded from the database. But then I would have to re-render the component somehow or reload the child content. Or how would you solve this?

2
blazorblazor-webassembly
A couple comments. First of all, stackoverflow has code tags { } so you don't need to take screen caps. Second-- I really don't understand exactly what you are talking about. You talk about clicking "this button" but don't have a button-- are you talking about the div with @onclick on it? - Bennyboy1973
Also. . . I recommend that you view your page in Chrome's Dev Tools. You may be surprised to find what is / isn't present in the actual markup of the page as you interact with it. In Blazor, components are easily added or removed using conditional logic, so I don't know why you're talking about a "workaround." - Bennyboy1973
@Bennyboy1973 Thanks for your comment. Quango has answered my questions. Sorry, I got a little confused there =) - Sven M.

2 Answers

2
votes

You're suffering the traditional jQuery/JavaScript approach here: "render it content and show/hide as needed."

So the component is always present, but is dynamically displayed and hidden.

That's what you asked Blazor to do.

Blazor can add/remove content and components dynamically as required. In your example above I would replace <div hidden="@Visible"> with..

@if(Visible) 
{
  <content goes here.. />
}

This tells Blazor render the content only if the variable Visible is true. As per the comments, use the browser tools to check the rendered HTML and you'll see no content was sent to the browser.

The "Dynamic components" you referenced are for rendering a component when the type isn't known until runtime (see my example of this at https://github.com/conficient/BlazorDynamicList). These are now part of NET 6.0 as a supported feature: link

0
votes

I'm not quite sure what you're trying to achieve, so this is a simplistic answer to the question of how to dynamically manipulate the on/off display of components and blocks of Razor markup. In Blazor you don't need to manipulate the display Css to turn blocks on and off. You can do it in code. When Display is false the component/razor doesn't exist in the DOM.

OnOffComponent

@if (this.Display)
{
    <h3>OnOffComponent</h3>
}

@code {
    [Parameter] public bool Display { get; set; }
}

OnOff View

@page "/onoff"
<div>
    <button class="btn btn-dark" @onclick="Switch">Toggle</button>
</div>

@if (_display)
{
    <h3>Hello World</h3>
}

<OnOffComponent Display="this._display"></OnOffComponent>

@code {
    private bool _display = false;

    private void Switch(MouseEventArgs e)
        => _display = !_display;
}

On reloading the data from the database, you can get the data when the component initializes and hold it in the component, just display it or not display it. In the code above OnOffComponent exists in the page, whether it's displaying anything or not.

If you wrapped the component in the @if (this.Display) as shown below, then it would be destroyed and recreated every time you toggled the display.

@if (_display)
{
    <h3>Hello World</h3>
    <OnOffComponent Display="this._display"></OnOffComponent>
}