介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法。

一.Dev Data Edit控件通用属性以及方法:

属性

1.GetEnabled():返回控件是否为可操作状态

2.GetText():返回控件的Text的值

3.SetEnabled():设置控件状态

4.GetValue():返回控件的Value

5.SetValue():设置控件的Value

注意：在客户端进行Dev控件编程必须为Dev控件指定一个客户端的名称即ClientInstanceName，客户端直接根据ClientInstanceName来进行相关的

操作。一个简单的例子来从客户端改变AspxTextBox的值

Code

<head runat="server">

<title>ClientTest</title>

<script language="javascript" type="text/javascript">

function onSendText(s,e){

//得到AspxTextBox1的值

var txt=txtSend.GetText();

//根据AspxTextBox1的值设置AspxTextBox2的值

var sendtxt="Get "+ txt+" from Client";

txtGet.SetText(sendtxt);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" ClientInstanceName="txtSend" ClientEnabled="true">

</dxe:ASPxTextBox>

<dxe:ASPxButton ID="ASPxButton1" runat="server" Text="Post" AutoPostBack="False" ClientInstanceName="btnSend">

<ClientSideEvents Click="function(s, e) {

onSendText(s,e);

}" />

</dxe:ASPxButton>

<dxe:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" ClientInstanceName="txtGet" ClientEnabled="true" >

</dxe:ASPxTextBox>

</div>

</form>

</body>

运行效果如下图：

怎么样？是不是和ASP.NET AJAX有异曲同工之妙。

接下来，第二个例子，ASPXComBox下拉框无刷新连动

当然，已经有很多种方法，AJAX插件来实现下拉框的级联连动更新。Dev的下拉框也不例外。在介绍这个例子之间，首先节点介绍下Dev的控件是如何

实现客户端，服务端异步通信的。

从客户端到服务端的通信：PerformCallback()。PerformCallback就是从客户端到服务端的桥梁，它是单向的只能从客户端发起到服务端。在Perform

Callback()括号当中我们可以传递一些参数到服务器端，从而达到更新效果。

服务器端的接受并异步刷新：Callback()。当从服务端PerformCallback唤醒以后，响应的控件Callback事件开始执行(控件的服务器事件中可以找到)。

并且通过Parameter键值来获取从客户端传过来的值进行相关的处理。

客户端：

Code

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>PerTest</title>

<script language="javascript" type="text/javascript">

//客户端处理下拉框选择项改变事件,client端aspxcombox下拉框改变事件为SelectedIndexChanged

function OnEmployeesChanged(s){

//PerformCallback事件实际上时dev系列控件客户端服务器端异步通信的"大使"，通过PerfromCallback事件

//将客户端的通信要求传递给服务端,在服务端通过控件的callback事件来接受相关参数并进行页面异步刷新

devcbxChi.PerformCallback(s.GetValue());

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<dxe:ASPxComboBox runat="server" ID="devcbxPar2" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"

EnableSynchronization="False" ClientInstanceName="devcbxPar2"

Width="160px">

<ClientSideEvents SelectedIndexChanged="function(s, e) { OnEmployeesChanged(s); }"></ClientSideEvents>

</dxe:ASPxComboBox>

<dxe:ASPxComboBox runat="server" ID="devcbxChi" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"

EnableSynchronization="False" ClientInstanceName="devcbxChi"

Width="160px" oncallback="devcbxChi_Callback">

</dxe:ASPxComboBox>

</div>

</form>

</body>

</html>

服务端：

Code

using DevExpress.Web.ASPxEditors;

Code

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["northwind"].ConnectionString);

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

devcbxPar2.Items.Clear();

string selectSQL = "select EmployeeID,FirstName from Employees";

SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);

DataSet DS = new DataSet();

SDA.Fill(DS);

for (int i = 0; i < DS.Tables[0].Rows.Count; i++)

{

devcbxPar2.Items.Add(new ListEditItem(DS.Tables[0].Rows[i]["FirstName"].ToString().Trim(), DS.Tables[0].Rows[i]["EmployeeID"]

.ToString().Trim()));

}

}

}

protected void devcbxChi_Callback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)

{

//得到从客户端传递过来的参数来进行异步通信响应

string parm = e.Parameter.Trim();

string selectSQL = "select TerritoryID from EmployeeTerritories where EmployeeID='" + parm + "'";

SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);

DataSet DS = new DataSet();

SDA.Fill(DS);

devcbxChi.Items.Clear();

for (int i = 0; i < DS.Tables[0].Rows.Count; i++)

{

devcbxChi.Items.Add(DS.Tables[0].Rows[i]["TerritoryID"].ToString().Trim());

}

devcbxChi.SelectedIndex = 0;

}

OK，一个简单的异步刷新下拉框连动实现。那么思索下dev控件的异步通信，既然这么容易能实现从客户端服务端的异步刷新，那么要求再高点，

怎样通过服务端的发起来异步改变客户端的元素呢？我们把上面的程序稍微改下

Code

<head runat="server">

<title>PerTest</title>

<script language="javascript" type="text/javascript">

//客户端处理下拉框选择项改变事件,client端aspxcombox下拉框改变事件为SelectedIndexChanged

function OnEmployeesChanged(s){

//PerformCallback事件实际上时dev系列控件客户端服务器端异步通信的"大使"，通过PerfromCallback事件

//将客户端的通信要求传递给服务端,在服务端通过控件的callback事件来接受相关参数并进行页面异步刷新

devcbxChi.PerformCallback(s.GetValue());

}

function onEndCallback(s,e){

var result=s.cp_result;

txtresult.SetText(result);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<dxe:ASPxComboBox runat="server" ID="devcbxPar2" DropDownStyle="DropDownList" EnableIncrementalFiltering="True"

EnableSynchronization="False" ClientInstanceName="devcbxPar2"

Width="160px">

<ClientSideEvents SelectedIndexChanged="function(s, e) { OnEmployeesChanged(s); }"></ClientSideEvents>

</dxe:ASPxComboBox>

<dxe:ASPxComboBox runat="server" ID="devcbxChi" EnableIncrementalFiltering="True"

EnableSynchronization="False" ClientInstanceName="devcbxChi"

Width="160px" oncallback="devcbxChi_Callback" ValueType="System.String">

<ClientSideEvents EndCallback="function(s, e) {

onEndCallback(s,e);

}" />

</dxe:ASPxComboBox>

<dxe:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px"

ClientInstanceName="txtresult" ForeColor="Red">

</dxe:ASPxTextBox>

</div>

</form>

</body>

服务端：

Code

protected void devcbxChi_Callback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)

{

//得到从客户端传递过来的参数来进行异步通信响应

string parm = e.Parameter.Trim();

string selectSQL = "select TerritoryID from EmployeeTerritories where EmployeeID='" + parm + "'";

SqlDataAdapter SDA = new SqlDataAdapter(selectSQL, conn);

DataSet DS = new DataSet();

SDA.Fill(DS);

devcbxChi.Items.Clear();

for (int i = 0; i < DS.Tables[0].Rows.Count; i++)

{

devcbxChi.Items.Add(DS.Tables[0].Rows[i]["TerritoryID"].ToString().Trim());

}

devcbxChi.SelectedIndex = 0;

//定义JSProperties参数值回传给客户端

devcbxChi.JSProperties["cp_result"] = "更新成功";

}

看看效果：。没错"更新成功"是从服务端回传给了客户端！是不是很简单？一个重要的属性JSProperties

JSProperties属性可以从服务端的参数传到客户端。我们可以定义很多个参数，但是在定义JSProperties属性的参数时，一定要记得参数

的值以"cp"开头，以此来与Dev的基类区别开来。接下来我们在控件的客户端EndCallback()事件来接受JSProperties的参数来进行相关

的设置。

Dev的Data Edit相关控件的客户端编程也非常强大，让我们非常轻松的就可以实现异步通信。将Dev的客户端，服务端编程相结合，我们

的程序将效率更高，实现效果也更好。

Dev系列控件的AJAX (转)的更多相关文章

  1. Dev系列控件的AJAX使用Demo

    一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2.GetText():返回控件的Text的值 3.SetEnabled():设置控 ...

  2. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  3. asp.net2.0安全性(4)－－Login系列控件--转载来自车老师

    前面主要说了与安全相关的一系列的类,现在我们使用这些类就可以做出我们自己的安全系统了.其实微软的目的远不至于此,下面我们就来看一下微软为我们提供的Login系列控件. Login系列控件是微软为了简化 ...

  4. dev的控件放在没有runat="server"的标签中，回调出现的问题

    dev的控件放在没有runat="server"的标签中,第一次回调是会刷新页面, 有runat="server"时不会刷新页面

  5. ASP.NET Dev ASPxGridView控件使用 ASP.NET水晶报表打印

    1.ASPxGridView控件使用 2.ASP.NET水晶报表客户端打印 3.javascript打印 4.ASPxGridView根据Textbox查询 5. ASPxGridView 列宽 1. ...

  6. WPF系列 —— 控件添加依赖属性（转）

    WPF系列 —— 控件添加依赖属性 依赖属性的概念,用途 ,如何新建与使用.本文用做一个自定义TimePicker控件来演示WPF的依赖属性的简单应用. 先上TimePicker的一个效果图. 概念 ...

  7. Windows高DPI系列控件(一) - 饼图

    目录 一.醉一醉 二.效果展示 三.高DPI适配 1.高DPI框架运作 2.适配高DPI 3.适配饼图 四.相关文章 原文链接:Windos高DPI系列控件(一) - 饼图 一.醉一醉 眨眼功夫,20 ...

  8. Windows高DPI系列控件(二) - 柱状图

    目录 一.QCP 二.效果展示 三.高DPI适配 1.自定义柱状图 2.新的柱状图 3.测试代码 四.相关文章 原文链接:Windows高DPI系列控件(二) - 柱状图 一.QCP QCP全称QCu ...

  9. 在Visualforce page中用自带的控件实现Ajax回调后台方法（并且可以用js去动态给parameters赋值）

    这里用的组合是:apex:commandLink  + apex:actionFunction + apex:outputPanel 这里的 apex:commandLink 和 apex:actio ...

随机推荐

  1. sql语法图

  2. Dev-C++程序正确闪退问题

    只需要在主函数最后一句语句上面加一句getchar();即可

  3. js获取上传的文件名

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. html5 js跨域

    介绍 当我们使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Acce ...

  5. phpcms V9 修改生成静态文件路径/html

    在论坛看到部分用户反馈这个问题,要修改的其实是html_root的值,默认是"/html"如果要生成在网站根目录的话,这个值则要为空.论坛上现在看到的办法是打开caches\con ...

  6. 基于.NET MVC的高性能IOC插件化架构(二)之插件加载原理

    上一篇博文简单介绍了下插件化的代码组成部分:http://www.cnblogs.com/gengzhe/p/4390932.html,源码地址:https://github.com/luohuazh ...

  7. 解决jsp页面乱码问题

    页面也需要设置转码的:页面:(.jsp) <%@ page language="java" import="java.util.*" pageEncodi ...

  8. Install the Yeoman toolset

    参照:http://yeoman.io/codelab/setup.html 1:$npm install --global yo bower grunt-cli 提示以下错误 npm ERR! /p ...

  9. 51单片机C51毫秒级（ms)精确延时

    如下程序能实现ms毫秒级的比较精确的延时 void Delayms(unsigned int n) { unsigned int i,j; ;j--) ;i>;i--); } 用keil可以看出 ...

  10. java基本类型作为成员变量时的初始值

    package primitivetypedefaultvalue; public class ListDefaultValue { public static void main(String[] ...