telerik的RadAutoCompleteBox控件学习三 yz

一、使用List<>

1.放置相关控件

2.在Page_Load中写下如下代码:

1 protected void Page_Load(object sender, EventArgs e)
2         {
3             RadAutoCompleteBox1.DataSource = new List<string>(){"Europe","America","China"};
4         }

然后在 F5 运行，

二、使用web服务

1.放置相关控件

2.在RadAutoCompleteBox控件中写下如下代码

1         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" Runat="server" DropDownHeight="150px" DropDownWidth="250px">
2             <WebServiceSettings Method="GetCompanyNames" Path="WebService1.asmx" />
3         </telerik:RadAutoCompleteBox>

其中<WebServiceSettings> 标签标识需要调用的web服务，其中的Method表示需要调用的操作，而Path则是被调用的web服务的路径。

3.新建web服务（主要其中的名称要和 Path 的一样或者你可以在新建好之后重新设置Path属性）

4.编写web服务代码

在编写前请将"[System.Web.Script.Services.ScriptService]"前面的注释去掉

代码如下:

 1 [WebMethod]
 2         public AutoCompleteBoxData GetCompanyNames(object context)
 3         {
 4             string searchstr = ((Dictionary<string, object>)context)["Text"].ToString();
 5             DataTable table = GetChildNodes(searchstr);
 6             List<AutoCompleteBoxItemData> result = new List<AutoCompleteBoxItemData>();
 7             foreach( DataRow row in table.Rows )
 8             {
 9                 AutoCompleteBoxItemData item = new AutoCompleteBoxItemData();
10                 item.Text = row["title"].ToString();
11                 item.Value = row["id"].ToString();
12                 result.Add(item);
13             }
14             AutoCompleteBoxData data = new AutoCompleteBoxData();
15             data.Items = result.ToArray();
16             return data;
17         }
18 
19         public DataTable GetChildNodes( string searchstr)
20         {
21             SqlCommand com = new SqlCommand("select * from t_radauto where title like @searchstr + '%'");
22             com.Parameters.AddWithValue("searchstr", searchstr);
23             return GetData(com);
24         }
25 
26         public DataTable GetData(SqlCommand com)
27         {
28             com.Connection = new SqlConnection("Data Source=2012-20130129NF\\SQLEXPRESS;Initial Catalog=TEST;Integrated Security=True");
29             SqlDataAdapter adapter = new SqlDataAdapter(com);
30             DataTable table = new DataTable();
31             adapter.Fill(table);
32             return table;
33         }

其中的数据库连接部分请根据自己的情况设定。

关于如何获得用户该文本框中的内容，其实很简单，因为该控件的实例有一个Text属性可以获得。

三、客户端事件

下面将是我们将要讲述的客户端的事件:

OnClientDropDownClosed

下拉框已经关闭时响应

OnClientDropDownClosing

下拉框正在关闭时响应

OnClientDropDownItemDataBound

下拉框中每显示一条数据则响应一次

OnClientDropDownOpened

下拉框已经打开时响应

OnClientDropDownOpening

下拉框正在打开时响应

OnClientEntryAdded

键入的值已经增加时响应

OnClientEntryAdding

键入的值正在增加时响应

OnClientEntryRemoved

键入的值已经移除时响应

OnClientEntryRemoving

键入的值正在移除时响应

OnClientLoad

控件初始化完成时响应

OnClientTextChanged

文本被修改时响应

下面我们来监听这些事件，看看他们的执行顺序，以及对应的事件如何。

无后台代码

下面是页面的代码:

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %>
  2 
  3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  4 
  5 <!DOCTYPE html>
  6 
  7 <html xmlns="http://www.w3.org/1999/xhtml">
  8 <head runat="server">
  9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 10     <title></title>
 11     <script type="text/javascript" id="telerikClientEvents1">
 12 //<![CDATA[
 13 
 14         function logEvent(val) {
 15             document.getElementById('log').innerHTML += (val+'<br />');
 16         }
 17     function RadAutoCompleteBox1_DropDownClosed(sender,args)
 18     {
 19         logEvent('drop down closed');
 20     }
 21 //]]>
 22 </script>
 23     <script type="text/javascript" id="telerikClientEvents2">
 24 //<![CDATA[
 25 
 26     function RadAutoCompleteBox1_DropDownClosing(sender,args)
 27     {
 28         logEvent('drop down closing');
 29     }
 30 //]]>
 31 </script><script type="text/javascript" id="telerikClientEvents3">
 32 //<![CDATA[
 33 
 34     function RadAutoCompleteBox1_DropDownItemDataBound(sender,args)
 35     {
 36         //Add JavaScript handler code here
 37         logEvent('drop down item data bound');
 38     }
 39 //]]>
 40 </script><script type="text/javascript" id="telerikClientEvents4">
 41 //<![CDATA[
 42 
 43     function RadAutoCompleteBox1_DropDownOpened(sender,args)
 44     {
 45         //Add JavaScript handler code here
 46         logEvent('drop down opened');
 47     }
 48 //]]>
 49 </script><script type="text/javascript" id="telerikClientEvents5">
 50 //<![CDATA[
 51 
 52     function RadAutoCompleteBox1_DropDownOpening(sender,args)
 53     {
 54         //Add JavaScript handler code here
 55         logEvent('drop down opening');
 56     }
 57 //]]>
 58 </script><script type="text/javascript" id="telerikClientEvents6">
 59 //<![CDATA[
 60 
 61     function RadAutoCompleteBox1_EntryAdded(sender,args)
 62     {
 63         //Add JavaScript handler code here
 64         logEvent('entry added' + sender.get_text());
 65     }
 66 //]]>
 67 </script><script type="text/javascript" id="telerikClientEvents7">
 68 //<![CDATA[
 69 
 70     function RadAutoCompleteBox1_EntryAdding(sender,args)
 71     {
 72         //Add JavaScript handler code here
 73         logEvent('entry adding' + sender.get_text());
 74     }
 75 //]]>
 76 </script><script type="text/javascript" id="telerikClientEvents8">
 77 //<![CDATA[
 78 
 79     function RadAutoCompleteBox1_EntryRemoved(sender,args)
 80     {
 81         //Add JavaScript handler code here
 82         logEvent('entry removed' + sender.get_text());
 83     }
 84 //]]>
 85 </script><script type="text/javascript" id="telerikClientEvents9">
 86 //<![CDATA[
 87 
 88     function RadAutoCompleteBox1_EntryRemoving(sender,args)
 89     {
 90         //Add JavaScript handler code here
 91         logEvent('entry removing' + sender.get_text());
 92     }
 93 //]]>
 94 </script><script type="text/javascript" id="telerikClientEvents10">
 95 //<![CDATA[
 96 
 97     function RadAutoCompleteBox1_Load(sender,args)
 98     {
 99         //Add JavaScript handler code here
100         logEvent('load');
101     }
102 //]]>
103 </script><script type="text/javascript" id="telerikClientEvents11">
104 //<![CDATA[
105 
106     function RadAutoCompleteBox1_TextChanged(sender,args)
107     {
108         //Add JavaScript handler code here
109         logEvent('text changed' + sender.get_text());
110     }
111 //]]>
112 </script>
113 </head>
114 <body>
115     <form id="form1" runat="server">
116     <div>
117         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataSourceID="SqlDataSource1"
118              DataTextField="title" DataValueField="id" DropDownHeight="150px" 
119             DropDownWidth="250px" Filter="StartsWith" 
120             OnClientDropDownClosed="RadAutoCompleteBox1_DropDownClosed" 
121             OnClientDropDownClosing="RadAutoCompleteBox1_DropDownClosing" 
122             OnClientDropDownItemDataBound="RadAutoCompleteBox1_DropDownItemDataBound" 
123             OnClientDropDownOpened="RadAutoCompleteBox1_DropDownOpened" 
124             OnClientDropDownOpening="RadAutoCompleteBox1_DropDownOpening" 
125             OnClientEntryAdded="RadAutoCompleteBox1_EntryAdded" 
126             OnClientEntryAdding="RadAutoCompleteBox1_EntryAdding" 
127             OnClientEntryRemoved="RadAutoCompleteBox1_EntryRemoved" 
128             OnClientEntryRemoving="RadAutoCompleteBox1_EntryRemoving" 
129             OnClientLoad="RadAutoCompleteBox1_Load" 
130             OnClientTextChanged="RadAutoCompleteBox1_TextChanged" 
131             InputType="Text"></telerik:RadAutoCompleteBox>
132         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
133         </telerik:RadScriptManager>
134         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [t_radauto]"></asp:SqlDataSource>
135     </div>
136     <div id="log" >
137     </div>
138     </form>
139 </body>
140 </html>

这样我们就清楚的看见事件的响应规律了。

后面将会按照官方的说明书进行学习将会更加详细