ASP.NET jQuery AJAX 實現無刷新評論系統完整範例

資料庫設計

CREATE TABLE Comments (
    Id INT IDENTITY(1,1) PRIMARY KEY,
    UserName NVARCHAR(50) NOT NULL,
    Message NVARCHAR(MAX) NOT NULL,
    CreateTime DATETIME DEFAULT GETDATE()
);

前端頁面 (HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
    <title>AJAX 無刷新評論示範</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="commentList"><!-- 評論列表容器 --></table>
    
    <div>
        用戶名：<input id="txtUser" type="text" /><br />
        內容：<textarea id="txtMsg" rows="5" cols="40"></textarea><br />
        <input id="btnSubmit" type="button" value="提交評論" />
    </div>

    <script>
        $(function () {
            // 1. 頁面載入：讀取現有評論
            loadComments();

            // 2. 提交按鈕點擊
            $("#btnSubmit").click(function () {
                var user = $("#txtUser").val().trim();
                var msg = $("#txtMsg").val().trim();
                if (!user || !msg) { alert("請填寫完整"); return; }

                $.post("Handler/CommentHandler.ashx", { action: "add", user: user, msg: msg }, function (res) {
                    if (res.success) {
                        // 直接在前端追加新評論，無需重新查詢
                        appendComment(user, msg);
                        $("#txtMsg").val("");
                    } else {
                        alert("提交失敗：" + res.error);
                    }
                }, "json");
            });
        });

        function loadComments() {
            $.getJSON("Handler/CommentHandler.ashx?action=list", function (data) {
                if (data.success) {
                    data.comments.forEach(appendComment);
                }
            });
        }

        function appendComment(user, msg) {
            var html = `${user} 說：${msg}`;
            $("#commentList").append(html);
        }
    </script>
</body>
</html>

後端 Generic Handler (CommentHandler.ashx)

<%@ WebHandler Language="C#" Class="CommentHandler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;

public class CommentHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
    string connStr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json; charset=utf-8";
        string action = context.Request["action"];

        try
        {
            if (action == "list")
            {
                var list = new List