Mawral Comments - Answer Overflow

Mawral

•Created by Mawral on 12/16/2024 in #help

Trouble with @onclick events in Blazor Server

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>

6 replies

CC#

•Created by Mawral on 12/16/2024 in #help

Trouble with @onclick events in Blazor Server

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>

6 replies

CC#

•Created by Mawral on 12/16/2024 in #help

Trouble with @onclick events in Blazor Server

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

6 replies

CC#

•Created by Mawral on 6/15/2024 in #help

Difficulty with Blazor Server chat app

Much thanks to you both - I'll try to set up a container for message logs and see how that goes.

5 replies

CC#

•Created by Mawral on 3/1/2024 in #help

Identity/EF collection returns null

I see, thanks a whole bunch

7 replies

Gaming

Programming