ASP.NET AJAX 實現無刷新資料庫插入：原生 JavaScript 與 SqlDataSource 整合範例

架構說明

本範例示範純前端 XMLHttpRequest（AJAX）呼叫後端 .aspx 頁面執行資料庫插入，無需 UpdatePanel、無需 WebMethod/PageMethod、無需 WCF/Web API。適合舊版 ASP.NET WebForms 專案快速加入無刷新互動。

1. 前端頁面 Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX 插入範例</title>
    <script type="text/javascript">
        function insertData() {
            // 1. 建立 XMLHttpRequest（相容 IE6+）
            var xhr;
            if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                alert("瀏覽器不支援 AJAX");
                return;
            }

            // 2. 註冊回調
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("插入成功！伺服器回應：" + xhr.responseText);
                    } else {
                        alert("請求失敗：" + xhr.status);
                    }
                }
            };

            // 3. 取得表單值
            var no = document.getElementById("TextBox1").value;
            var name = document.getElementById("TextBox2").value;

            // 4. 發送 GET 請求（含查詢字串參數）
            var url = "Default2.aspx?no=" + encodeURIComponent(no) + "&name=" + encodeURIComponent(name);
            xhr.open("GET", url, true); // true = 非同步
            xhr.send(null);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            號碼：<asp:TextBox ID="TextBox1" runat="server" /><br />
            姓名：<asp:TextBox ID="TextBox2" runat="server" /><br />
            <input type="button" value="AJAX 插入" onclick="insertData()" />
        </div>
    </form>
</body>
</html>

2. 後端處理頁面 Default2.aspx

.aspx 宣告 SqlDataSource

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX 處理端</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                InsertCommand="INSERT INTO [tst] ([no], [name]) VALUES (@no, @name)"
                SelectCommand="SELECT * FROM [tst]">
                <InsertParameters>
                    <asp:Parameter Name="no" Type="Int32" />
                    <asp:Parameter Name="name" Type="String" />
                </InsertParameters>
            </asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

.aspx.cs Page_Load 執行插入

public partial class Default2 : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        // 1. 從 QueryString 取得參數
        string no = Request.QueryString["no"];
        string name = Request.QueryString["name"];

        // 2. 基本驗證（實務應加強：SQL 注入雖參數化已防，但仍需驗證格式、長度、權限）
        if (string.IsNullOrEmpty(no) || string.IsNullOrEmpty(name)) {
            Response.Write("參數缺失");
            Response.End();
            return;
        }

        // 3. 設定 SqlDataSource 參數並執行插入
        SqlDataSource1.InsertParameters["no"].DefaultValue = no;
        SqlDataSource1.InsertParameters["name"].DefaultValue = name;

        try {
            int affected = SqlDataSource1.Insert();
            Response.Write($"成功插入 {affected} 筆資料");
        } catch (Exception ex) {
            Response.Write("插入失敗：" + ex.Message);
            // 實務應記錄 Log，不直接輸出錯誤細節
        }
    }
}

3. 關鍵技術點解析

4. 進階改良建議

改用 POST + JSON 回應

// 前端
xhr.open("POST", "Default2.aspx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("no=" + encodeURIComponent(no) + "&name=" + encodeURIComponent(name));

// 後端
if (Request.HttpMethod == "POST") {
    string no = Request.Form["no"];
    string name = Request.Form["name"];
    // ... 執行插入 ...
    Response.ContentType = "application/json";
    Response.Write("{\"success\": true, \"message\": \"插入成功\"}");
    Response.End();
}

使用 jQuery 簡化 AJAX

$.post("Default2.aspx", { no: $("#TextBox1").val(), name: $("#TextBox2").val() })
    .done(function(data) { alert(data.message); })
    .fail(function() { alert("請求失敗"); });

現代架構建議：Web API / ASP.NET Core

• WebForms 專案可新增 ApiController（需安裝 Microsoft.AspNet.WebApi NuGet）。
• 路由：config.Routes.MapHttpRoute("DefaultApi", "api/{controller}/{id}");
• Controller 回傳 IHttpActionResult，自動 JSON 序列化、內容協商、模型驗證。
• 前端呼叫 /api/Items，關注點分離、可單元測試、支援 Swagger 文件。

安全性提醒

1. CSRF 防護：AJAX 請求同樣需防 CSRF。可在頁面輸出 <input type="hidden" id="csrfToken" value="..." />，AJAX 送出時帶入 Header X-CSRF-Token，後端驗證。
2. 輸入驗證：長度、格式、型別、業務規則（如 no 唯一性）。
3. 權限檢查：確認用戶登入、具備插入權限（Session/Roles/Claims）。
4. 錯誤資訊不外洩：生產環境 customErrors mode="RemoteOnly"，Log 記錄完整異常。