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！