CODEWITHSUNDEEP
blazorblazor-webassembly
Sven M.
Sven M.

Reputation: 637

Blazor - Add/load components dynamically

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?

Upvotes: 1

Views: 7842

Answers (2)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30360

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>
}

Upvotes: 0

Quango
Quango

Reputation: 13468

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

Upvotes: 3

Related Questions