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  }

(五). 示例代码下载

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