Dev系列控件的AJAX (转)

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

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

属性

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

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

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

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

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

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

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

Code

<title>ClientTest</title>

function onSendText(s,e){

//得到AspxTextBox1的值

var txt=txtSend.GetText();

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

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

txtGet.SetText(sendtxt);

}

</script>

</head>

<body>

<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

<title>PerTest</title>

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

function OnEmployeesChanged(s){

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

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

devcbxChi.PerformCallback(s.GetValue());

}

</script>

</head>

<body>

<div>

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

EnableSynchronization="False" ClientInstanceName="devcbxPar2"

Width="160px">

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

<title>PerTest</title>

//客户端处理下拉框选择项改变事件,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>

<div>

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

EnableSynchronization="False" ClientInstanceName="devcbxPar2"

Width="160px">

</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 (转)的更多相关文章

Dev系列控件的AJAX使用Demo
一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2.GetText():返回控件的Text的值 3.SetEnabled():设置控 ...
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系列 —— 控件添加依赖属性（转）
WPF系列 —— 控件添加依赖属性依赖属性的概念,用途 ,如何新建与使用.本文用做一个自定义TimePicker控件来演示WPF的依赖属性的简单应用. 先上TimePicker的一个效果图. 概念 ...
Windows高DPI系列控件(一) - 饼图
目录一.醉一醉二.效果展示三.高DPI适配 1.高DPI框架运作 2.适配高DPI 3.适配饼图四.相关文章原文链接:Windos高DPI系列控件(一) - 饼图一.醉一醉眨眼功夫,20 ...
Windows高DPI系列控件(二) - 柱状图
目录一.QCP 二.效果展示三.高DPI适配 1.自定义柱状图 2.新的柱状图 3.测试代码四.相关文章原文链接:Windows高DPI系列控件(二) - 柱状图一.QCP QCP全称QCu ...
在Visualforce page中用自带的控件实现Ajax回调后台方法（并且可以用js去动态给parameters赋值）
这里用的组合是:apex:commandLink + apex:actionFunction + apex:outputPanel 这里的 apex:commandLink 和 apex:actio ...

随机推荐

客户端JavaScript（window、document、element）
一.window对象是所有客户端JavaScript特性和API的主要接入点,用window来引用它. 属性:location属性(引用Location对象,当前显示在窗口的URL).document ...
react相关
react 简单入门 ant 蚂蚁金服react组件 redux 阮一峰入门react material-ui组件库 webpack入门 http://www.jianshu.com/p/42e115 ...
STL 之空间配置器（allocator）
一.SGI 标准的空间配置器,std::allocator SGI也定义了一个符合部分标准,名为allocator的配置器,但是它自己不使用,也不建议我们使用,主要原因是效率不佳. 它只是把C++的操 ...
Google Chrome一些小技巧
document.body.contentEditable='true'; 可以编辑网页上的内容
php stripslashes() addslashes() 解析
stripslashes() 函数删除由 addslashes() 函数添加的反斜杠. 实例: <?php $str = "Is your name O\'reilly?"; ...
关于 Delphi 中的Sender和易混淆的概念（转）
/////////////////////////////////////////////////////// Delphi 中Sender对象的定义///////////////////////// ...
flask开发restful api系列(7)-蓝图与项目结构
如果有几个原因可以让你爱上flask这个极其灵活的库,我想蓝图绝对应该算上一个,部署蓝图以后,你会发现整个程序结构非常清晰,模块之间相互不影响.蓝图对restful api的最明显效果就是版本控制:而 ...
swipejs
http://swipejs.com/ http://www.scoop.it/t/javascript-for-mobile http://www.open-open.com/news/view/c ...
Altium Designer 里面怎么画等长线
(1)一般是将走线布完后,新建一个class. Design -> Classes 如上图添加完后可以点击close. (2)快捷键 T + R: 或者点击Tools 下拉中的Interact ...
Misha and Changing Handles
Description Misha hacked the Codeforces site. Then he decided to let all the users change their hand ...

Dev系列控件的AJAX (转)

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

随机推荐

热门专题