学习 [征服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>
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
就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
(四). 详细代码如下:
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. 页面文件 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 输入查询字串: <asp:TextBox ID="txSearch" runat="server"
29 Width="134px"></asp:TextBox> <
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 }
(五). 示例代码下载
http://www.cnblogs.com/Files/ChengKing/AjaxPro.NET_AutoQueryTextBox.rar
