RadzenTabsItem OnParametersSetAsync

Radzen.Blazor Components
1

Hi,

I hope I may ask for some help with the RadzenTabs Component. I guess I missconfigured (or misunderstood) something.
Please consider this the following small project (@rendermode="InteractiveServer") to demonstrate the issue.

When I set a breakpoint in the OnParametersSetAsync function of the FooComponents it is hit multiple times when I toggle between the tabs.
This happens with TabRenderMode.Server and TabRenderMode.Client. Is there a way to avoid this? Or is this expected and I am missing something?

The Home page looks like this:

@page "/"

@inherits HomeBase

@using Radzen
@using Radzen.Blazor

<PageTitle>Home</PageTitle>

<RadzenTabs Change=@OnTabChange TabPosition="TabPosition.Top" RenderMode="TabRenderMode.Client">
    <Tabs>

        <RadzenTabsItem Text="Foo">
            <FooComp dummyObjects=@dummyObjects["Foo"] />
        </RadzenTabsItem>

        <RadzenTabsItem Text="Bar">
            <FooComp dummyObjects=@dummyObjects["Bar"] />
        </RadzenTabsItem>

        <RadzenTabsItem Text="Baz">
            <FooComp dummyObjects=@dummyObjects["Baz"] />
        </RadzenTabsItem>

    </Tabs>
</RadzenTabs>

Here's the code:

using Microsoft.AspNetCore.Components;

namespace TabsIssue.Components.Pages
{
    public class HomeBase : ComponentBase
    {
        protected Dictionary<string, List<DummyObject>> dummyObjects = new();

        protected override Task OnInitializedAsync()
        {
            dummyObjects["Foo"] = new List<DummyObject>
            {
                new DummyObject { IntProp = 1, StringProp = "Foo 1" },
                new DummyObject { IntProp = 2, StringProp = "Foo 2" }
            };

            dummyObjects["Bar"] = new List<DummyObject>
            {
                new DummyObject { IntProp = 3, StringProp = "Bar 3" },
                new DummyObject { IntProp = 4, StringProp = "Bar 4" }
            };

            dummyObjects["Baz"] = new List<DummyObject>
            {
                new DummyObject { IntProp = 5, StringProp = "Baz 5" },
                new DummyObject { IntProp = 6, StringProp = "Baz 6" }
            };


            return base.OnInitializedAsync();
        }


        protected void OnTabChange(int index)
        {

        }
    }
}

FooComp.razor:

@inherits FooCompBase

<ul>
@foreach(var dummyObj in dummyObjects)
    {
        <li @key="@dummyObj.StringProp">
            <span>@dummyObj.StringProp @dummyObj.IntProp</span>
        </li>
    }
</ul>

FooComp.razor.cs:

using Microsoft.AspNetCore.Components;

namespace TabsIssue.Components
{
    public class FooCompBase : ComponentBase
    {
        [Parameter]
        public List<DummyObject> dummyObjects { get; set; }


        protected override Task OnParametersSetAsync()
        {
            return base.OnParametersSetAsync();
        }

    }
}

and the DummyObject:

type or paste code here

namespace TabsIssue
{
public class DummyObject
{
public int IntProp { get; set; }

    public string StringProp { get; set; }
}

}

As always: thanks for your support. Highly appreciated!
Cheers!
TabsIssue.zip (363.9 KB)

2

You can do the following to optimize your case:

  1. Disabled prerender using @rendermode="new InteractiveServerRenderMode(prerender: false)" instead simply InteractiveServer
  2. Avoid using such expressions since they are evaluated on every state change:
  1. Depending on your case you can either use Client RenderMode for the Tab which will instantiate all tab items initially and later show/hide them using JavaScript or you can use Server RenderMode if you want to initialize tabs on the fly when selected.
3

Thanks for looking into this, @enchev!
Unfortunately none of these ideas fixed the issue for me. If you don't see the same behaviour, I guess there must me another problem on my side.
Thanks and cheers!

4

You can check also components lifecycle from official documentation from Microsoft: