具有Ajax自动建议功能的TextBox控件(附源码)

======================================================
注：本文源代码点此下载
======================================================

近期准备翻译一系列ajax、javascript方面相关的web开发文章,以强化专业学习和提升英语读写能力,欢迎大家拍砖挑错,不甚感激!

原文链接:http://codeproject.com/kb/ajax/ajaxautosuggest.aspx版权归cassio alves所有

源码下载

引言

这是我前段时间制作的具有ajax 自动建议功能的asp.net文本框控件,它基于（anthem.net）控件库制作的。

背景

当我们在开发企业级web项目时候,我们经常需要让用户从一大堆目录列表中选择其中一项,比如:在一个订单窗体上,用户必须能从众多客户中选择一位。出于性能的考虑,加载一个含50000项的dropdownlist控件肯定会让人发疯的。还有一种可采取方法就是打开一个新的窗体供用户查找和选择所需客户。以前我曾尝试过这种方式,但是用户常常发现它非常麻烦,迫切需要一个更好的解决办法。

方案

ajax技术的迅速发展使得这个问题变得非常容易解决。自动建议功能的文本框会完全满足这一要求,用户输入所需客户姓名的一部分内容,该控件会自动调整显示匹配的部分。然而,我还没有发现这样的服务器控件能完全满足我的要求,我需要自动建议的文本框服务器控件具有如下特点:

l

内置有效性验证功能

l

基于模板来提供内容

l

能够绑定各种数据源(集合、数据表等)

l

能有dropdownlist控件效果

l

和anthem.net平滑集成

l

能显示题头

l

无需调用webservices服务

控件

该个性化的控件基于anthem库创建而成。我决定采用anthem框架,是因为最近我一直在项目中使用它。atlas目前还不够成熟,与anthem相比,后者更容易上手、功能更强大。anthem库有了官方的autosuggest控件,但是我还没有正式使用,如果你还不熟悉anthem.net框架,我鼓励你体验一下,它非常简洁但效果很好。它的javascriptoo模型基于另一个免费autosuggest控件而创建的,你可以访问该站点了解该控件,我发现它非常优雅,但是没有我需要的某些功能。

安装

你只需要在项目中添加anthem.dll和anthem.autosuggest.dll引用,就可以正常使用了,提供下载的文件包含了dll、autosuggest控件的源代码和示例项目的源代码。

示例代码

你所要做的第一件事就是把该控件添加到aspx页面,可以通过拖拉可视化控件的方式,也可以在aspx源文件中直接写标签代码。我没有添加相关的设计视图支持,就是因为我认为你能够忍耐aspx源码 :)。在该例中,我们使用autosuggest控件来显示各种各样的名称,用户从中选择一个他最偏爱的。

1 anthem:autosuggestbox runat="server"

2id="asbfavoriteband" datakeyfield="id"

3textboxdisplayfield="name" autocallback="true"

4itemnotfoundmessage="item not found!" >

5itemtemplate>

6# ((band)container.dataitem).name %>

7itemtemplate>

8 anthem:autosuggestbox>

9

我认为绝大部分属性名的含义都一目了然,建议你熟悉所有属性并熟练使用它们,对那些不熟悉anthem.net框架的人来说,autocallback属性表示所选内容发生改变之后,autosuggest控件将向服务器触发一次回调,它等同于普通asp.net控件中的autopostback属性,你还可以象在repeater,、datalist 、datagrid中一样使用itemtemplate。datakeyfield属性表示控件用来设置selectedvalue属性的键字段。

完成第一步之后,开始处理相应事件。最重要的处理事件是textchanged,它完成建议列表的填充。另一个重要的事件是selectvaluechanged,在你改变当前值的时候触发该事件,为了封装处理这些操作,需要在oninit方法中完成下面的代码:

1 protected override void oninit(eventargs e)

2 {

3base.oninit(e);

4this.asbfavoriteband.textchanged +=

5new anthem.autosuggestbox.textchangedeventhandler(

6asbfavoriteband_textchanged);

7

8this.asbfavoriteband.selectedvaluechanged +=

9new anthem.autosuggestbox.selectedvaluechangedhandler(

10asbfavoriteband_selectedvaluechanged);

11 }

12

下面是处理textchanged事件的代码:

1 void asbfavoriteband_textchanged(object source,

2anthem.autosuggesteventargs e)

3 {

4//creates a dataview from a datatable

5

6dataview dv = new dataview(_dtbands);

7

8//filters the datatable based on the currenttext property

9

10dv.rowfilter = string.format("bandname like '%{0}%'", e.currenttext);

11

12//sets the dataview as the control's datasource

13

14asbfavoriteband.datasource = dv;

15asbfavoriteband.databind();

16 }

17

在上面的代码片断中,你可以在autosuggest控件中用任一数据源。通常是查询数据库获得结果集,通过调用databind方法才能将建议列表显示在屏幕上。

值得关注的地方

无可置疑,这个控件要求我们对.net控件的工作原理有更进一步的理解,如:使用嵌入式web资源(图像、javascript和css文件),支持基于模板式提供内容,事件触发和处理javascript集成。

面向对象的javascript也值得一看,它的确使处理事情变得更容易。

源码下载

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/