AjaxPro.NET使用,方便的在客户端直接调用服务端方法
2024-05-20 12:06:45
(一). 运行效果如下:
(二). AjaxPro.NET简介
AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL引用并进行简单的配置,
即可以非常方便的在客户端直接调用服务端方法, 实现验证目的.
(三).使用AjaxPro.NET预配置
1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).
2. 在Web.config文件中添加以下配置,
< httpHandlers >< add verb = " POST,GET " path = " ajaxpro/*.ashx " type = "AjaxPro.AjaxHandlerFactory, AjaxPro " />
</ httpHandlers >3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:
AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:
[AjaxMethod()] // or [AjaxPro.AjaxMethod] public ArrayList GetSearchItems( string strQuery ){// 生成数据源ArrayList items = new ArrayList();items.Add( " King " );items.Add( " Rose " );return items ;} 就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
var returnValue = 后台代码类名.GetSearchItems(参数);(四). 详细代码如下:
1. 客户端脚本代码如下:
1 /// / JScript File2 var DIV_BG_COLOR = " #FFE0C0 " ;3 var DIV_HIGHLIGHT_COLOR = " #6699FF " ;4 var DIV_FONT = " Arial " ;5 var DIV_PADDING = " 2px " ;6 var DIV_BORDER = " 1px solid #CCC " ;7 var queryField;8 var divName;9 var ifName;10 var lastVal = "" ;11 var val = "" ;12 var globalDiv;13 var divFormatted = false ;14 15 function InitQueryCode( queryFieldName, hiddenDivName )16 { 17 queryField = document.getElementById( queryFieldName );18 queryField.onblur = hideDiv;19 queryField.onkeydown = keypressHandler;20 queryField.autocomplete = " off " ;21 22 if ( hiddenDivName )23 {24 divName = hiddenDivName;25 }26 else27 {28 divName = " querydiv " ;29 }30 31 ifName = " queryiframe " ;32 setTimeout( " mainLoop() " , 100 );33 }34 35 function getDiv(divID)36 {37 if ( ! globalDiv)38 {39 if ( ! document.getElementById(divID))40 {41 var newNode = document.createElement( " div " );42 newNode.setAttribute( " id " , divID);43 document.body.appendChild(newNode);44 }45 globalDiv = document.getElementById(divID);46 var x = queryField.offsetLeft;47 var y = queryField.offsetTop + queryField.offsetHeight;48 var parent = queryField;49 while (parent.offsetParent)50 {51 parent = parent.offsetParent;52 x += parent.offsetLeft;53 y += parent.offsetTop;54 }55 if ( ! divFormatted)56 {57 globalDiv.style.backgroundColor = DIV_BG_COLOR;58 globalDiv.style.fontFamily = DIV_FONT;59 globalDiv.style.padding = DIV_PADDING;60 globalDiv.style.border = DIV_BORDER;61 globalDiv.style.width = " 100px " ;62 globalDiv.style.fontSize = " 90% " ; 63 globalDiv.style.position = " absolute " ;64 globalDiv.style.left = x + " px " ;65 globalDiv.style.top = y + " px " ;66 globalDiv.style.visibility = " hidden " ;67 globalDiv.style.zIndex = 10000 ;68 divFormatted = true ;69 70 }71 }72 return globalDiv;73 }74 75 function showQueryDiv(resultArray)76 {77 var div = getDiv(divName);78 while ( div.childNodes.length > 0 )79 {80 div.removeChild(div.childNodes[ 0 ]);81 }82 for (var i = 0 ; i < resultArray.length; i ++ )83 {84 var result = document.createElement( " div " );85 result.style.cursor = " pointer " ;86 result.style.padding = " 2px 0px 2px 0px " ;87 result.style.width = div.style.width; // Add width 88 _unhighlightResult(result);89 result.onmousedown = selectResult;90 result.onmouseover = highlightResult;91 result.onmouseout = unhighlightResult; 92 93 var value = document.createElement( " span " );94 value.className = " value " ;95 value.style.textAlign = " left " ;96 value.style.fontWeight = " bold " ; 97 value.innerHTML = resultArray[i];98 result.appendChild(value);99 div.appendChild(result);
100 }
101 showDiv(resultArray.length > 0 );
102 }
103
104 function selectResult()
105 {
106 _selectResult( this );
107 }
108 function _selectResult( item )
109 {
110 var spans = item.getElementsByTagName( " span " );
111 if ( spans )
112 {
113 for (var i = 0 ; i < spans.length; i ++ )
114 {
115 if ( spans[i].className == " value " )
116 {
117 queryField.value = spans[i].innerHTML;
118 lastVar = val = escape( queryField.value );
119 mainLoop();
120 queryField.focus();
121 showDiv( false );
122 return ;
123 }
124 }
125 }
126 }
127
128 function highlightResult()
129 {
130 _highlightResult( this );
131 }
132
133 function _highlightResult( item )
134 {
135 item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
136 }
137
138 function unhighlightResult()
139 {
140 _unhighlightResult( this );
141 }
142
143 function _unhighlightResult( item )
144 {
145 item.style.backgroundColor = DIV_BG_COLOR;
146 }
147
148 function showDiv( show )
149 {
150 var div = getDiv( divName );
151 if ( show )
152 {
153 div.style.visibility = " visible " ;
154 }
155 else
156 {
157 div.style.visibility = " hidden " ;
158 }
159 adjustiFrame();
160 }
161
162 function hideDiv()
163 {
164 showDiv( false );
165 }
166
167 function keypressHandler(evt)
168 {
169 var div = getDiv( divName );
170 if ( div.style.visibility == " hidden " )
171 {
172 return true ;
173 }
174 if ( ! evt && window. event )
175 {
176 evt = window. event ;
177 }
178 var key = evt.keyCode;
179
180 var KEYUP = 38 ;
181 var KEYDOWN = 40 ;
182 var KEYENTER = 13 ;
183 var KEYTAB = 9 ;
184 if (( key != KEYUP ) && ( key != KEYDOWN ) && ( key != KEYENTER ) && ( key != KEYTAB ))
185 {
186 return true ;
187 }
188 var selNum = getSelectedSpanNum( div );
189 var selSpan = setSelectedSpan( div, selNum );
190 if ( key == KEYENTER || key == KEYTAB )
191 {
192 if ( selSpan )
193 {
194 _selectResult(selSpan);
195 }
196 evt.cancelBubble = true ;
197 return false ;
198 }
199 else
200 {
201 if ( key == KEYUP)
202 {
203 selSpan = setSelectedSpan( div, selNum - 1 );
204 }
205 if ( key == KEYDOWN )
206 {
207 selSpan = setSelectedSpan( div, selNum + 1 );
208 }
209 if ( selSpan )
210 {
211 _highlightResult( selSpan );
212 }
213 }
214 showDiv( true );
215 return true ;
216 }
217
218 function getSelectedSpanNum( div )
219 {
220 var count = - 1 ;
221 var spans = div.getElementsByTagName( " div " );
222 if ( spans )
223 {
224 for ( var i = 0 ; i < spans.length; i ++ )
225 {
226 count ++ ;
227 if ( spans[i].style.backgroundColor != div.style.backgroundColor )
228 {
229 return count;
230 }
231 }
232 }
233 return - 1 ;
234 }
235 function setSelectedSpan( div, spanNum )
236 {
237 var count = - 1 ;
238 var thisDiv;
239 var divs = div.getElementsByTagName( " div " );
240 if ( divs )
241 {
242 for ( var i = 0 ; i < divs.length; i ++ )
243 {
244 if ( ++ count == spanNum )
245 {
246 _highlightResult( divs[i] );
247 thisDiv = divs[i];
248 }
249 else
250 {
251 _unhighlightResult( divs[i] );
252 }
253 }
254 }
255 return thisDiv;
256 }
257
258 function adjustiFrame()
259 {
260 if ( ! document.getElementById(ifName))
261 {
262 var newNode = document.createElement( " iFrame " );
263 newNode.setAttribute( " id " , ifName);
264 newNode.setAttribute( " src " , " javascript:false; " );
265 newNode.setAttribute( " scrolling " , " no " );
266 newNode.setAttribute( " frameborder " , " 0 " );
267 document.body.appendChild( newNode );
268 }
269 iFrameDiv = document.getElementById( ifName );
270 var div = getDiv( divName );
271 try
272 {
273 iFrameDiv.style.position = " absolute " ;
274 iFrameDiv.style.width = div.offsetWidth;
275 iFrameDiv.style.height = div.offsetHeight;
276 iFrameDiv.style.top = div.style.top;
277 iFrameDiv.style.left = div.style.left;
278 iFrameDiv.style.zIndex = div.style.zIndex - 1 ;
279 iFrameDiv.style.visibility = div.style.visibility;
280 }
281 catch (e)
282 {}
283 }2. 页面文件 AutoQueryTextBox.aspx 代码如下:
< head runat = " server " >2 < title > AjaxPro.NET AutoQueryTextBox </ title >3 < script language = " javascript " src = " lookup.js " ></ script >4 < script language = " jscript " >5 mainLoop = function()6 {7 val = escape( queryField.value );8 if ( lastVal != val )9 {
10 var response = _Default.GetSearchItems( val );
11 showQueryDiv( response.value );
12 lastVal = val;
13 }
14 setTimeout( ' mainLoop() ' , 100 );
15 return true ;
16 }
17 </ script >
18 </ head >
19 < body >
20 < form id = " form1 " runat = " server " >
21 < div >
22 < asp:Panel ID = " Panel1 " runat = " server " BackColor = " #C0C0FF " Font - Bold = " True " Font - Overline = " False "
23 Font - Size = " XX-Large " Height = " 37px " Width = " 475px " >
24 AjaxPro.NET AutoQueryTextBox </ asp:Panel >
25 < br />
26 < hr align = " left " style = " width: 473px " />
27 < br />
28 输入查询字串: & nbsp; & nbsp; < asp:TextBox ID = " txSearch " runat = " server "
29 Width = " 134px " ></ asp:TextBox >& nbsp; < br />
30 < br />
31 </ div >
32 < script language = " jscript " >
33 InitQueryCode( "" + ' <%= txSearch.ClientID %> ' + "" );
34 </ script >
35 </ form >
36 </ body >3.后台文件 AutoQueryTextBox.aspx.cs 代码如下:
1 public partial class _Default : System.Web.UI.Page 2 {3 protected void Page_Load( object sender, EventArgs e)4 { 5 Utility.RegisterTypeForAjax( typeof (_Default));6 }7 8 [AjaxMethod()] // or [AjaxPro.AjaxMethod] 9 public ArrayList GetSearchItems( string strQuery )
10 {
11 // 生成数据源
12 ArrayList items = new ArrayList();
13 items.Add( " King " );
14 items.Add( " Rose " );
15 items.Add( " James " );
16 items.Add( " Elvis " );
17 items.Add( " Jim " );
18 items.Add( " John " );
19 items.Add( " Adams " );
20
21 // 筛选数据
22 ArrayList selectItems = new ArrayList();
23 foreach ( string str in items )
24 {
25 if (str.ToUpper().IndexOf(strQuery.ToUpper()) == 0 )
26 {
27 selectItems.Add(str);
28 }
29 }
30 return selectItems;
31 }
32 }AjaxPro.NET使用,方便的在客户端直接调用服务端方法相关推荐
- android binder - 客户端(c++层) 调用 服务端(java层)，服务端回调客户端 例子
学习了: android binder - 客户端(java层) 调用 服务端(c++层) 例子 http://blog.csdn.net/ganyue803/article/details/4131 ...
- http 缓存分为客户端缓存和服务端缓存
http 缓存分为客户端缓存和服务端缓存 1. 客户端缓存 客户端缓存指的是浏览器缓存, 浏览器缓存是最快的缓存, 因为它直接从本地获取(但有可能需要发送一个请求), 它的优势是可以减少网络流量, 加 ...
- 解决android客户端上传图片到服务端时，图片损坏的问题
解决android客户端上传图片到服务端时,图片损坏的问题 参考文章: (1)解决android客户端上传图片到服务端时,图片损坏的问题 (2)https://www.cnblogs.com/cnbl ...
- grpc 客户端的context 服务端获取不到_MLamp;DEV[10] | gRPC的应用
上一期和大家谈到了gRPC的快速开始,我么哪知道了gRPC是什么以及怎么快速启动,那么现在,我们来看看这个玩意具体内部是怎么运作的,这里我们同样以helloworld这个为例子来去谈.首先上期内容在这 ...
- Unity中进行网络通信：三：unity客户端和Unity服务端互相发消息
目录 一.目的 1.想知道:Unity中进行网络通信:unity客户端和Unity服务端互相发消息 二.参考 1.unity3D中使用Socket进行数据通信(三) 三.操作:一:完成:在同一个Uni ...
- Linux Socket 两个客户端通信，服务端作为中转
Socket 两个客户端通信,服务端作为中转 Socket两个客户端通信,服务端作为中转,通过sockket的通信原理,简单的做了一个以c语言写的服务端,与自己制作的Android app 与树莓派为 ...
- 附件统一处理starter,含附件客户端和附件服务端
文章目录 附件统一处理starter,可分别作为附件客户端和附件服务端使用 一 关于项目中附件的概述 二 概要描述 三 附件starter功能划分 3.1 附件服务器,真实的存储附件 3.1.1 为前 ...
- RemObjects（一）客户端远程调用服务端接口过程
RemObjects SDK 是高度封装的产物,对OOP发挥极致. 本文将以RemObjects SDK最简单的DEMO--FirstSample为例, 介绍客户端是如何完成远程调用服务端接口的全过程 ...
- Oracle客户端监听服务配置方法
Oracle客户端监听服务配置方法 可直接修改tnsnames.oRA文件 Oracle客户端中一般有两个tnsnames.oRA文件,配置监听要修改的是Oracle客户端家目下的$ORACLE_HO ...
最新文章
- for循环语句的用法
- [图示]营销理论：不同时代的用户如何接受一个新事物？
- python下的所有文件_python批量复制文件夹下所有文件大小
- java多线程之CountDownLatch倒数闸门
- 62. 不同路径（JavaScript）
- setfacl 权限导出_setfacl getfacl 将某个目录的访问权限赋值给某个用户
- Sql Full-Text Filter
- 计算机端口详细介绍（整理版）
- 企业—pacemaker基本概念及其原理
- 金圣叹“不亦快哉”三十三则
- python输入语句没有定义_【20200925】Python基本语法
- matlab画中国地图深浅,matlab绘制中国地图
- context，request,response的作用，存活时间，简单上传下载操作
- Java使用Separator替代符号拼接
- wav 转换到 flac
- “手术机器人”掀起融资潮，行业正加速打破“达芬奇”神话
- 【好记性不如烂笔头】Spring框架内容问答的形式回忆-长期更新
- 机器学习-有监督无监督
- 设计师怎么优雅的薅羊毛——技能get!!
- 快消品企业为什么要上专业的费用管理系统
热门文章
- 使用无标注的数据训练Bert
- “网络白痴”初学SEO成长经验心得
- RTKLIB中利用Kalman滤波进行伪距单点定位
- 电脑c盘清理、电脑清理、电脑C盘成功瘦身15G左右
- 将网页分享到微信带有缩略图和简介
- 数字逻辑综合工具-DC-11——一些其它命令和综合之后的文件
- 华为服务器网口显示down,[已解决]华为三层交换机新建vlan后端口总是down的状态[已解决]~有好心人帮忙看看吗？谢谢~ - 华为技术论坛 - 51CTO技术论坛_中国领先的IT技术社区...
- 剪映电脑版详细使用教程，让视频剪辑变得更简单了
- 从OA到COP，致远互联成引领行业的“灯塔”
- STM32 驱动温湿度传感器 HTU21D