代码改变世界

自动完成服务端控件开发(1)

2010-05-24 13:54  Kevin-wang  阅读(1570)  评论(3)  编辑  收藏  举报

前一段时间由于项目需要搜索时要根据输入的内容自动从后台查询与之相关的数据，先上图看一看最终的效果：

image

这篇主要先介绍一下如何使用这个控件。

1.添加对DSKJ.Controls.DLL程序集的引用
  image
  引用后控件自动加入到工具箱中.
   image
2.属性和事件

属性
TargetControl
设置与此控件关联的TextBox控件ID

Opacity
设置或获取自动提示显示时的透明度，取值1至100

OnClientCompleted
获取或设置选择完成后在客户执行的客户端JavaScript脚本

Items
列表项目集合

DataTextField
获取或设置数据项显示的文本(字段或属性名)

DataValueField
获取或设置数据项值(字段或属性名)

DataHideField
获取或设置隐藏项值(字段或属性名)

事件
AsyncDataBind
异步数据绑定事件

3.设置属性的截图

        image

image

image  

4. 编写事件
    AsyncDataBind异步数据绑定事件，在此事件中进行数据的获取并进行数据的绑定操作；前端的参数将通过AysncDataBindEventArgs类型的参数传递的，此类型参数有一个ObjectArgs的String类型的属性；

protected void AutoCompleteExtender1_AsyncDataBind(object sender, DSKJ.Web.UI.WebControls.AsyncDataBindEventArgs e)
{
    string _Keyword = e.ObjectArgs.Trim();
    if (_Keyword.Trim() != string.Empty)
    {
        string _CommandText = string.Format(" Select top 10 * From DZ_Customers Where CustomerName like '%{0}%' ", _Keyword.Trim());
        DataTable _DT = ExecuteTable(_CommandText);
        AutoCompleteExtender1.DataSource = _DT;
        AutoCompleteExtender1.DataBind();
    }
}
5.客户端的扩展
   编写OnClientCompleted客户端完成事件.如下图：
       image
       会在客户端页面产生下面的JS脚本：其中AutoCompleteExtender1_obj为自动完成控件注册在客户端的ID;
       function OnCompleted(t,v,hv) 参数说明：t：选中项的Text文本，v代表选中项的Value值,hv代表隐藏域的值 
function AutoCompleteExtender1_obj_OnCompleted(t, v, hv) 
{
    try 
    {
        document.getElementById('TextBox2').value = t;  //此为在设计时写入的脚本，此意为将显示的文本赋值给名为TextBox2的文本框中
    }
    catch (err) 
    {
        alert('执行出现异常:' + err.description)
    }
}
源码下载：DSKJ.Controls.DLL
未完待续，下节将对控件类进行介绍.