您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET AJAX 局部刷新 GridView 資料綁定實作教學

編輯：ASP.NET 基礎

前言

傳統 ASP.NET WebForms 中，GridView 資料綁定通常伴隨整頁 Postback，體驗不佳。結合原生 JavaScript XMLHttpRequest 與伺服器端動態輸出 HTML，即可實現無整頁重整的局部刷新。本文完整示範從資料來源建立、前端 AJAX 呼叫、伺服器端渲染 GridView 至字串、回傳前端插入的完整流程。

完整程式碼架構

單一 .aspx 頁面包含：伺服器端腳本區塊（建立資料、處理 AJAX 請求）、客戶端 JavaScript（發送請求、更新 DOM）、HTML 標記（GridView、下拉選單、顯示區域）。

1. 伺服器端資料來源與邏輯

<%@ Page Language="C#" %>
<script runat="server">
    // 建立模擬資料來源
    System.Data.DataView CreateDataSource()
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add("id", typeof(int));
        dt.Columns.Add("學生姓名", typeof(string));
        dt.Columns.Add("語文", typeof(decimal));
        dt.Columns.Add("數學", typeof(decimal));
        dt.Columns.Add("英語", typeof(decimal));
        dt.Columns.Add("計算機", typeof(decimal));

        for (int i = 1; i < 30; i++)
        {
            System.Random rd = new System.Random(Environment.TickCount * i);
            System.Data.DataRow dr = dt.NewRow();
            dr[0] = i;
            dr[1] = "【孟子E章】" + i;
            dr[2] = Math.Round(rd.NextDouble() * 100, 2);
            dr[3] = Math.Round(rd.NextDouble() * 100, 2);
            dr[4] = Math.Round(rd.NextDouble() * 100, 2);
            dr[5] = Math.Round(rd.NextDouble() * 100, 2);
            dt.Rows.Add(dr);
        }
        return new System.Data.DataView(dt);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // 僅處理攜帶 id 參數的 AJAX 請求
        if (Request.QueryString["id"] != null)
        {
            Response.ClearContent();
            GridView1.DataSource = CreateDataSource();
            GridView1.DataBind();

            // 將 GridView 渲染為 HTML 字串
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            System.IO.StringWriter sw = new System.IO.StringWriter(sb);
            HtmlTextWriter htw = new HtmlTextWriter(sw);

            // 加入動態標題
            Literal header = new Literal();
            header.Text = "<h2>項目 " + Request.QueryString["id"] + " </h2>";
            Header.Controls.Add(header);
            Header.RenderControl(htw);
            GridView1.RenderControl(htw);

            Response.Write("這裡查詢數據，輸出結果就可以了。結果：" + sb.ToString());
            Response.End();
        }
    }

    // 解決 GridView 必須置於 runat=server 表單內的錯誤
    public override void VerifyRenderingInServerForm(Control control) { }
</script>

2. 客戶端 AJAX 與介面

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>使用 AJAX，局部刷新 GridView 進行數據綁定</title>
    <script type="text/javascript">
        function GetData(p) {
            document.getElementById("d").innerHTML = "正在讀取數據……";
            var h = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
            h.open("GET", '<%=Request.FilePath %>?id=' + p.value, true);
            h.onreadystatechange = function () {
                if (h.readyState == 4) {
                    if (h.status >= 200 && h.status < 300) {
                        document.getElementById("d").innerHTML = h.responseText;
                    } else {
                        document.getElementById("d").innerHTML = "<h2>數據操作錯誤：</h2>" + h.responseText;
                    }
                }
            };
            h.send(null);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
        <asp:Panel ID="Header" runat="server"></asp:Panel>
        <select onchange="GetData(this)">
            <option value="1">項目一</option>
            <option value="2">項目二</option>
        </select>
    </form>
    <div id="d"></div>
</body>
</html>