介绍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. MYSQL Model报错:指定的存储区提供程序在配置中找不到 的解决

    开了项目发现没装mysql及mysql connector/.net.下了个最新版本,结果打开vs,进入模型edmx页面就出了这个问题. 刚开始以为是ProviderManifestToken版本的问 ...

  2. JavaScript forEach方法

    最近看了一些html5和js方面的书,受益匪浅,因为看的东西比较多,却都没有怎么静心来做整理,慢慢来吧,可能最近自己有点儿小紧张.今天跟大家分享下JavaScript的forEach方法(其实是从&l ...

  3. php错误处理和php异常处理机制

    php错误处理  当我们开发程序时,有时候程序出现了问题,我们就可以用以下几种办法找出错误.  开发阶段:开发时输出所有的错误报告,有利于我们进行程序调试  运行阶段:我们不要让程序输出任何一种错误报 ...

  4. 《python基础教程》笔记之 基础知识

    数字相关 在Python程序前加上 from __future__ import division 或者在解释器里面直接执行它,或者通过命令行运行Python时使用命令开关-Qnew,会使单斜线不再整 ...

  5. 51单片机C语言学习笔记4:keil C51绝对地址访问

    在利用keil进行8051单片机编程的时,常常需要进行绝对地址进行访问.特别是对硬件操作,如DA AD 采样 ,LCD 液晶操作,打印操作.等等.C51提供了三种访问绝对地址的方法: 1. 绝对宏:  ...

  6. XAMPP的Apache服务器无法正常启动解决方案

    XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建 XAMPP 软件站集成软件包.介绍什么的,参见百度百科http://baike.baidu.com/link?url=-UE ...

  7. 黑马程序员_JavaIO流(四)

    File概述 File类 用来将文件或者文件夹封装成对象. 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递给流的构造函数. 了解File类中的常用方法. 字段:static St ...

  8. HDOJ 1335 Basically Speaking(进制转换)

    Problem Description The Really Neato Calculator Company, Inc. has recently hired your team to help d ...

  9. Android调用第三方应用

    Intent intent=new Intent(); //包名 包名+类名(全路径) intent.setClassName("com.qn.app.store", " ...

  10. js执行引擎(js解释器)

    看字面理解,js执行引擎讲的就是将js代码转化为机器码并执行的过程. 一款 JavaScript 引擎是由 Brendan Eich 在网景的 Navigator 中开发的,它的名字叫做 Spider ...