zoukankan      html  css  js  c++  java
  • 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.
  • 相关阅读:
    img在src无效或者是空的时候出现边框
    console.log((!+[]+[]+![]).length)
    JQuery与zTree记录
    axis2框架实现webservice
    jsp页面常用代码
    使用MyEclipse实现通过数据库中表和hibernate生成实体类和映射配置文件
    PL/SQL Developer工具的使用简介
    有关静态代码块、代码块、构造方法执行顺序
    完全平方数的个数
    队列Q(排序方式)
  • 原文地址:https://www.cnblogs.com/xinweichen/p/4611204.html
Copyright © 2011-2022 走看看