如何用Blazor的原生方式动态添加DOM元素？

Blazor 是数据驱动的框架，完全不需要通过 JSInterop 直接操作 DOM。你只需要维护一个消息集合，让框架根据集合内容自动渲染对应的 DOM 元素即可，这是 Blazor 的原生解决方案。

1. 定义消息模型 #

先创建一个简单的消息类，用来区分用户消息和AI回复（方便后续样式区分）：

public class ChatMessage
{
    public string Content { get; set; }
    public bool IsUserMessage { get; set; } // 标记是否为用户发送的消息
}

2. 修改组件代码 #

将原来的单个response字符串替换为消息列表，提交时更新列表即可让UI自动同步：

<EditForm Model="this" OnValidSubmit="@Query">
    <div id="qrContainer">
        <div>
            <input type="text" @ref="queryElement" @bind="query" placeholder="输入消息..." />
            <button type="submit">发送</button>
        </div>
        <div id="output" style="max-height: 400px; overflow-y: auto; margin-top: 10px;">
            <!-- 循环渲染所有消息 -->
            @foreach (var message in ChatMessages)
            {
                <div class="@(message.IsUserMessage ? "user-message" : "ai-message")" style="padding: 8px; margin: 4px 0; border-radius: 4px;">
                    @message.Content
                </div>
            }
        </div>
    </div>
</EditForm>

@code {
    private string query { get; set; } = string.Empty;
    private ElementReference queryElement;
    // 维护消息集合，Blazor会自动监听集合变化并更新UI
    private List<ChatMessage> ChatMessages { get; set; } = new List<ChatMessage>();

    // 假设你的responseService已注入
    [Inject] private IResponseService ResponseService { get; set; }

    private async Task Query()
    {
        if (string.IsNullOrWhiteSpace(query)) return;

        // 1. 添加用户消息到列表
        ChatMessages.Add(new ChatMessage { Content = query, IsUserMessage = true });
        query = string.Empty;
        // 手动触发状态更新，确保用户消息立即显示
        StateHasChanged();

        // 2. 获取AI回复
        var responseString = await ResponseService.getResponseAsync(query);
        
        // 3. 添加AI回复到列表
        ChatMessages.Add(new ChatMessage { Content = responseString, IsUserMessage = false });
        StateHasChanged();

        // 可选：让输入框重新获焦，提升体验
        await queryElement.FocusAsync();
    }
}

3. 可选：添加样式区分消息 #

在组件内添加<style>标签，让用户和AI消息视觉上更清晰：

<style>
    .user-message {
        background-color: #007bff;
        color: white;
        text-align: right;
    }
    .ai-message {
        background-color: #e9ecef;
        color: #212529;
    }
</style>

关键说明 #

• Blazor 依赖状态变化自动更新UI：当ChatMessages集合添加元素后，框架会自动检测状态变更，重新渲染foreach区块的DOM元素，完全不需要手动操作DOM。
• StateHasChanged()：集合变更后框架通常会自动触发更新，但在异步流程中手动调用，能确保用户消息在等待回复时立即显示。

内容的提问来源于stack exchange，提问作者Brian