ASP.NET 2.0 Callback实例讲解

本文介绍 ASP.NET 2.0 中 Callback 的实现方法,并通过具体示例展示了客户端与服务器端交互的过程,包括回调函数的调用、参数传递、结果返回等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;
    }

}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值