ICallbackHandler實現GridView無刷新實時更新

GridView的數據顯示一般是固定的,假如要像Ajax那樣實現GridView數據動態更新而不刷新頁面,就有些難度了.客戶提出的需求,沒辦法,也得去試着想辦法實現.
  涉及到Asp.Net事件機制的實現"_doPostback".Asp.Net的底層封裝了XMLHttpRequest異步請求對象.在WebResource.axd中可以查看到這些封裝的JavaScript.對於頁面的異步請求,我們需要實現ICallbackEventHandler接口,並顯示實現其中的GetCallbackResult()和RaiseCallbackEvent()這兩個方法.廢話不多少,假如瞭解Asp.Net機制的話一看就明白了.代碼就貼在下面:

後臺代碼:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Globalization;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }

        string cbReference = Page.ClientScript.GetCallbackEventReference(Page, "", "Refresh", "");
        btnGet.Attributes.Add("onclick", cbReference);
        string script = "";
        script += "<script>/r/n";
        script += "function Refresh(DataFromServer){/r/n";
        script += "document.getElementById('Result').innerHTML=DataFromServer;/r/n";
        script += "}/r/n</script>/r/n";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Refresh", script);
    }

    public string GetCallbackResult()
    {
        //return RenderControl(Test);
        return RenderControl(Test);
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        Bind();
    }

    private string RenderControl(Control c)
    {
        StringWriter writer1 = new StringWriter(CultureInfo.InvariantCulture);
        HtmlTextWriter writer = new HtmlTextWriter(writer1);
        c.RenderControl(writer);
        writer.Flush();
        writer.Close();
        return writer1.ToString();
    }

    #region 數據綁定
    public void Bind()
    {
        // 獲取鏈接
        SqlConnection conn = new SqlConnection();

        // 設置連接的數據庫
        string str = "server=localhost;database=northwind;Integrated Security=True";
        conn.ConnectionString = str;

        // sql語句
        string strSql = "SELECT EMPLOYEES.EMPLOYEEID, EMPLOYEES.FIRSTNAME, EMPLOYEES.LASTNAME, EMPLOYEES.TITLE FROM EMPLOYEES";

        // 獲取SqlDataAdapter對象
        SqlDataAdapter adapter = new SqlDataAdapter(strSql, conn);

        // 聲明DataSet對象
        DataSet ds = new DataSet();

        // 填充DataSet
        adapter.Fill(ds);

        // 數據綁定
        Test.DataSource = ds;
        Test.DataBind();
    }
    #endregion
}

前臺:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" runat="server" id="btnGet" value="Get" style="display:none"/>
    <div id="Result">
        <asp:GridView ID="Test" runat="server" CellPadding="4" ForeColor="#333333">
        </asp:GridView>
    </div>
    </form>
    <script type="text/javascript">function btnclick(){document.getElementById("btnGet").click();}setInterval("btnclick()",10000);</script>
</body>
</html>

程序中用到的數據庫是Sql Server的示例數據庫:northwind。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章