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               < 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