DevExpress Asp.net(3) ASPxCallback组件

ASPxCallback控件简单来的来说是一个数据回调控件，即不刷新事个页面来展现数据，主要是通过注册客户端事件与服务器端的事件来相互通信完成任务。

 

  如何使用ASPXCallback:

1. 向页面添加CallBack组件，并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。
2. 注册CallBack组件的服务器端事件ASPxCallback_Callback,这个方法就是客户端将要调用的服务器端的处理程序。
3. 注册CallBack组件的CallbackComplete事件，用来处理回调完之后的操作，并可通过参数e获取parameter和设置返回的result的值。
4. 在客户端用户CallBack组件的客户端方法PerformCallback方法，以调用服务器端的ASPxCallback_Callback事件。
             代码：Callback1.PerformCallback(id)
5. CallBack组件自动调用CallbackComplete事件，完成此次操作。

 

 下面这个例子将说明如何通过客户端启用服务器端的方法来更新DIV中的数据。

HTML代码，三个DIV，每个DIV分别有一个<a/>标签，通过调用Javascript函数ShowDetails来更新DIV的内容，其中参数为Div ID的最后一个数字。ASPxCallback组件同时注册服务器的OnCallback事件，用来处理回调时处理，ClientSideEvents的 CallbackComplete方法当回调完成时将自动调用。

 

<div id="Detail1"> <a href="javascript:ShowDetails('1');" mce_href="javascript:ShowDetails('1');">Show Detail</a> </div> <div id="Detail2"> <a href="javascript:ShowDetails('2');" mce_href="javascript:ShowDetails('2');">Show Detail</a> </div> <div id="Detail3"> <a href="javascript:ShowDetails('3');" mce_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：获取回调之后的结果值。 这个方法会在回调完成之后自动的调用。 ------------------------------------------------ -->

 

JS，通过Callback1.PerformCallback(id)调用服务器的OnCallback事件：

<mce:script type="text/javascript"><!-- function GetDetailsContainer(id) { return document.getElementById("Detail" + id.toString()); } function ShowDetails(id) { GetDetailsContainer(id).innerHTML = "Loading&hellip;"; Callback1.PerformCallback(id); //回调方法，将调用服务器端注册的Callback方法。 } /* ------------------------------------- Callback1.PerformCallback(parameter); PerformCallback方法会调用Callback1服务器端的ASPxCallback1_Callback()方法，以完成和服务器 端的通信。所以在服务器端一定要注册ASPxCallback1_Callback方法，以完成指定的操作。 同时，PerformCallback()中的参数可有可无，类型为string，当有参数时，服务器端可通过ASPxCallback1_Callback() 中的 ( CallbackEventArgs e) e.Parameter来获得，并通过e.Result参数返回结果值。 此时，就可以通过执行Client端的CallbackComplete方法来获取执行的方法。 总结： 1 向页面添加CallBack组件，并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。 2 注册CallBack组件的服务器端事件ASPxCallback_Callback。 3 注册CallBack组件的CallbackComplete事件，用来处理回调完之后的操作，并可通过参数e获取parameter和result的值。 4 在客户端用户CallBack组件的客户端方法PerformCallback方法，以调用服务器端的ASPxCallback_Callback事件。 代码：Callback1.PerformCallback(id) 5 CallBack组件自动调用CallbackComplete事件，完成此次操作。 */ // --></mce:script>

 

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