Blazor and JavaScript functions not recognized

Question

In my Blazor project, I have a lot of tabs to display. I was looking for a solution and I found a nice JavaScript implementation with jQuery that is working for desktop and mobile. Here an example of the jQuery implementation

It is working quite smoothly, and it is exactly what I need. So, I started to create a component with Blazor to reuse it and share. I published my code with examples on GitHub.

The problem I face is related to CascadingValue. My component has a container called ScrollTabs and each single Tab. So, I can write in the application something like that

<ScrollTabs TabId="TabId1" OnTabChanged="OnTabChanged">
    <Tab Text="Tab 1" Value="Tab1">
        <h2>Content Tab 1</h2>
        <p>
            This is the content for the Tab 1. It is enabled.
        </p>
    </Tab>
</ScrollTabs>

The ScrollTabs container is quite simple

<CascadingValue Value="this">
    <div id="@TabId" class="scroll_tabs_theme_light">
        @foreach (Tab tabPage in Pages)
        {
            <span>
                @tabPage.Text
            </span>
        }
    </div>
    <div class="tab-content">
        @ChildContent
    </div>
</CascadingValue>

@code {
    private DotNetObjectReference<ScrollTabs>? dotNetHelper;

    [Parameter]
    public string? TabId { get; set; }

    [Parameter] public RenderFragment? ChildContent { get; set; }

    [Parameter] public EventCallback<Tab> OnTabChanged { get; set; }

    public Tab? ActivePage { get; set; }
    List<Tab> Pages = new List<Tab>();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            dotNetHelper = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync("Helpers.setDotNetHelper", dotNetHelper);
        }

        // Setup the tabs
        await JSRuntime.InvokeVoidAsync("setup", TabId);
    }

    internal void AddPage(Tab tabPage)
    {
        Pages.Add(tabPage);
        if (Pages.Count == 1)
            ActivePage = tabPage;

        StateHasChanged();
    }
}

Then Tab is define like

@if (Parent.ActivePage == this)
{
    @ChildContent
}

@code {
    [CascadingParameter]
    public ScrollTabs? Parent { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Text { get; set; }

    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public bool Enabled { get; set; } = true;

    protected override void OnInitialized()
    {
        if (Parent == null)
            throw new ArgumentNullException(nameof(Parent), "TabPage must exist within a TabControl");

        base.OnInitialized();
        Parent.AddPage(this);
    }
}

Now, if I run the code with the CascadingValue, the JavaScript has some issues because a div is created few times.

If I remove the CascadingValue, the CascadingParameter doesn't have a value and so it raises an error. But, if I add some vanilla HTML code, the tabs from the HTML is working as expected (in the following screenshot, the first gray space is the render of the Blazor component, the second one the HTML code)

How can I fix it?

Enrico · Accepted Answer · 2022-11-07 19:58:03Z

1

I found the solution. I have to add the setup only in the firstRender.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        dotNetHelper = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("Helpers.setDotNetHelper", dotNetHelper);

        // Setup the tabs
        await JSRuntime.InvokeVoidAsync("setup", TabId);
    }
}

answered Nov 7, 2022 at 19:58

Enrico

6,87212 gold badges87 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Blazor and JavaScript functions not recognized

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related