采取异步回调显示实时股价

采用异步回调显示实时股价

无论在股票或者基金网站，可以看到股票的价格实时变化，并且整个页面感觉不到刷新，仅仅是股票的价格在不断变化，这个是如何实现的呢？

1、新增一个自定义用户控件文件Callback.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Callback.ascx.cs" 
Inherits="ClientControl_Callback" %>
<script type="text/javascript" lang="javascript">
    function <%=this.ID%>_OnCallbackCompleteDefault(ret) {
    }
</script>

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

public partial class ClientControl_Callback : System.Web.UI.UserControl, System.Web.UI.ICallbackEventHandler
{
    public class CallbackEventArgs
    {
        public CallbackEventArgs()
        {
        }

        public CallbackEventArgs(string Parameter, string Result)
        {
            parameter = Parameter;
            result = Result;
        }

        private string parameter = "";
        public string Parameter
        {
            get { return parameter; }
            set { parameter = value; }
        } 

        private string result = "";
        public string Result
        {
            get { return result; }
            set { result = value; }
        }
    }

    public delegate void CallbackEventHandler(object source, CallbackEventArgs e);
    public event CallbackEventHandler Callback;
    private CallbackEventArgs EventArgs;

    #region 属性

    public string ClientPerformCallback
    {
        get
        {
            if (this.ViewState["ClientPerformCallback"] != null)
                return (string)this.ViewState["ClientPerformCallback"];
            return string.Empty;
        }
        set
        {
            this.ViewState["ClientPerformCallback"] = value;
        }
    } 

    public string ClientCompleteEvent
    {
        get
        {
            if (this.ViewState["ClientCompleteEvent"] != null)
                return (string)this.ViewState["ClientCompleteEvent"];
            return string.Empty;
        }
        set
        {
            this.ViewState["ClientCompleteEvent"] = value;
        }
    }

    public string ClientErrorEvent
    {
        get
        {
            if (this.ViewState["ClientErrorEvent"] != null)
                return (string)this.ViewState["ClientErrorEvent"];
            return string.Empty;
        }
        set
        {
            this.ViewState["ClientErrorEvent"] = value;
        }
    }

    #endregion
   
    protected void Page_Load(object sender, EventArgs e)
    {
        Callback += new CallbackEventHandler(OnCallback);

        string cbReference = "";
        string completeEvent = ClientCompleteEvent;

        if (string.IsNullOrEmpty(ClientCompleteEvent))
        {
            completeEvent = this.ID + "_OnCallbackCompleteDefault";
        }
        if (string.IsNullOrEmpty(ClientErrorEvent))
        {
            cbReference = Page.ClientScript.GetCallbackEventReference(
                this, "arg", completeEvent, "context", true);
        }
        else
        {
            cbReference = Page.ClientScript.GetCallbackEventReference(
                this, "arg", completeEvent, "context", ClientErrorEvent, true);
        } 

        string callbackScript = "function " + ClientPerformCallback + "(arg, context)" 
                                + "{ " + cbReference + "} ;";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), this.ID + "_CallBackJS_" 
              + ClientPerformCallback, callbackScript, true);
    }

    protected virtual void OnCallback(object source, CallbackEventArgs e)
    {
    }

    string ICallbackEventHandler.GetCallbackResult()
    {
        return EventArgs.Result;
    }

    void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
    {
        EventArgs = new CallbackEventArgs(eventArgument, "");
        Callback(this, EventArgs);
    }
}

2、使用该自定义用户控件实现局部刷新的效果

新建一个Test.aspx页面

<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="Test.aspx.cs"%>
<%@ Register TagPrefix="cb" TagName="Callback" Src="~/Callback.ascx" %>
<script type="text/javascript" src="~/json2.js"></script>
<script type="text/javascript" language="javascript">
        $(function () {
            performCallback1();
            setInterval("performCallback1();", 10 * 1000);
           
        }); 

        function onCallbackComplete1(ret) {
            var mytable= document.getElementById("table1");;
            $("#table1").empty();
            if (ret == '' || ret == '[]') {
                return;
            } else {
                var stocks = JSON.parse(ret);
                for (var i = 0; i < stocks.length; i++) {
                    var row = mytable.insertRow(i);
                    var cell = row.insertCell(0);
                    cell.setAttribute("id", "tb_" + i + "_0");
                    $("#tb_" + i + "_0").text(stocks[i].Name);
                     cell = row.insertCell(1);
                    cell.setAttribute("id", "tb_" + i + "_1");
                    $("#tb_" + i + "_1").text(stocks[i].Price);
                }
            }
        }
 </script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <table id="table1">
       
    </table>
    <cb:Callback ID="Callback1" runat="server" OnCallback="Callback1_Callback"
       ClientCompleteEvent="onCallbackComplete1" ClientPerformCallback="performCallback1"/>
</asp:Content>

后台代码：

using System;
using System.IO;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data;
using System.Text;

using Newtonsoft.Json;

public partial class Test : BasePage
{


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
        }
    }
    protected void Callback1_Callback(object source, UserControl_Callback.CallbackEventArgs e)
    {
        List<Stock> stockList = new List<Stock>();
        Random rdm =new Random();
        Stock stock = new Stock();
        stock.Name = "交通银行";
        stock.Price = rdm.Next(10);
        stockList.Add(stock);
        stock = new Stock();
        stock.Name = "民生银行";
        stock.Price = rdm.Next(10);
        stockList.Add(stock);
        e.Result = JavaScriptConvert.SerializeObject(stockList); ;
    }
}

 public class Stock
{
    private string _Name;
    public string Name
    {
        get { return _Name; }
        set { _Name = value; }
    }

    private float _Price;
    public float Price
    {
        get { return _Price; }
        set { _Price = value; }
    }
}