学习 [征服Ajax——Web 2.0快速入门与项目实践(.net)]
(一). 运行效果如下:
(二). AjaxPro.NET简介
AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL引用并进行简单的配置,
即可以非常方便的在客户端直接调用服务端方法, 实现验证目的.
(三).使用AjaxPro.NET预配置
1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).
2. 在Web.config文件中添加以下配置,
1
<
httpHandlers
>
2 < add verb = " POST,GET " path = " ajaxpro/*.ashx " type = " AjaxPro.AjaxHandlerFactory, AjaxPro " />
3 </ httpHandlers >
2 < add verb = " POST,GET " path = " ajaxpro/*.ashx " type = " AjaxPro.AjaxHandlerFactory, AjaxPro " />
3 </ httpHandlers >
3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:
AjaxPro.Utility.RegisterTypeForAjax(
typeof
(_Default));
4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:
1
[AjaxMethod()]
//
or [AjaxPro.AjaxMethod]
2 public ArrayList GetSearchItems( string strQuery )
3 {
4 // 生成数据源
5 ArrayList items = new ArrayList();
6 items.Add( " King " );
7 items.Add( " Rose " );
8 return items ;
9 }
10
2 public ArrayList GetSearchItems( string strQuery )
3 {
4 // 生成数据源
5 ArrayList items = new ArrayList();
6 items.Add( " King " );
7 items.Add( " Rose " );
8 return items ;
9 }
10
就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
var returnValue
=
后台代码类名.GetSearchItems(参数);
(四). 详细代码如下:
1. 客户端脚本代码如下:
1
///
/ JScript File
2 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 else
27 {
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
2 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 else
27 {
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