devexpress控件之ASPxCallback

ASPxCallback主要是通过注册客户端事件服务器端事件来相互通信完成任务。
ASPxCallback控件为我们封装了大量的Ajax操作,使用起来非常的方便,如果页面中遇到需要局部刷的操作而又不想自动动手写ajax的话,使用它就是非常不错选择。

客户端向服务端发信息 例如c1.PerformCallback(‘信息‘);

服务端向客户端发信息 先在后台代码中定义一个JSProperties属性值

例如:ASPxComboBox2.JSProperties["cp_result"] = "abcd";

 如何使用ASPXCallback:

1.向页面添加ASPxCallBack组件,并设置ClientInstanceName属性(客户端标识,如 ClientInstanceName="Callback1")。

2•注册ASPxCallBack组件的服务器端事件ASPxCallback_Callback,这个方法就是客户端将要调用的服务器端的处理程序。

3•注册ASPxCallBack组件的CallbackComplete事件,该事件指的是是当回完成后事件,可用来处理回调完之后的操作,并可通过参数e获取parameter和设置返回的result的值。

4.在客户端用ASPxCallBack组件的客户端方法PerformCallback方法,以调用服务器端的ASPxCallback_Callback事件。
          代码:ASPxCallBack的客户端标识ClientInstanceName.PerformCallback(要刷新的客户端ID)
•CallBack组件自动调用CallbackComplete事件,完成此次操作。

一个简单的例子

1.拖个ASPxButton控件,AutoPostBack="False" .

    把DIV的ID设为time

2.拖该控件,把它的客户端标识属性ClientInstanceName设为c1

设置 它的回传CallBack事件中 e.Result = DateTime.Now.ToString();

3。设置它的客户端事件CallbackComplete,意思:回传完成后的操作

function(s, e) {
           time.innerHTML =e.result;
}

4.自定义一个JS事件

PerformCallback(局部刷新ID)意思:执行回传

<script. type="text/javascript">
  function tt(s, e) 
       {
        c1.PerformCallback("time2");
    }    }

5.ASPxButton客户端事件

按钮使用JS中定义的事件

<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" 
            Text="局部刷新" >
            <ClientSideEvents Click ="tt" />
        </dx:ASPxButton>

小结:c1.PerformCallback("test");意思:客户端标识为c1的ASPxCallback控件执行回传,回传客户端ID为test,这个需要JS。

它的客户端事件CallbackComplete,

function(s, e) {
           time.innerHTML =e.result;
}意思:回传事件完成后的操作,这里是把结果写到time里了

例子2.现在时间

<head runat="server">
    <title>无标题页</title>

<script. language="JavaScript" type="text/javascript">
 setInterval("time()",1000);
function time() {
   c1.PerformCallback("t");
}
    </script>

</head>
<body>
    <form. id="form1" runat="server">
    <div id="t">
    </div>
    <div>
        <dx:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="c1" nCallback="ASPxCallback1_Callback">
            <ClientSideEvents CallbackComplete="function(s, e) {
 t.innerHTML=e.result;
}" />
        </dx:ASPxCallback>
    </div>
    </form>
</body>
</html>
C#

protected void ASPxCallback1_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
    {
        e.Result = DateTime.Now.ToString();
    }


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

HTML代码
三个DIV,每个DIV分别有一个<a/>标签,通过调用Javascript函数ShowDetails来更新DIV的内容,其中参数为Div ID的最后一个数字。ASPxCallback组件同时注册服务器的OnCallback事件,用来处理回调时处理,ClientSideEvents的 CallbackComplete方法当回调完成时将自动调用。
JS,通过Callback1.PerformCallback(id)调用服务器的OnCallback事件
[code]<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>[/code]
[b]aspx:[/b]
[code]<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"
        nCallback="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:获取回调之后的结果值。

这个方法会在回调完成之后自动的调用。
------------------------------------------------
-->[/code]
C#,在OnCallback事件中接受客户端传递过来的参数,以进行判断是更新的哪一个DIV,并通过e.Result返回处理后的结果:
[code]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;
        }
    }[/code]
最后,Aspx系列控件的所有的客户端回调都是通过这种模块完成的,如设置Aspx的ClientInstanceName属性,添加注册Aspx服务器端的Callback方法,在客户端调用Aspx的PerformCallback()方法等。这种模式在以后的使用过程中会经常的见到。 function forumhottag_callback(data){ tags = data; }</SCRIPT. type="text/javascript." </SCRIPT. type="text/javascript." parsetag();</SCRIPT.

时间: 2024-12-01 19:47:35

devexpress控件之ASPxCallback的相关文章

DevExpress 控件使用笔记 - Common Controls

这段时间一直在研究DevExpress控件库,本文是我对DevExpress工具箱中分类"DX.13.1: Common Controls"下控件的使用笔记.这个类型的控件都在DevExpress.XtraEditors.v13.1.dll中定义. 分类"DX.13.1: Common Controls"下控件列表如下: 针对以上控件,我选了一些做了笔记,内容如下: 1)ColorPickEdit,颜色选择控件,类似VS中控件属性管理器中的颜色选择工具,包括自定义.

DevExpress控件使用经验总结

DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一些小的经验总结.总体来讲,使用DevExpress控件,可以获得更高效的界面设计以及更美观的效果.本文主要通过给出相应的例子以及相关界面效果来说明问题,希望大家能够从中获得好的知识和思路. 1. 应用Office2007和Office2010的界面主题 开始使用DevExpress的时候,发现程序界

DevExpress控件的一些快捷操作

用的DevExpress控件时,有一些操作并不太方便,根据我自己需要的封装了一些控件的事件,调用的时候直接绑定控件的事件就可以了 例如: this.ComboBoxEdit.KeyDown += CtrlBase.ComboBoxEdit_KeyDown;            this.LookUpEdit.KeyDown +=CtrlBase.LookUpEdit_KeyDown;            this.TextEdit.KeyDown += CtrlBase.TextEdit_K

DevExpress控件使用之多重坐标图形的绘制 z

有时候,基于对一些年份.月份的统计,需要集成多个数值指标进行分析,因此就需要把多种数据放到一个图形里面展现,也成为多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过一个例子对这个方面进行介绍,希望给大家有一个很好的参考. 首先我们先来看一个图形例子,我们可以从里面图形的右边看到有多个Y轴,一个Y轴代表一个指标分析,X轴为月份. 上图是采用了DevExpress的ChartControl图表控件来实现的,这个控件提供了SecondaryAxisY对象来处理多重坐标的问

DevExpress控件的安装及画图控件的使用

近期须要绘制纵断面图,而AE自带的又不是非常好,查找资料后使用DevExpress控件中的画图控件实现了纵断面的绘制.Dev控件是须要付费的.这里我们使用破解版的哈. 安装包及破解文件上传至我的网盘了,须要的可去下载: DevExpress 11.1.4:http://pan.baidu.com/s/1qWNitsC DevExpress 13.1.5:http://pan.baidu.com/s/1bnnGWH5 安装及破解方法:http://www.it165.net/pro/html/20

DevExpress控件库 开发使用经验总结3 制作项目安装包

2015-01-27 使用DevExpress控件包开发C/S项目完成后,部署前需要制作本地安装包.本文还是使用“SetupFactory”安装工厂来制作安装包.在以前的系列文章中详细介绍过该工具的使用,请参考http://www.cnblogs.com/SavionZhang/p/4106338.html. 实际情景:SetupFactory V9.0.3.DevExpress14.1.8.依赖程序.Net Framework 4.0. 由于项目中引用了很多DevExpress控件库中的DLL

DevExpress控件使用经验总结- GridView列表行号显示操作

DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一些小的经验总结.总体来讲,使用DevExpress控件,可以获得更高效的界面设计以及更美观的效果.本文主要通过给出相应的例子以及相关界面效果来说明问题,希望大家能够从中获得好的知识和思路. 1. 应用Office2007和Office2010的界面主题 开始使用DevExpress的时候,发现程序界

DevExpress控件笔记

DateEdit设置手录格式(yyyy-MM-dd) (yyyy-MM-dd HH:mm) /* * 设置DateEdit手动录入格式(yyyy-MM-dd yyyy-MM-dd hh:mm) * DateRegEx = @"((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(

【转】DevExpress控件安装

原文链接: DevExpress控件安装.汉化使用教程 - 田园里的蟋蟀 学习网址: 1.DevExpress控件中文网 2.DevExpress控件中文网使用教程 3.DevExpress控件使用经验总结(伍华聪)的专栏)仅供参考 4.DevExpress使用教程:常用Winform界面封装  自己百度吧,不让添加链接 下载地址:DevExpress 14.1.4安装程序(附破解补丁) 我安装的是 14.1.4版本,安装软件存放在百度云平台,详细安装过程参考:参考博文.我的安装过程如下: 安装