C#•3d ago

Trouble with @onclick events in Blazor Server

I'm trying to get the hang of blazor server (.NET 8). Adding an '@onclick' event to any component in my project causes a slew of rendering errors in the console, making them dispose themselves and not show up on the page. Web searches are pointing me towards changing the render mode, but that isn't giving me different results so far. Real appreciated if anyone could point me in the right direction.

2 Replies

Mihneas22•3d ago

hello can you show me your code so maybe I can identify the cause of your error?

MawralOP•3d ago

Been trying to rule things out, seems like not every @onclick event causes issues, but specifically components that contain @onclick events which I then nest inside my Main.razor file. The console shows an InvalidCharacterException before that nested component gets disposed, occuring at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask truncated, but the main.razor looks something like this

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            @if (HasLoaded)
            {
                <CascadingValue Value="@UserState" Name="UserState">
                    <Toasts class="p-3" Messages="commandNotifMessages" Placement="ToastsPlacement.TopRight" />
                    <Modal @ref="modalComponent" />

                    <div class="chat-container">
                        <SideBar />

                        <div class="chat-content">
                            @if (currentZone != null)
                            {
                                <ChatLog @ref="chatLog" />
                                <InputField @ref="inputField" />
                            }
                            else
                            {
                                <div class="d-flex flex-column justify-content-center align-items-center h-100 text-center p-4">
                                    <i class="bi bi-chat-dots display-1 mb-3 text-muted"></i>
                                    <h4>Welcome to Chat</h4>
                                    <p class="text-muted mb-4">Select a Zone from the sidebar to start chatting</p>
                                </div>
                            }
                        </div>
                    </div>
                </CascadingValue>
            }
            else
            {
                <p class="text-muted">Loading...</p>
            }
        </Authorized>
        <NotAuthorized>
            <p class="text-muted mb-4">You must be logged in to access the chat.</p>
        </NotAuthorized>
    </AuthorizeView>
</CascadingAuthenticationState>

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            @if (HasLoaded)
            {
                <CascadingValue Value="@UserState" Name="UserState">
                    <Toasts class="p-3" Messages="commandNotifMessages" Placement="ToastsPlacement.TopRight" />
                    <Modal @ref="modalComponent" />

                    <div class="chat-container">
                        <SideBar />

                        <div class="chat-content">
                            @if (currentZone != null)
                            {
                                <ChatLog @ref="chatLog" />
                                <InputField @ref="inputField" />
                            }
                            else
                            {
                                <div class="d-flex flex-column justify-content-center align-items-center h-100 text-center p-4">
                                    <i class="bi bi-chat-dots display-1 mb-3 text-muted"></i>
                                    <h4>Welcome to Chat</h4>
                                    <p class="text-muted mb-4">Select a Zone from the sidebar to start chatting</p>
                                </div>
                            }
                        </div>
                    </div>
                </CascadingValue>
            }
            else
            {
                <p class="text-muted">Loading...</p>
            }
        </Authorized>
        <NotAuthorized>
            <p class="text-muted mb-4">You must be logged in to access the chat.</p>
        </NotAuthorized>
    </AuthorizeView>
</CascadingAuthenticationState>

ChatLog.razor looks something like this, and removing the button events halts the errors

@implements IDisposable
<div class="chat-filter-buttons mb-2">
    <button class="btn @(currentFilter == MessageFilter.All ? "btn-primary" : "btn-outline-primary")" @onclick="HandleAllFilter">
        All Messages
    </button>
    <button class="btn @(currentFilter == MessageFilter.Human ? "btn-primary" : "btn-outline-primary")" @onclick="HandleHumanFilter">
        Filter by Human
    </button>
    <button class="btn @(currentFilter == MessageFilter.Bot ? "btn-primary" : "btn-outline-primary")" @onclick="HandleBotFilter">
        Filter by Bot
    </button>
</div>
<div @ref="chatLogElement" class="chat-log @(isAtBottom ? "at-bottom" : "")" >
    @if (messages != null)
    {
        Message? previousMessage = null;
        @foreach (Message message in FilterMessages(messages.OrderBy(m => m.DateTime_Created)))
        {
            ( message display logic here )
        }
    }
    else
    {
        <div class="text-center p-3">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading messages...</span>
            </div>
        </div>
    }
</div>

@implements IDisposable
<div class="chat-filter-buttons mb-2">
    <button class="btn @(currentFilter == MessageFilter.All ? "btn-primary" : "btn-outline-primary")" @onclick="HandleAllFilter">
        All Messages
    </button>
    <button class="btn @(currentFilter == MessageFilter.Human ? "btn-primary" : "btn-outline-primary")" @onclick="HandleHumanFilter">
        Filter by Human
    </button>
    <button class="btn @(currentFilter == MessageFilter.Bot ? "btn-primary" : "btn-outline-primary")" @onclick="HandleBotFilter">
        Filter by Bot
    </button>
</div>
<div @ref="chatLogElement" class="chat-log @(isAtBottom ? "at-bottom" : "")" >
    @if (messages != null)
    {
        Message? previousMessage = null;
        @foreach (Message message in FilterMessages(messages.OrderBy(m => m.DateTime_Created)))
        {
            ( message display logic here )
        }
    }
    else
    {
        <div class="text-center p-3">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading messages...</span>
            </div>
        </div>
    }
</div>

Gaming

Programming

Trouble with @onclick events in Blazor Server