AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)

学习 [征服Ajax——Web 2.0快速入门与项目实践（.net）]

(一). 运行效果如下:

(二). AjaxPro.NET简介

AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL引用并进行简单的配置,

即可以非常方便的在客户端直接调用服务端方法, 实现验证目的.

(三).使用AjaxPro.NET预配置

1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).

2. 在Web.config文件中添加以下配置,

1 < httpHandlers >
2 < addverb = " 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 ArrayListGetSearchItems( string strQuery)
3 {
4 // 生成数据源
5 ArrayListitems = new ArrayList();
6 items.Add( " King " );
7 items.Add( " Rose " );
8 return items;
9 }
10

就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:

varreturnValue = 后台代码类名.GetSearchItems(参数);

(四). 详细代码如下:

1. 客户端脚本代码如下:

1 /// /JScriptFile
2 varDIV_BG_COLOR = " #FFE0C0 " ;
3 varDIV_HIGHLIGHT_COLOR = " #6699FF " ;
4 varDIV_FONT = " Arial " ;
5 varDIV_PADDING = " 2px " ;
6 varDIV_BORDER = " 1pxsolid#CCC " ;
7 varqueryField;
8 vardivName;
9 varifName;
10 varlastVal = "" ;
11 varval = "" ;
12 varglobalDiv;
13 vardivFormatted = false ;
14
15 functionInitQueryCode(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 functiongetDiv(divID)
36 {
37 if ( ! globalDiv)
38 {
39 if ( ! document.getElementById(divID))
40 {
41 varnewNode = document.createElement( " div " );
42 newNode.setAttribute( " id " ,divID);
43 document.body.appendChild(newNode);
44 }
45 globalDiv = document.getElementById(divID);
46 varx = queryField.offsetLeft;
47 vary = queryField.offsetTop + queryField.offsetHeight;
48 varparent = 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 functionshowQueryDiv(resultArray)
76 {
77 vardiv = getDiv(divName);
78 while (div.childNodes.length > 0 )
79 {
80 div.removeChild(div.childNodes[ 0 ]);
81 }
82 for (vari = 0 ;i < resultArray.length;i ++ )
83 {
84 varresult = document.createElement( " div " );
85 result.style.cursor = " pointer " ;
86 result.style.padding = " 2px0px2px0px " ;
87 result.style.width = div.style.width; // Addwidth
88 _unhighlightResult(result);
89 result.onmousedown = selectResult;
90 result.onmouseover = highlightResult;
91 result.onmouseout = unhighlightResult;
92
93 varvalue = 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 functionselectResult()
105 {
106 _selectResult( this );
107 }
108 function_selectResult(item)
109 {
110 varspans = item.getElementsByTagName( " span " );
111 if (spans)
112 {
113 for (vari = 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 functionhighlightResult()
129 {
130 _highlightResult( this );
131 }
132
133 function_highlightResult(item)
134 {
135 item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
136 }
137
138 functionunhighlightResult()
139 {
140 _unhighlightResult( this );
141 }
142
143 function_unhighlightResult(item)
144 {
145 item.style.backgroundColor = DIV_BG_COLOR;
146 }
147
148 functionshowDiv(show)
149 {
150 vardiv = 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 functionhideDiv()
163 {
164 showDiv( false );
165 }
166
167 functionkeypressHandler(evt)
168 {
169 vardiv = 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 varkey = evt.keyCode;
179
180 varKEYUP = 38 ;
181 varKEYDOWN = 40 ;
182 varKEYENTER = 13 ;
183 varKEYTAB = 9 ;
184 if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
185 {
186 return true ;
187 }
188 varselNum = getSelectedSpanNum(div);
189 varselSpan = 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 functiongetSelectedSpanNum(div)
219 {
220 varcount = - 1 ;
221 varspans = div.getElementsByTagName( " div " );
222 if (spans)
223 {
224 for (vari = 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 functionsetSelectedSpan(div,spanNum)
236 {
237 varcount = - 1 ;
238 varthisDiv;
239 vardivs = div.getElementsByTagName( " div " );
240 if (divs)
241 {
242 for (vari = 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 functionadjustiFrame()
259 {
260 if ( ! document.getElementById(ifName))
261 {
262 varnewNode = 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 vardiv = 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 < headrunat = " server " >
2 < title > AjaxPro.NETAutoQueryTextBox </ title >
3 < scriptlanguage = " javascript " src = " lookup.js " ></ script >
4 < scriptlanguage = " jscript " >
5 mainLoop = function()
6 {
7 val = escape(queryField.value);
8 if (lastVal != val)
9 {
10 varresponse = _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 < formid = " form1 " runat = " server " >
21 < div >
22 < asp:PanelID = " Panel1 " runat = " server " BackColor = " #C0C0FF " Font - Bold = " True " Font - Overline = " False "
23 Font - Size = " XX-Large " Height = " 37px " Width = " 475px " >
24 AjaxPro.NETAutoQueryTextBox </ asp:Panel >
25 < br />
26 < hralign = " left " style = " width:473px " />
27 < br />
28 输入查询字串: & nbsp; & nbsp; < asp:TextBoxID = " txSearch " runat<span styl

分享到：

Alexa 排名万能查询系统 | AjaxPro.NET框架实现服务端即时数据验证(A ...

• 2006-08-22 20:05
• 浏览 175
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论