ASPxCallback控件为我们封装了大量的Ajax操作,使用起来非常的方便,如果页面中遇到需要局部刷的操作而又不想自动动手写ajax的话,使用它就是非常不错选择。ASPxCallback主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。
如何使用ASPXCallback:
- 向页面添加CallBack组件,并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。
- 注册CallBack组件的服务器端事件ASPxCallback_Callback,这个方法就是客户端将要调用的服务器端的处理程序。
- 注册CallBack组件的CallbackComplete事件,引事件是当回调完服务器事件之后自动调用的,可用来处理回调完之后的操作,并可通过参数e获取parameter和设置返回的result的值。
- 在客户端用户CallBack组件的客户端方法PerformCallback方法,以调用服务器端的ASPxCallback_Callback事件。
代码:Callback1.PerformCallback(id) - CallBack组件自动调用CallbackComplete事件,完成此次操作。
下面这个例子将说明如何通过客户端启用服务器端的方法来更新DIV中的数据。
HTML代码
三个DIV,每个DIV分别有一个<a/>标签,通过调用Javascript函数ShowDetails来更新DIV的内容,其中参数为Div ID的最后一个数字。ASPxCallback组件同时注册服务器的OnCallback事件,用来处理回调时处理,ClientSideEvents的 CallbackComplete方法当回调完成时将自动调用。
JS,通过Callback1.PerformCallback(id)调用服务器的OnCallback事件
<script type="text/javascript"><!--
function GetDetailsContainer(id) {
return document.getElementById("Detail" + id.toString());
}
function ShowDetails(id) {
GetDetailsContainer(id).innerHTML = "Loading…";
Callback1.PerformCallback(id); //回调方法,将调用服务器端注册的Callback方法。
}
//--></script>
HTML:
<div id="Detail1">
<a href="javascript:ShowDetails('1');">Show Detail</a>
</div>
<div id="Detail2">
<a href="javascript:ShowDetails('2');">Show Detail</a>
</div>
<div id="Detail3">
<a href="javascript:ShowDetails('3');">Show Detail</a>
</div>
<dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback1"
OnCallback="ASPxCallback1_Callback">
<ClientSideEvents CallbackComplete="function(s, e) {
var element = GetDetailsContainer(e.parameter);
element.innerHTML = e.result;
}" />
</dxcb:ASPxCallback>
<!--
-------------------------------------------------
CallbackComplete 方法原型:
function ASPxClientCallbackCompleteEventHandler(
source : object,
e : ASPxClientCallbackCompleteEventArgs
) : Void;
parameter:获取AspxCallBack进行回调的参数值。
result:获取回调之后的结果值。
这个方法会在回调完成之后自动的调用。
------------------------------------------------
-->
C#,在OnCallback事件中接受客户端传递过来的参数,以进行判断是更新的哪一个DIV,并通过e.Result返回处理后的结果:
protected void ASPxCallback1_Callback(object source, CallbackEventArgs e)
{
switch (e.Parameter)
{
case "1":
e.Result = "WCF分布式开发步步为赢(1):WCF分布式框架基础概念";
break;
case "2":
e.Result = "WCF分布式开发步步为赢(2)自定义托管宿主WCF解决方案开发配置过程详解";
break;
case "3":
e.Result = "WCF分布式开发步步为赢(3)WCF服务元数据交换、配置及编程开发";
break;
}
}
最后,Aspx系列控件的所有的客户端回调都是通过这种模块完成的,如设置Aspx的ClientInstanceName属性,添加注册Aspx服务器端的Callback方法,在客户端调用Aspx的PerformCallback()方法等。这种模式在以后的使用过程中会经常的见到。