如何在C# Web应用的聊天框UI中即时显示用户输入？

算力阿峰

2026-6-18

问题：ASP.NET WebForms聊天应用用户消息无法即时显示

我用C#开发带聊天框UI的Web应用，当前遇到问题：用户输入内容点击发送后，输入的消息要等API返回响应才会显示。我需要实现用户消息立刻显示，之后再单独展示API响应的效果。

现有前端代码

<%@ Page Async="true" Language="C#" AutoEventWireup="true" CodeBehind="ChatBot.aspx.cs" Inherits="chatbot.Module.ChatBot" %>  
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0 auto;
            max-width: 800px;
            padding: 0 20px;
            position: relative;
            min-height: 100vh; /* Ensures the body covers the full viewport height */
        }

        .container {
            border: 2px solid #dedede;
            background-color: #f1f1f1;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
        }

        .darker {
            border-color: #ccc;
            background-color: #ddd;
        }

        .container::after {
            content: "";
            clear: both;
            display: table;
        }

        .containerLeftImg {
            float: left;
            max-width: 60px;
            width: 100%;
            margin-right: 20px;
            border-radius: 50%;
        }

        .containerRightImg {
            float: right;
            max-width: 60px;
            width: 100%;
            margin-right: 20px;
            border-radius: 50%;
        }

        .time-right {
            float: right;
            color: #aaa;
        }

        .time-left {
            float: left;
            color: #999;
        }

        .input-container {
            display: flex;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 10px;
            border-top: 2px solid #dedede;
        }

            .input-container input[type="text"] {
                flex-grow: 1;
                padding: 10px;
                border: 2px solid #dedede;
                border-radius: 5px;
                font-size: 16px;
                margin-right: 10px;
            }

        .btn {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

            .btn:hover {
                background-color: #45a049;
            }
    </style>
</head>
<body>

    <div id="chatContainer" runat="server">
        <!-- New chat containers will be appended here -->
    </div>

    <!-- Input form for user -->
    <div class="input-container">
        <form runat="server" style="display: flex; width: 100%;" autocomplete="off">
            <asp:TextBox runat="server" ID="txtQuestion" placeholder="Type your message here..."></asp:TextBox>
            <asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" Text="Send" CssClass="btn" />
        </form>
    </div>

</body>
</html>

现有后台代码

protected async void btnSubmit_Click(object sender, EventArgs e)
{
     string userMessage = txtQuestion.Text.ToString().Trim();

     if (!string.IsNullOrEmpty(userMessage))
     {
         // Append user message container
         AppendMessageContainer("darker", "../Images/avatar.png", userMessage, "time-left", "containerRightImg");

         // Call API and get response
         string apiResponse = await WebServices.GetDataFromAPI(userMessage);

         // Append API response container
         AppendMessageContainer("", "../Images/bot.png", apiResponse, "time-right", "containerLeftImg");

         // Clear the user input field
         txtQuestion.Text = string.Empty;
     }
 }

 private void AppendMessageContainer(string cssClass, string avatarUrl, string message, string timeClass, string imgClass)
 {
     StringBuilder sb = new StringBuilder();
     sb.Append("<div class='container " + cssClass + "'>");
     sb.Append("<img src='" + avatarUrl + "' alt='Avatar' style='width: 100%;' class='" + imgClass + "' >");
     sb.Append("<p>" + Server.HtmlEncode(message) + "</p>");
     sb.Append("<span class='" + timeClass + "'>" + DateTime.Now.ToString("HH:mm") + "</span>");
     sb.Append("</div>");

     chatContainer.InnerHtml += sb.ToString();
 }

解决方案

核心问题是你使用了WebForms的服务器端回发机制，整个页面的更新必须等待后台所有异步操作（包括API调用）完成后才会触发。要实现用户消息即时显示，需改用前端JavaScript处理消息渲染，再通过AJAX异步调用API获取响应，避免页面整页回发。

1. 修改前端代码

将服务器控件替换为普通HTML元素，添加JavaScript逻辑实现即时渲染用户消息、异步调用API：

<%@ Page Async="true" Language="C#" AutoEventWireup="true" CodeBehind="ChatBot.aspx.cs" Inherits="chatbot.Module.ChatBot" %>  
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 保留原有样式不变 */
        body {
            margin: 0 auto;
            max-width: 800px;
            padding: 0 20px;
            position: relative;
            min-height: 100vh;
        }

        .container {
            border: 2px solid #dedede;
            background-color: #f1f1f1;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
        }

        .darker {
            border-color: #ccc;
            background-color: #ddd;
        }

        .container::after {
            content: "";
            clear: both;
            display: table;
        }

        .containerLeftImg {
            float: left;
            max-width: 60px;
            width: 100%;
            margin-right: 20px;
            border-radius: 50%;
        }

        .containerRightImg {
            float: right;
            max-width: 60px;
            width: 100%;
            margin-right: 20px;
            border-radius: 50%;
        }

        .time-right {
            float: right;
            color: #aaa;
        }

        .time-left {
            float: left;
            color: #999;
        }

        .input-container {
            display: flex;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 10px;
            border-top: 2px solid #dedede;
        }

            .input-container input[type="text"] {
                flex-grow: 1;
                padding: 10px;
                border: 2px solid #dedede;
                border-radius: 5px;
                font-size: 16px;
                margin-right: 10px;
            }

        .btn {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

            .btn:hover {
                background-color: #45a049;
            }
    </style>
</head>
<body>

    <div id="chatContainer">
        <!-- New chat containers will be appended here -->
    </div>

    <!-- Input form for user -->
    <div class="input-container">
        <input type="text" id="txtQuestion" placeholder="Type your message here..." autocomplete="off">
        <button id="btnSubmit" class="btn">Send</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                var userMessage = $("#txtQuestion").val().trim();
                if (!userMessage) return;

                // 立即渲染用户消息
                appendUserMessage(userMessage);
                // 清空输入框
                $("#txtQuestion").val("");

                // 异步调用后台API获取响应
                $.ajax({
                    url: "ChatBot.aspx/GetBotResponse",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ userMessage: userMessage }),
                    success: function (response) {
                        // 渲染机器人响应
                        appendBotMessage(response.d);
                    },
                    error: function () {
                        appendBotMessage("抱歉，获取响应失败，请重试。");
                    }
                });
            });

            // 渲染用户消息
            function appendUserMessage(message) {
                const now = new Date();
                const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                const messageHtml = `
                    <div class='container darker'>
                        <img src='../Images/avatar.png' alt='Avatar' class='containerRightImg'>
                        <p>${escapeHtml(message)}</p>
                        <span class='time-left'>${timeStr}</span>
                    </div>
                `;
                $("#chatContainer").append(messageHtml);
                scrollToBottom();
            }

            // 渲染机器人消息
            function appendBotMessage(message) {
                const now = new Date();
                const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
                const messageHtml = `
                    <div class='container'>
                        <img src='../Images/bot.png' alt='Avatar' class='containerLeftImg'>
                        <p>${escapeHtml(message)}</p>
                        <span class='time-right'>${timeStr}</span>
                    </div>
                `;
                $("#chatContainer").append(messageHtml);
                scrollToBottom();
            }

            // HTML转义，防止XSS攻击
            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }

            // 滚动聊天容器到底部
            function scrollToBottom() {
                const chatContainer = document.getElementById("chatContainer");
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        });
    </script>
</body>
</html>

2. 修改后台代码

添加[WebMethod]标记的静态方法，供AJAX调用，移除原服务器按钮点击事件：

using System.Web.Services;

public partial class ChatBot : System.Web.UI.Page
{
    [WebMethod]
    public static async System.Threading.Tasks.Task<string> GetBotResponse(string userMessage)
    {
        if (!string.IsNullOrEmpty(userMessage))
        {
            // 调用API获取响应
            return await WebServices.GetDataFromAPI(userMessage);
        }
        return "";
    }

    // 移除原btnSubmit_Click方法和AppendMessageContainer方法
}

效果说明

用户点击发送后，前端JS会立即将消息渲染到聊天框，无需等待API响应。
同时通过AJAX异步请求后台API，获取响应后再渲染机器人消息，实现了消息即时显示、响应后续加载的交互效果。
避免了WebForms整页回发的问题，页面状态保持稳定，用户体验更流畅。

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

如何在C# Web应用的聊天框UI中即时显示用户输入？

现有前端代码 #

现有后台代码 #

解决方案 #

1. 修改前端代码 #

2. 修改后台代码 #