Ajax 於 ASP.NET 即時更新資料

2012年6月22日星期五

Ajax 於 ASP.NET 即時更新資料

瀏覽網頁通常都不喜歡頻繁的頁面刷新，我個人就是。

所以我用 Ajax 來做更新頁面的動作，讓他即時的在頁面上顯示資料，隨手建立兩個 aspx 檔案 ( Default.aspx、ReadData.aspx )。

Default.aspx ：鍵入資料並同時傳送資料給 ReadData.aspx ，接收 ReadData.aspx 傳回之資料，即時顯示於此頁面上。

ReadData.aspx ：依照傳遞參數顯示資料。

註：範例資料庫為北風 ( northwind ) 資料庫。

以下為原始碼：

ReadData.aspx - 將多餘程式碼都拿掉，否則另一頁面接收資料會顯示不出來。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReadData.aspx.cs" Inherits="ReadData" %>


    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvData" runat="server">
            
        </asp:GridView>
    </div>
    </form>

ReadData.aspx.cs - 讀取資料庫資料並讓 GridView 接收顯示。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Data.SqlClient;

public partial class ReadData : System.Web.UI.Page
{
    string strConn = "Data Source=localhost;Initial Catalog=Northwind;Integrated Security=True";
    string strQuery;
    string strID;
    SqlConnection connection;
    SqlCommand command;
    SqlDataAdapter adapter;
    DataTable dt;

    protected void Page_Load(object sender, EventArgs e)
    {
        if ( ( strID = Request.QueryString["ID"]) != null )
        {
            try
            {
                connection = new SqlConnection(strConn);
                command = new SqlCommand();

                strQuery = "SELECT EmployeeID [Employee ID], FirstName + ' ' + LastName [Full Name] FROM Employees WHERE EmployeeID=" + strID;

                command.CommandText = strQuery;
                command.Connection = connection;

                adapter = new SqlDataAdapter(command);
                dt = new DataTable();

                adapter.Fill(dt);

                gvData.DataSource = dt;
                gvData.DataBind();
            }
            catch (Exception ex) { }
        }

    }
}

Default.aspx - 利用 ajax 來讀取網址包含參數索回傳的網頁內容 ( 當然用 XML 最好 )，定時執行 javascript 來即時更新頁面內容 ( 以下為 2 秒更新一次 )。

<%@ Page Title="首頁" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    
    <script language="javascript" type="text/javascript">
        function cretateXMLHttpRequest() {
            
            if (window.XMLHttpRequest) { // 如果是 Mozilla, Safari,...
                http_request = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) { // 如果是 IE
                try {
                    // IE 又分成新版和舊版的，其處理方式也不同
                    // 新版的 IE，目前 IE 9 OK
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        // 舊版的 IE
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) { }
                }
            }


        }

        function doStart() {
            cretateXMLHttpRequest();

            var id = document.getElementById('<%= txtID.ClientID %>').value;

            if (id != "") {

                var url = "ReadData.aspx?ID=" + id;
                http_request.open("GET", url, false);
                http_request.send(null);

                var show = document.getElementById('show');
                show.innerHTML = http_request.responseText;
                

            }
            setTimeout(doStart, 2000);

            // alert(id);
        }
    </script>


</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    

    <asp:TextBox ID="txtID" runat="server"></asp:TextBox>

    <div id="show"></div>
    
    <script language="javascript" type="text/javascript">
        doStart();
    </script>
</asp:Content>

執行結果如下圖：