Dev系列控件的AJAX使用Demo
一.Dev Data Edit控件通用属性以及方法:
属性
1.GetEnabled():返回控件是否为可操作状态
2.GetText():返回控件的Text的值
3.SetEnabled():设置控件状态
4.GetValue():返回控件的Value
5.SetValue():设置控件的Value
注意：在客户端进行Dev控件编程必须为Dev控件指定一个客户端的名称即ClientInstanceName，客户端直接根据ClientInstanceName来进行相关的
操作。一个简单的例子来从客户端改变AspxTextBox的值
<head id="Head1" 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键值来获取从客户端传过来的值进行相关的处理。
客户端：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>
服务端：
using DevExpress.Web.ASPxEditors;
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控件的异步通信，既然这么容易能实现从客户端服务端的异步刷新，那么要求再高点，怎样通过服务端的发起来异步改变客户端的元素呢？我们把上面的程序稍微改下
<head id="Head1" 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>
服务端:
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使用Demo的更多相关文章
- Dev系列控件的AJAX (转)
介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法. 一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2 ...
- WPF系列 —— 控件添加依赖属性（转）
WPF系列 —— 控件添加依赖属性 依赖属性的概念,用途 ,如何新建与使用.本文用做一个自定义TimePicker控件来演示WPF的依赖属性的简单应用. 先上TimePicker的一个效果图. 概念 ...
- Windows高DPI系列控件(一) - 饼图
目录 一.醉一醉 二.效果展示 三.高DPI适配 1.高DPI框架运作 2.适配高DPI 3.适配饼图 四.相关文章 原文链接:Windos高DPI系列控件(一) - 饼图 一.醉一醉 眨眼功夫,20 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- asp.net2.0安全性(4)－－Login系列控件--转载来自车老师
前面主要说了与安全相关的一系列的类,现在我们使用这些类就可以做出我们自己的安全系统了.其实微软的目的远不至于此,下面我们就来看一下微软为我们提供的Login系列控件. Login系列控件是微软为了简化 ...
- dev的控件放在没有runat="server"的标签中，回调出现的问题
dev的控件放在没有runat="server"的标签中,第一次回调是会刷新页面, 有runat="server"时不会刷新页面
- ASP.NET Dev ASPxGridView控件使用 ASP.NET水晶报表打印
1.ASPxGridView控件使用 2.ASP.NET水晶报表客户端打印 3.javascript打印 4.ASPxGridView根据Textbox查询 5. ASPxGridView 列宽 1. ...
- WPF系列 —— 控件添加依赖属性
依赖属性的概念,用途 ,如何新建与使用.本文用做一个自定义TimePicker控件来演示WPF的依赖属性的简单应用. 先上TimePicker的一个效果图. 概念 和 用途:依赖属性是对传统.net ...
- Windows高DPI系列控件(二) - 柱状图
目录 一.QCP 二.效果展示 三.高DPI适配 1.自定义柱状图 2.新的柱状图 3.测试代码 四.相关文章 原文链接:Windows高DPI系列控件(二) - 柱状图 一.QCP QCP全称QCu ...
随机推荐
- 第一篇 -- XML基础
一.XML简介 XML是一种标记语言,用于描述数据,它提供一种标准化的方式来来表示文本数据.XML文档以.xml为后缀.需要彻底注意的是XML是区分大小写的. 先从一个简单的XML例子来了解下xml基 ...
- mr-jobhistory-daemon.sh 查看mr的历史任务
这个脚本的服务是实现web查看作业的历史运行情况.有些情况下,作业运行完了,在web端就无法查看运行情况. 可以通过开启这个的守护进程来达到查看历史任务. 启动命令为 mr-jobhistory-da ...
- angularJS开发环境搭建和启动
本文目录:1.angularJS框架简介 2.angularJS环境搭建 3.启动一个项目 1.angularJS框架简介 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为 ...
- 文件描述符fd,struct files_struct
程序可以理解为硬盘上的普通二进制文件:进程是加载到内存中的二进制文件,除了加载到内存中的二进制文件外,还附有所有对于该二进制文件描述信息的结构体,描述该进程的结构体叫PCB(进程控制块),在这就不在讨 ...
- haproxy 2.0 dataplaneapi rest api 试用
我们可以基于haproxy 提供的dataplaneapi 动态进行haproxy 配置的修改,增强haproxy的可编程能力,以下是一个简单 的测试,基于docker-compose运行 环境准备 ...
- 腾讯蓝鲸cmdb源码编译
腾讯蓝鲸 cmdb 源码编译环境依赖 环境包参考: golang >= 1.8 python >= nodejs >= (编译过程中需要可以连公网下载依赖包) Python 环境 w ...
- 第03组 Beta冲刺（3/4）
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...
- Kubeasz部署K8s基础测试环境简介
下面介绍使用Kubeasz部署K8s集群环境. https://github.com/easzlab/kubeasz在需要使用kubeeasz项目安装的k8s时,需要将所有需要它来部署的节点上,都安装 ...
- TCP/IP协议族基本知识
常见的网络拓扑 两台主机通信的过程:应用进程产生消息,经由主机的 TCP/IP 协议栈发送到局域网(LAN),最后经过广域网(目前最大的广域网的因特网)中的网络设备(路由器)传给目的主机所在的局域网( ...
- gitlab 上传代码
#生成公钥ssh-keygen -t ed25519 -C "xxx@tianwang.com"#拷贝公钥pbcopy < ~/.ssh/id_ed25519.pub 在网页 ...