Render a div in the blazor app after rendering another div

Question

I have a scenario, in which I am loading data from db and then adding that to the div, I need to extend another div based on the height of the first div. I am trying with the OnAfterRenderAsync.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (!firstRender && _isLoaded)
    {
        await DisplayOtherContent();
        StateHasChanged();
    }

    await base.OnAfterRenderAsync(firstRender);
}

So basically after rendering db data, I am calling DisplayOtherContent method, which is successfully adding html data in the HTML dom, I can see that in the inspect element but I can't see that on the html page.

Answer 1

I am getting some data from the server and render that to the page and after the loading of that data, I wanted to set the height of some divs. so after trying different stuff at least something works.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (_isLoaded)
    {
        await DisplayOtherContent();
        await InvokeAsync(StateHasChanged);
    }

    await base.OnAfterRenderAsync(firstRender);
}

Initially I was making the dynamic html in the string variable and render that string variable as a Markup HTML similar to this. In this approach, I was able to get that html in the inspect element but it's not rendering on the page.

Later, I made changes and instead of generating dynamic html, I was calculating how much length I needed to extend in the html in the variable and then looping through that variable in the .razor view to generate that html. so for example, after getting data I set the variable _isloaded, and after rendering of that data, I calculated value of _NoOfTime in the OnAfterRenderAsync method and then using the loop I am able to make the html works.

        if (_isLoaded)
        {
            for (int i = 0; i < _NoOfTime; i++)
            {
                // html code
            }
        }