介绍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. Php GMP

    GMP是The GNU MP Bignum Library,是一个开源的数学运算库,它可以用于任意精度的数学运算,包括有符号整数.有理数和浮点数.它本身并没有精度限制,只取决于机器的硬件情况. 本函数 ...

  2. JavaScript 函数作用域和闭包

    函数作用域和闭包  词法作用域   它们在定义它们的作用域里运行,而不是在执行的作用域运行,但是只有在运行时,作用域链中的属性才被 定义(调用对象),此时,可访问任何当前的绑定.   调用对象     ...

  3. MySQL 列子查询及 IN、ANY、SOME 和 ALL 操作符的使用

    列子查询是指子查询返回的结果集是 N 行一列,该结果通常来自对表的某个字段查询返回. 一个列子查询的例子如下: SELECT * FROM article WHERE uid IN(SELECT ui ...

  4. 持续集成环境（Gitlab+jenkins+shell）

    一.搭建gitlab ps:不是这方面的专家,主要还是一键式安装为主. 1.进入官网:https://about.gitlab.com/gitlab-com/ 2.选择自己的操作系统:我这边选择的ub ...

  5. php中iconv函数的一个小bug--转载

    iconv转换字符集很好用,但是有时候你会发现iconv转换的时候会返回false或者空字符串,严格说来这算不上是iconv的问题,这其实是字符集的问题,但是实际编码中应该算是iconv的bug了. ...

  6. oracle 界面分页

    /** * */ package org.pan.util; import java.sql.ResultSet; import java.sql.SQLException; import java. ...

  7. android开发——数独游戏

    最近研究了一下android,写了一个数独游戏,具体如下: 游戏界面需要重写一个ShuduView继承View, 然后自定义一个Dialog: 1.需要继承 Dialog 类, 2.并要定义一个有参构 ...

  8. jquery读取后台代码

    前台代码: <script type="text/javascript"> $(function () {            $("#btn") ...

  9. 解决jsp页面乱码问题

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

  10. Ubuntu12.04 下安装QQ

    1:点此下载DEB安装包http://www.longene.org/download/WineQQ2012-20120712-Longene.deb 2:打开终端输入到目录中运行命令安装. sudo ...