Dev系列控件的AJAX使用Demo
一.Dev Data Edit控件通用属性以及方法:
属性
1.GetEnabled():返回控件是否为可操作状态
2.GetText():返回控件的Text的值
3.SetEnabled():设置控件状态
4.GetValue():返回控件的Value
5.SetValue():设置控件的Value
注意:在客户端进行Dev控件编程必须为Dev控件指定一个客户端的名称即ClientInstanceName,客户端直接根据ClientInstanceName来进行相关的
操作。一个简单的例子来从客户端改变AspxTextBox的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < 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键值来获取从客户端传过来的值进行相关的处理。
客户端:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < 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 > |
服务端:
1 | using DevExpress.Web.ASPxEditors; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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控件的异步通信,既然这么容易能实现从客户端服务端的异步刷新,那么要求再高点,怎样通过服务端的发起来异步改变客户端的元素呢?我们把上面的程序稍微改下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < 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 > |
服务端:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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的客户端,服务端编程相结合,我们
的程序将效率更高,实现效果也更好。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器