日期:2010-09-02  浏览次数:20557 次

  记得以前做asp的时候,常会碰到下拉框多级联动,比如说在注册的时候,需要选择省和城市,这就需要二级联动,那个时候一个普遍的做法就是利用javascript脚本来实现,先把数据从数据库中读取出来,放到javascript的数组中,在下拉框的onchange事件触发时,就可以直接从javascript的数组中读取想要的数据。后来在asp.net 1.0中开发时,这种方法也通用,但如果要多级的话,有一个很大的缺点,就是它需要把数据一次性全部读到javascript的数组中,如果数据非常庞大的话,这部分开销是很大的,有时候不把数据放到数据中中,而是直接写在javascript中,这样不易于维护,而且代码也太长,如果要开发可以无限级联的话,那更是比较头痛。自从asp,net 2.0问世后,开始学习新技术,发现asp,net2.0不仅在控件上,功能上都产生了大变化,而且在对javascript客户脚本的调用功能也更加强大了,特别是出现了ajax功能,即客户端回调功能(当然这只是一个小小的ajax功能,如果要实现功能更强大的无刷新可看atlas),利用这个特性可以很方便的开发现无限级联动的下拉框效果。

  1、先在数据库里建立相应的数据表如下:

 2、建立读取数据表的函数,这里就不写出来了,我想每个人都会有不同的方法去实现这一功能。
    3、接下来,我们就可以进行页面设置了,我们先做一个二级联动的效果,在页面上放置二个下拉框控件,上面一个为TestDropDownList,下面一个为Item1,再加入一个objectdatasource控件,用来读取parentId为0的所有记录绑定到TestDropDownList下拉框中,如下图:

  如果要使用客户端回调,必须要实现System.Web.UI.ICallbackEventHandler接口。

1public partial class Test : System.Web.UI.Page , System.Web.UI.ICallbackEventHandler
2{
  该接口下面,有二个方法:

  a)、void System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string eventArguent)

  该方法接收客户端传过来的参数enentArguent,这个参数好象只能是string型,并且没有返回值,我们可以根据传过来的参数,来执行相应的功能,在这里我们不能对页面进行重新绑定等操作,但能够跟数据库进行交互操作,如读取、删除、插入等操作,在本文的例子中,这里从客户端传过来的是parentId的值,再从数据库中读取parentId为相应值的所有记录,具体代码如下:

 1void System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string eventArguent)
 2    {
 3        DataSet ds = new GetData().TestByParentId(Convert.ToInt32(eventArguent));
 4        foreach(DataRow row in ds.Tables[0].Rows)
 5        {
 6            if (result.Equals(string.Empty))
 7            {
 8                result = row["pkId"] + "@" + row["name"].ToString();
 9            }
10            else
11            {
12                result = result + "," + row["pkId"] + "@" + row["name"].ToString();
13            }
14        }
15    }

  在这里,通过TestByParentId(Convert.ToInt32(enentArguent))函数读到相应数据,并把得到的数据作了一些处理,这个为什么要这样做,请继续往下看。这里的result为string型变量。

  b)、string System.Web.UI.ICallbackEventHandler.GetCallbackResult()

  这是第二个方法,该方法没有参数,返回只能返回string型。这个方法是用来数据回调的,上面那个方法接收客户端传过来的参数,进行处理后,还要把处理后的我们想要的数据传回到客户端去执行,才会有用。这里我们也看到了,由于该方法只能返回string型,而在下拉框必须有二个值,一个是DataValue,另一个是DataText,所以在上面的方法中,通过@符号,把这二个值合在一起,便于在客户端程序中进行分离。这个方法功能很简单,就是把result返回即可,如下:

1string System.Web.UI.ICallbackEventHandler.GetCallbackResult()
2    {
3        return result;
4    }

  现在我们实现了System.Web.UI.ICallbackEventHandler接口下的全部方法,接下来我们就可以来写客户端的程序了,用javascript来实现。这里主要也有二个方法,第一个方法用来接受下拉框控件的onchange事件触发响应,另一个用来接收string System.Web.UI.ICallbackEventHandler.GetCallbackResult()方法传递过来的result值,并做相应处理,把数据绑定到第二个下拉框中去,实现 二级联动。主要代码如下

  a)、第一个方法

1 function CallServer(input, context)
2    {
3        context.length=0;
4