(一). 运行效果如下:
(二). 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 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 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 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 代码如下:
1
<
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 >
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 }
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 }
(五). 示例代码下载
见信箱