Rendering sequence in blazor component

Question

I have two RenderFragments in blazor component. One is MainContent another one is AuxilaryContent i.e. I place the AuxilaryContent at first followed by MainContent. As of now, Auxilary content rendered succeeded by MainContent because as I placed AuxilaryContent at first.

But my requirement is that I need to render MainContent first, based upon rendering of MainContent, I may render AuxilaryContent or not. But in DOM, AuxilaryContent always lies before MainContent.

Is this possible?

If I am using bool in MainContent, then by using the bool to trigger SecondaryContent means, it requires another StateHasChanged(). It involves unwanted re-rendering of components.

@page "/check"

@AuxilaryContent
@MainContent

@code {
    RenderFragment MainContent => (builder) =>
    {
        //It must be rendered first
    };
    RenderFragment AuxilaryContent => (builder) =>
    {
        //It should rendered after MainContent rendering. But in DOM, it always lies before MainContent
    };
}

It is strange that the _logic_ for this is inside a RenderFragment. Can you create a [mcve] ? — H H, Oct 21 '20 at 06:41
You know, can use CSS to show each component where you want despite the position on DOM. https://stackoverflow.com/a/27374063/842935 — dani herrera, Jan 27 '21 at 16:06
you have to use two different components, main component can have a event for your scenario. — mRizvandi, Jun 27 '21 at 13:43

hesolar · Answer 1 · 2021-08-18T11:03:33.857

Suppose you have the 2 components, main and aux. The second aux can be shown or not by the result of the main one ,thats what i understand.

First of all Blazor is a spa (single-page application) it means that everything is in fact in the same page i mean,suppose you start by the index of the page , it contains all the components of the blazor proyect. The components inside can contain or not others. For example, suppose a collection of books: The index page will be more less like that:

@page "/"
<book1_component></book1_component>
<book2_component></book2_component>
<book3_component></book3_component>

Inside of each component you can put another component if u want.

<h1>book1</h1>

<label>title</label> <input type="text" />
<label>author</label> <input type="text" />
<other_component> </other_component>

@code{ 
    //methods
}

The interesting thing about blazor is that you should work with it as you have State-Patron: You can check here what its a state patron: https://refactoring.guru/es/design-patterns/state

What i mean is if the state changes, then the behavior of blazor will change too. Example: Here you can see that if the state of the index component change , there will be one or other components or even none.

@page "/"

<input type="int" max="4" min="1" @bind="state" />

@if( state == 1 )<book1_component></book1_component>
@if( state == 2 )<book2_component></book2_component>
@if( state == 3 )<book3_component></book3_component>

@if(i>4) <label> no books!</label>

@code{
    int state;
}

So in your example you should do more less the same , for example, if a condition is true then you show, your component. So if you want to refresh some component with statehaschange, you can do it in its own .razor page . @page "/"

<InputCheckbox  @bind="state" />

@if( state) <aux_component></aux_component>
else Not loading component.

@code{
    bool state;
    //operations to change the state
}

Other way ,can be : If you want to keep the logic on only one component, you can use the lifecycle methods: https://learn.microsoft.com/es-es/aspnet/core/blazor/components/lifecycle?view=aspnetcore-5.0

So if you want to execute some code first put onInitiallize, then go to the next lifecycle method and execute second block by a condition, something like that.

@page "/check"

@AuxilaryContent
@MainContent

@code {

    protected override void OnInitiallize(){
        //executing the first
        RenderFragment MainContent => (builder) =>
        {
            //It must be rendered first
        };
    }
    protected override void OnParametersSet(){
   //main component rendered
   RenderFragment AuxilaryContent => (builder) =>
    {
        //It should rendered after MainContent rendering. But in DOM, it always lies before MainContent
    };
    }
}

Hope it helps.

score 0 · Answer 2 · edited May 14 '21 at 17:21

0

I would consider restructuring this component into two nested components: main container controlling the conditional rendering of the aux one.

edited May 14 '21 at 17:21

Dharman

30,962
25
85
135

answered May 14 '21 at 17:15

Dmitry Pavlov

30,789
8
97
121

Rendering sequence in blazor component

2 Answers2