telerik的RadAutoCompleteBox控件学习三
一、使用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>
这样我们就清楚的看见事件的响应规律了。
后面将会按照官方的说明书进行学习将会更加详细