使用AjaxPro.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]
2publicArrayListGetSearchItems(stringstrQuery)
3{
4//生成数据源
5ArrayListitems=newArrayList();
6items.Add("King");
7items.Add("Rose");
8returnitems;
9}
10
就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
varreturnValue=后台代码类名.GetSearchItems(参数);(四). 详细代码如下:
1. 客户端脚本代码如下:
1////JScriptFile
2varDIV_BG_COLOR="#FFE0C0";
3varDIV_HIGHLIGHT_COLOR="#6699FF";
4varDIV_FONT="Arial";
5varDIV_PADDING="2px";
6varDIV_BORDER="1pxsolid#CCC";
7varqueryField;
8vardivName;
9varifName;
10varlastVal="";
11varval="";
12varglobalDiv;
13vardivFormatted=false;
14
15functionInitQueryCode(queryFieldName,hiddenDivName)
16{
17queryField=document.getElementById(queryFieldName);
18queryField.onblur=hideDiv;
19queryField.onkeydown=keypressHandler;
20queryField.autocomplete="off";
21
22if(hiddenDivName)
23{
24divName=hiddenDivName;
25}
26else
27{
28divName="querydiv";
29}
30
31ifName="queryiframe";
32setTimeout("mainLoop()",100);
33}
34
35functiongetDiv(divID)
36{
37if(!globalDiv)
38{
39if(!document.getElementById(divID))
40{
41varnewNode=document.createElement("div");
42newNode.setAttribute("id",divID);
43document.body.appendChild(newNode);
44}
45globalDiv=document.getElementById(divID);
46varx=queryField.offsetLeft;
47vary=queryField.offsetTop+queryField.offsetHeight;
48varparent=queryField;
49while(parent.offsetParent)
50{
51parent=parent.offsetParent;
52x+=parent.offsetLeft;
53y+=parent.offsetTop;
54}
55if(!divFormatted)
56{
57globalDiv.style.backgroundColor=DIV_BG_COLOR;
58globalDiv.style.fontFamily=DIV_FONT;
59globalDiv.style.padding=DIV_PADDING;
60globalDiv.style.border=DIV_BORDER;
61globalDiv.style.width="100px";
62globalDiv.style.fontSize="90%";
63globalDiv.style.position="absolute";
64globalDiv.style.left=x+"px";
65globalDiv.style.top=y+"px";
66globalDiv.style.visibility="hidden";
67globalDiv.style.zIndex=10000;
68divFormatted=true;
69
70}
71}
72returnglobalDiv;
73}
74
75functionshowQueryDiv(resultArray)
76{
77vardiv=getDiv(divName);
78while(div.childNodes.length>0)
79{
80div.removeChild(div.childNodes[0]);
81}
82for(vari=0;i<resultArray.length;i++)
83{
84varresult=document.createElement("div");
85result.style.cursor="pointer";
86result.style.padding="2px0px2px0px";
87result.style.width=div.style.width;//Addwidth
88_unhighlightResult(result);
89result.onmousedown=selectResult;
90result.onmouseover=highlightResult;
91result.onmouseout=unhighlightResult;
92
93varvalue=document.createElement("span");
94value.className="value";
95value.style.textAlign="left";
96value.style.fontWeight="bold";
97value.innerHTML=resultArray[i];
98result.appendChild(value);
99div.appendChild(result);
100}
101showDiv(resultArray.length>0);
102}
103
104functionselectResult()
105{
106_selectResult(this);
107}
108function_selectResult(item)
109{
110varspans=item.getElementsByTagName("span");
111if(spans)
112{
113for(vari=0;i<spans.length;i++)
114{
115if(spans[i].className=="value")
116{
117queryField.value=spans[i].innerHTML;
118lastVar=val=escape(queryField.value);
119mainLoop();
120queryField.focus();
121showDiv(false);
122return;
123}
124}
125}
126}
127
128functionhighlightResult()
129{
130_highlightResult(this);
131}
132
133function_highlightResult(item)
134{
135item.style.backgroundColor=DIV_HIGHLIGHT_COLOR;
136}
137
138functionunhighlightResult()
139{
140_unhighlightResult(this);
141}
142
143function_unhighlightResult(item)
144{
145item.style.backgroundColor=DIV_BG_COLOR;
146}
147
148functionshowDiv(show)
149{
150vardiv=getDiv(divName);
151if(show)
152{
153div.style.visibility="visible";
154}
155else
156{
157div.style.visibility="hidden";
158}
159adjustiFrame();
160}
161
162functionhideDiv()
163{
164showDiv(false);
165}
166
167functionkeypressHandler(evt)
168{
169vardiv=getDiv(divName);
170if(div.style.visibility=="hidden")
171{
172returntrue;
173}
174if(!evt&&window.event)
175{
176evt=window.event;
177}
178varkey=evt.keyCode;
179
180varKEYUP=38;
181varKEYDOWN=40;
182varKEYENTER=13;
183varKEYTAB=9;
184if((key!=KEYUP)&&(key!=KEYDOWN)&&(key!=KEYENTER)&&(key!=KEYTAB))
185{
186returntrue;
187}
188varselNum=getSelectedSpanNum(div);
189varselSpan=setSelectedSpan(div,selNum);
190if(key==KEYENTER||key==KEYTAB)
191{
192if(selSpan)
193{
194_selectResult(selSpan);
195}
196evt.cancelBubble=true;
197returnfalse;
198}
199else
200{
201if(key==KEYUP)
202{
203selSpan=setSelectedSpan(div,selNum-1);
204}
205if(key==KEYDOWN)
206{
207selSpan=setSelectedSpan(div,selNum+1);
208}
209if(selSpan)
210{
211_highlightResult(selSpan);
212}
213}
214showDiv(true);
215returntrue;
216}
217
218functiongetSelectedSpanNum(div)
219{
220varcount=-1;
221varspans=div.getElementsByTagName("div");
222if(spans)
223{
224for(vari=0;i<spans.length;i++)
225{
226count++;
227if(spans[i].style.backgroundColor!=div.style.backgroundColor)
228{
229returncount;
230}
231}
232}
233return-1;
234}
235functionsetSelectedSpan(div,spanNum)
236{
237varcount=-1;
238varthisDiv;
239vardivs=div.getElementsByTagName("div");
240if(divs)
241{
242for(vari=0;i<divs.length;i++)
243{
244if(++count==spanNum)
245{
246_highlightResult(divs[i]);
247thisDiv=divs[i];
248}
249else
250{
251_unhighlightResult(divs[i]);
252}
253}
254}
255returnthisDiv;
256}
257
258functionadjustiFrame()
259{
260if(!document.getElementById(ifName))
261{
262varnewNode=document.createElement("iFrame");
263