AJAX基本應用之:根據輸入內容自動填滿下拉框

要在ASP.NET中實現AJAX,請先下載ajax.dll並引用，並且最好對AJAX的基本原理有所瞭解。有一本電子本叫《ajax基礎教程》，網上有下的，講得很清楚。裡面代碼是JAVA版，不過沒有關係。下載地址(試試)： http://www.bomoo.com/ebook/ebook.php/5045.html http://www.leafz.com/article.asp?id=2239         這是AJAX的典型應用之一，即根據使用者在輸入框內輸入的內容來搜尋資料庫，然後把內容顯示出來，當然不一定非要顯示在下拉框中，也可以放在其它的地方，實際上這就是JavaScript控制的部分了。         比如我覺得CSDN論壇可以加上這個功能，當發貼者要發貼問問題時，可以用AJAX根據使用者輸入的內容動態到後台查詢資料庫，將查詢到的結果，也就是類似的問題顯示在頁面上，這樣使用者根據搜尋到的文章就可以把問題解決掉，可以節約時間。         我們這裡只是把搜尋到的內容填充到下拉框中，以便使用者精確定位。效果圖以前發過。 如下：使用者輸入學號，動態填充填充下拉框。

 

  一.AJAX可以用JavaScript來調用伺服器端方法，如果要想使伺服器端的方法被JS調用，必須做以下兩件事情
1.在頁載入事件期間,通過Ajax.Utility.RegisterTypeForAjax註冊包含服務端函數的類，我們的頁面後台是stuInfoView.aspx.cs，等一會要調用的伺服器端函數也在這裡面，所以用下面的語句。（注意是在private void Page_Load(object sender, System.EventArgs e)裡面寫的）   Ajax.Utility.RegisterTypeForAjax(typeof(stuInfoView));   2.給將要被JS調用的函數標上Ajax.AjaxMethodAttribute，由於以Attribute結尾的可以省略（見MSDN“中繼資料”），也可以寫成Ajax.AjaxMethod。我們要用到的服務端函數是getMatchedStuId()，於是在像如下那樣定義 [Ajax.AjaxMethod()]
public   static   string [] getMatchedStuId( string  stuId)
{
/* 這個就是JS要調用的函數。實際上是接受JS參數stuId,然後搜尋資料庫，
 * 將滿足條件的記錄存入dataset再放到string數組中，再返回給用戶端JS，由JS接著處理(填充到下拉框中)
 * 下面的搜尋只是方法之一
 * 實際上最好用SQL語句(like)直接把相關記錄搜尋出來
  */
 DataSet ds  =  ( new  projClass()).getStuInfo(); // 這裡返回一個dataset,即所有的記錄
 DataRow[] drs  =  ds.Tables[ " stuInfo " ].Select( " stuId like ' " + stuId + " %' " ); // 過濾，只留下滿足要求的
  // 將結果放入一個一個string數組中，返回給用戶端的JS
  if (drs  !=   null )
  {
    string [] result  =   new   string [drs.Length];
     for ( int  i = 0 ;i < drs.Length;i ++ )
     result[i]  =  Convert.ToString(drs[i][ " stuId " ]);
    return  result;
  }
    return   null ;
}

二.因為使用者輸入內容後要馬上響應到後台，所在要給輸入框(tbx_query)加上keyup事件，使用者一輸入值就把輸入框的值送到後台去搜尋。由於是伺服器控制項，加keyup事件如下：(在CS檔案中)
this.tbx_query.Attributes.Add("onkeyup","matchStuId(this.value)");
     三.用戶端JavaScript代碼
1.matchStuId(stuId),這就是keyup事件，只要焦點在tbx_query中，並且使用者按下了鍵盤，即調用此函數。 function matchStuId(stuId)
{
  /* 關於下面的這一句可能好多人不明白，stuInfoView即背景類名了，getMatchedStuId是後台允許用戶端JS調用的函數
 *但是你可能要問，後台只有一個參數，怎麼這裡有兩個。小山的blog上的確有人這樣問
 *可以這樣解釋，前面的參數是用到的參數，最後的那個是服務端返回的內容到達用戶端後將要調用的JS函數，它接受伺服器端返回的內容
 *實際上就是XMLHttpRequest(AJAX技術的核心)對象readyStatus變為4時，用戶端該怎麼去處理伺服器端返回的內容
 *我們用CallBack這個JS函數來處理返回的內容，下面會提到，於是這樣寫。說得很清楚吧。
  */
 stuInfoView.getMatchedStuId(stuId,CallBack);
   
}
  2.CallBack，接受後台函數傳遞的內容進行一系列處理 function  CallBack(response) // response是後台傳遞過來的內容，也就是後台函數getMatchedStuId返回的一個string數組
{
  var  matchddl  =  document.Form1.ddl; // 即我們要填充的下拉框，這個下拉框是放在一個div中的。
  if (response.value.length  !=   0 )
 {
  setdiv(); // 對包含下拉框的div進行位置處理，可不能讓它隨便在頁面上放
  matchddl.options.length  =   0 ;
  matchddl.size  =  response.value.length; // 這句話，你去掉試試。可能會不爽，它是控制下拉框長度的，免得有捲軸
   for ( var  i = 0 ;i < response.value.length; ++ i)
  matchddl.options[matchddl.options.length]  =   new  Option(response.value[i]); // 將string數組裡面的元素填充到下拉框中
 }
  else  document.getElementById( " ddldiv " ).style.display  =   ' none ' ; // 如果用戶端沒有返回內容，div不可見，即下拉框不可見
}

3.setdiv()對層進行處理的函數 function  setdiv()
{
  // 根據輸入框的位置來設定div的位置，不用解釋了。
  var  tbx  =  document.Form1.tbx_query;
  var  ddldiv  =  document.getElementById( " ddldiv " );
 ddldiv.style.display  =   '' ;
  if (tbx.value  == "" )
 ddldiv.style.display = ' none ' ; // 如果輸入框被清空了，也不可見
  var  etop  =  tbx.offsetTop;
  var  eleft  =  tbx.offsetLeft;
 ddldiv.style.top  =  etop + 180 ;
 ddldiv.style.left  =  eleft + 35 ;
}

4.下拉框點擊事件 function  selectthis(sel)
{
  // 下拉框點擊事件，使用者點擊了下拉框後，把點擊的那一條記錄顯示到輸入框中
 document.getElementById( ' tbx_query ' ).value  =  sel.options[sel.selectedIndex].text;
  
}

四.用戶端層與下拉框的HTML代碼，這段代碼隨便扔在哪裡面都可以，反正它在頁面上顯示的位置不是它自己決定的。 < div  id ="ddldiv"  style =" DISPLAY: none;Z-INDEX: 99;POSITION: absolute" >< SELECT  id ="ddl"  onclick ="selectthis(this)" ></ SELECT ></ div >

over。