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事件
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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返回处理后的结果:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
最后,Aspx系列控件的所有的客户端回调都是通过这种模块完成的,如设置Aspx的ClientInstanceName属性,添加注册Aspx服务器端的Callback方法,在客户端调用Aspx的PerformCallback()方法等。这种模式在以后的使用过程中会经常的见到。