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

(一). 运行效果如下:

(二). 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 

 

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

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. 页面文件 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>

       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 }

(五). 示例代码下载

        https://files.cnblogs.com/ChengKing/AjaxPro.NET_AutoQueryTextBox.rar