devexpress控件之ASPxCallback

时间 2019-11-29

标签 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事件javascript

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

5.ASPxButton客户端事件ajax

按钮使用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>
<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"></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>

[/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.