ASP.NET 2.0 Callback实例讲解

callback是一个结合了某个特定的用户接口对象的函数。它执行某个动作作为对对象事件的反应。事件可以是大量鼠标单击或者其他事件中的任何一个。

在ASP.NET 2.0中实现callbacks和标准web页中实现有些差异。下面列出了需要在页面代码中修改的地方：

1 、页面必须实现ICallbackEventHandler接口。

2 、页面必须实现ICallbackEventHandler接口的RaiseCallbackEvent方法，在服务器上调用这个方法执行callback函数。

3 、页面必须实现ICallbackEventHandler接口的GetCallbackResult方法，这个方法将把callback函数的执行结果返回给客户端。

我们应用过程中经常会遇到下面的问题：

1、客户端传递的参数，其类型均为字符串。

2、如何处理多入口参数、多出口参数问题。

3、如何处理多个Callback

4、如何可视化演示Callback执行进度。

下面用一个实例进行演示，里面有详细的代码及说明，在这里就不详细讲解其实现过程。

先看两张效果图：

运行中效果图>>>>

 运行结束效果图>>>>>

 

下面是源代码：

前台页面 Callback_Test.aspx

 

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

<! 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 > ASP.NET 2.0 Callback Example </ title >

     < script  type ="text/javascript" > ...
    

          //************************************************************

          // Author : Xiaojun.Liu                       

          // Create Date: 2007.11.06             

          //************************************************************

   

        //**************************** processbar status ********************************
        //IE浏览器测试通过
        function HideProcessBar() ...{ 
            var oDiv = document.getElementById("oProcessBar");        
            oDiv.style.display = "none" ;
        } 
        function ShowProcessBar() ...{
            var oDiv = document.getElementById("oProcessBar");
            oDiv.style.display = "block" ;
        } 
        //**************************** processbar status ********************************
    
        //注意：对传入或传出的参数要有一个过滤、转化，里面不能有"$"、"|"字符
        //      此例子省略了这一步骤
    
        var callback_sender = "";   //标识回调的发送者，此处用服务器端处理函数的名称去标识
        
        //*********************************************************************
        // 回调
        function GetResult(eventArg)...{  
            UseCallback(eventArg, "");
            //设置执行中的效果
            ShowProcessBar();
        }
        //取得回调结果
        function GetResultFromServer(result, context)...{            
            SetCallbackResult(result);
            //设置执行完毕的效果
            HideProcessBar();
        }
        //设置回调结果
        function SetCallbackResult(result)
        ...{
            var eventArgs = result.split("$");            
            callback_sender = eventArgs[0];
            switch(callback_sender)
            ...{
                case "GetUpperStr":
                    SetUpperString(eventArgs[1]);
                    break;
                case "GetCustomerDetail":
                    SetCustomerDetail(eventArgs[1]);
                    break;
                default:
                    break;
            } 
        }
        //*********************************************************************
        
        
        //******************************* GET *********************************        
        //获取大写字母
        function GetUpperString()
        ...{
            callback_sender = "GetUpperStr";            
            var strArgs = "";
            
            var strSource = document.getElementById("txtSourceString").value; 
            
            strArgs = callback_sender + "$";    //回调标识用“$”分割
            strArgs = strArgs + strSource + "|";  //不同入口参数用“|”分割
            
            GetResult(strArgs);  
        }
        
        //获取客户详细信息       
        function GetCustomerDetail()
        ...{
            var cusId = document.getElementById("txtCustomerId").value;
            if(cusId=="")
            ...{
                alert("请输入Customer Id");
                document.getElementById("txtCustomerId").focus();
            }
            else
            ...{
                callback_sender = "GetCustomerDetail";            
                var strArgs = "";
            
                var cusId = document.getElementById("txtCustomerId").value;
                var cusId_sub = document.getElementById("txtCustomerId_Sub").value;
                
                strArgs = callback_sender + "$";    //回调标识用“$”分割
                strArgs = strArgs + cusId + "|" + cusId_sub + "|";  //不同入口参数用“|”分割（这里增加了两个入口参数:cusId , cusId_sub）
            
                GetResult(strArgs);
            }
        }
        //******************************* GET *********************************
        
        
        //******************************* SET *********************************
        function SetUpperString(result)
        ...{
            var args = result.split("|");
            document.getElementById("txtResutlString").value = args[0];
        }
        
        function SetCustomerDetail(result)
        ...{
            var i = result.split("|"); 
            
            customerID.innerHTML = i[0];
            companyName.innerHTML = i[1];
            contactName.innerHTML = i[2];
            contactTitle.innerHTML = i[3];
            address.innerHTML = i[4];
            city.innerHTML = i[5];
            region.innerHTML = i[6];
            postalCode.innerHTML = i[7];
            country.innerHTML = i[8];
            phone.innerHTML = i[9];
            fax.innerHTML = i[10];
        }
        //******************************* SET *********************************
        
     </ script >

</ head >
< body  topmargin ="0"  leftmargin ="0" >
     < form  id ="form1"  runat ="server" >
         < div  id ='oProcessBar'  style ='position:  absolute; z-index: 99; background-color: darkgray;
            filter: Alpha(Opacity =60);  display: none; width: 100%; height: 100%; text-align: right;' >
             < div  style ='font-size:  12px; color: black; font-weight: bold; margin: 10px;' >
                处理中 < img  src ='/Images/loadingBar.gif'  align ='absmiddle'  /></ div >
         </ div >
         < table  border ="0"  width ="600" >
             < tr >
                 < td >
                     < asp:TextBox  ID ="txtSourceString"  runat ="server" ></ asp:TextBox ></ td >
             </ tr >
             < tr >
                 < td >
                     < asp:TextBox  ID ="txtResutlString"  runat ="server"  ReadOnly ="true"  Enabled ="False" ></ asp:TextBox >
                 </ td >
             </ tr >
             < tr >
                 < td >
                     < input  type ="button"  value ="ToUpper(Callback)"  onclick ="GetUpperString();"   /></ td >
             </ tr >
             < tr >
                 < td >
                    Customer Id: < asp:TextBox  ID ="txtCustomerId"  runat ="server"  Width ="100" ></ asp:TextBox >
                    -
                     < asp:TextBox  ID ="txtCustomerId_Sub"  runat ="server"  Width ="100" ></ asp:TextBox >
                     < input  id ="btnGetCustomerDetail"  type ="button"  value ="GetCustomerDetail(Callback)"
                        onclick ="GetCustomerDetail();"   /></ td >
             </ tr >
             < tr >
                 < td >
                     < table  cellspacing ="0"  cellpadding ="4"  rules ="all"  border ="1"  id ="DetailsView1"  width ="600" >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                CustomerID </ td >
                             < td >
                                 < span  id ="customerID"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                CompanyName </ td >
                             < td >
                                 < span  id ="companyName"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                ContactName </ td >
                             < td >
                                 < span  id ="contactName"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                ContactTitle </ td >
                             < td >
                                 < span  id ="contactTitle"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                Address </ td >
                             < td >
                                 < span  id ="address"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                City </ td >
                             < td >
                                 < span  id ="city"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                Region </ td >
                             < td >
                                 < span  id ="region"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                PostalCode </ td >
                             < td >
                                 < span  id ="postalCode"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                Country </ td >
                             < td >
                                 < span  id ="country"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                Phone </ td >
                             < td >
                                 < span  id ="phone"   />
                             </ td >
                         </ tr >
                         < tr  style ="color: #003399; background-color: White; width: 100px;" >
                             < td >
                                Fax </ td >
                             < td >
                                 < span  id ="fax"   />
                             </ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr >
                 < td >
                 </ td >
             </ tr >
         </ table >
     </ form >
</ body >
</ html >

 

后台CS代码 Callback_Test.aspx.cs

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

// 要使用Callback，必须继承 System.Web.UI.ICallbackEventHandler
public   partial   class  Front_Test_Callback_Test : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
... {
    private string _callbackResult = null;

    protected void Page_Load(object sender, EventArgs e)
    ...{
        ClientScriptManager csm = Page.ClientScript;

        string cbReference = csm.GetCallbackEventReference(this, "arg", "GetResultFromServer", "context");
        string cbScript = "function UseCallback(arg, context)" +"{" + cbReference + ";" + "}";
        csm.RegisterClientScriptBlock(this.GetType(), "UseCallback", cbScript, true);
    }


    public string GetUpperStr(string str)
    ...{
        //实际应用过程中要对字符串进行过滤
        string[] args = str.Split("|".ToCharArray());
        return args[0].ToUpper();
    }


    public string GetCustomerDetail(string str)
    ...{
        //实际应用过程中要对字符串进行过滤

        string[] args = str.Split("|".ToCharArray());

        string[] returnValues = new string[11];

        returnValues[0] = args[0] + "-" + args[1];
        returnValues[1] = "this is CompanyName";
        returnValues[2] = "this is ContactName";
        returnValues[3] = "this is ContactTitle";
        returnValues[4] = "this is Address";
        returnValues[5] = "this is City";
        returnValues[6] = "this is Region";
        returnValues[7] = "this is PostalCode";
        returnValues[8] = "this is Country";
        returnValues[9] = "this is Phone";
        returnValues[10] = "this is Fax";

        return String.Join("|", returnValues);
    }

    //
    public void RaiseCallbackEvent(string eventArg)
    ...{
        string[] args = eventArg.Split("$".ToCharArray());

        switch (args[0])
        ...{
            case "GetUpperStr":
                _callbackResult = args[0] + "$" + GetUpperStr(args[1]);
                break;
            case "GetCustomerDetail":
                _callbackResult = args[0] + "$" + GetCustomerDetail(args[1]);
                break;
            default:
                _callbackResult = args[0] + "$" + args[1];
                break;
        }
        //测试延时效果
        double n = 0;
        while (n < 1000000000)
        ...{
            n++;
        }
    }

    public string GetCallbackResult()
    ...{
        return _callbackResult;
    }
}

 

 

本文引用自：http://blog.youkuaiyun.com/lxjhb/archive/2007/11/09/1875968.aspx