zoukankan html css js c++ java

telerik的RadAutoCompleteBox控件学习完结 yz

一、客户端模板

1.我们需要将需要的控件放入页面中

RadScriptManager

RadAutoCompleteBox

其次就是新建一个web服务（前面已经介绍过关于该web服务的创建以及代码在此不讨论）

2.模板的学习

要使用客户端模板必须使用<ClientDropDownItemTemplate>标签，并将模板内容写入其中。

3.如何使用 Value 和 Text 的值

该控件已经提供了类型数据绑定的特殊符号，主要有以下三个

#=...#：可以使用在javascript的表达式中、或作为一个字符串类型的数据项也可以直接在模板中输出该值

#...#：可以在javascript的表达式中使用，但是不能输出该值

#:...#：可以使用在javascript的表达式中、或作为一个字符串类型的数据项也可以作为经过HTML编码后输出到模板中

4.前台代码

学完了前面的如何使用数据，那么我们现在就可以看前台的代码如何编写:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebTestValidate.WebForm4" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title>客户端模板</title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
14         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DropDownHeight="150px" DropDownWidth="250px">
15             <WebServiceSettings Path="WebService2.asmx" Method="GetCompanyNames" />
16             <ClientDropDownItemTemplate>
17                 <table>
18                     <tr><td>#= Value#</td><td>#= Text#</td></tr>
19                 </table>
20             </ClientDropDownItemTemplate>
21         </telerik:RadAutoCompleteBox>
22     </div>
23     </form>
24 </body>
25 </html>

其中并没有其他新的标签等等，所以在此就省略讲解

二、服务端模板

1.按照正常的规则，我们还是要放相关的控件，但是这次需要多放置一个SqlDataSource控件，因为这里不使用web服务的方式。

2.模板的学习

跟客户端模板一样，服务端模板也需要一个特别的标签，但是服务端的标签跟客户端的标签不是通用的，而是另一个。

为<DropDownItemTemplate>

3.如何使用数据绑定

这里需要特别注意的是跟我们正常的使用 ASP.NET 控件一样直接使用 Eval 进行数据绑定，那样最后一定会出错。

这里我们必须使用的是 DataBinder.Eval 来进行数据绑定（能够绑定的数据需要根据最终得到的表中有哪些字段）。

4.前端代码

既然我们已经学习完了基础的部分，那么我们就可以开始编写前台的代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebTestValidate.WebForm5" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title>服务端模板</title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
14         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="realname" DataValueField="uid">
15             <DropDownItemTemplate>
16                 <table>
17                     <tr><td><%#DataBinder.Eval(Container.DataItem, "uid") %></td></tr>
18                     <tr><td><%#DataBinder.Eval(Container.DataItem,"realname") %></td></tr>
19                     <tr><td><%#DataBinder.Eval(Container.DataItem,"username") %></td></tr>
20                     <tr><td><%#DataBinder.Eval(Container.DataItem,"usergroup") %></td></tr>
21                 </table>
22             </DropDownItemTemplate>
23         </telerik:RadAutoCompleteBox>
24         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [pre_add_user]"></asp:SqlDataSource>
25     </div>
26     </form>
27 </body>
28 </html>

三、如何在客户端进行控制

学习到这里，我们可以发现几乎我们所做的都是如何将数据更好的呈现，但是却没有实质性的去控制它，所以现在开始我们将学习如何在客户端使用javascript控制该控件。

前段的代码如下（如果有看不懂的可以跳过，先学习后面的javascript方法）:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebTestValidate.WebForm6" %>
 2 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title>在客户端操作RadAutoCompleteBox</title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12     <div>
13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
14         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" OnDropDownTemplateNeeded="RadAutoCompleteBox1_DropDownTemplateNeeded" OnEntryAdded="RadAutoCompleteBox1_EntryAdded" OnEntryRemoved="RadAutoCompleteBox1_EntryRemoved" OnTextChanged="RadAutoCompleteBox1_TextChanged"></telerik:RadAutoCompleteBox>
15     </div>
16         <div>
17             <table>
18                 <tr><td>
19                     <telerik:RadButton ID="RadButton1" runat="server" Text="Add New Entry" OnClientClicked="addEntry" ></telerik:RadButton>
20                 </td></tr>
21                 <tr>
22                     <td>
23                         <telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="entry a message"></telerik:RadTextBox></td>
24                 </tr>
25                 <tr><td>
26                     <telerik:RadButton ID="RadButton2" runat="server" Text="Remove Entry" OnClientClicked="removeEntry"></telerik:RadButton>
27                     </td></tr>
28                 <tr><td>
29                     <telerik:RadButton ID="RadButton3" runat="server" Text="Clear All" OnClientClicked="claerEntry"></telerik:RadButton>
30                     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [pre_add_user]"></asp:SqlDataSource>
31                     </td></tr>
32                 <tr><td>
33                     <telerik:RadButton ID="RadButton4" runat="server" Text="Print Entry" OnClientClicked="printEntry"></telerik:RadButton>
34                     </td></tr>
35                 <tr><td>
36                     <telerik:RadTextBox ID="RadTextBox2" runat="server"></telerik:RadTextBox>
37                     </td></tr>
38             </table>
39         </div>
40     </form>
41     <script type="text/javascript">
42         function addEntry(sender, args) {
43             var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>");
44             var radTextBox = $find("<%= RadTextBox1.ClientID %>");
45             //判断文本框是否存在数据，不存在则退出
46             if (radTextBox.get_value() == "") return;
47             //创建新的entry
48             var entry = new Telerik.Web.UI.AutoCompleteBoxEntry();
49             //将新的entry的文本设置为文本框内的内容
50             entry.set_text(radTextBox.get_value());
51             //将新的entry加入到控件中
52             autocompleteBox.get_entries().add(entry);
53         }
54         function removeEntry(sender, args) {
55             var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID %>");
56             //获得索引在第一个的entry
57             var firstentry = autocompleteBox.get_entries().getEntry(0);
58             //将索引在第一个的entry删除
59             autocompleteBox.get_entries().remove(firstentry);
60         }
61         function claerEntry(sender, args) {
62             //清空entry
63             $find("<%= RadAutoCompleteBox1.ClientID %>").get_entries().clear();
64         }
65         function printEntry(sender, args) {
66             var autocompleteBox = $find("<%= RadAutoCompleteBox1.ClientID%>");
67             var labe = $find("<%= RadTextBox2.ClientID %>");
68             //将所有entry内容输出至输入框中
69             labe.set_value(autocompleteBox.get_text());
70         }
71     </script>
72 </body>
73 </html>

四、如何在服务端进行控制

有关的属性:

名称	类型	返回值类型	说明
Text	Get	String	获得输入区域中的内容
InputType	Get/Set	Telerik.Web.UI. RadAutoCompleteFilter	获得/设置输入的类型: RadAutoCompleteInputType: { Token, Text, }
Filter	Get/Set	Telerik.Web.UI. RadAutoCompleteFilter	获得/设置过滤类型: RadAutoCompleteFilter: { StartsWith, Contains, }
AllowCustomEntry	Get/Set	Bool	是否允许用户自定义输入
Attributes	Get	System.Web.UI.AttrbuteCollection	Gets the collection of arbitrary attributes that do not correspond to the properties of the control.
Delimiter	GET/Set	String	获得/设置分隔符（只有当InputType为Text时使用该分隔符）
DropDownItemTemplate	Get/Set	System.Web.UI.ITemplate	获得/设置显示在下拉框中的数据项模板
Entries	Get	Telerik.Web.UI. AutoCompleteBoxEntryCollection	获得一组输入区域中的内容
ID	Get/Set	String	获得/设置ID
DataTextField	Get/Set	String	获得/设置绑定到Text的字段名称
DataValueField	Get/Set	String	获得/设置绑定到Value的字段名称

有关服务端事件:

名称	参数	说明
EntryAdded	RadAutoCompleteBox object, AutoCompleteEntryEventArgs	当输入区域中增加一条token则响应（InputType必须为Token）
EntryRemoved	RadAutoCompleteBox object, AutoCompleteEntryEventArgs	当输入区域中删除一条token则响应（InputType必须为Token）
TextChanged	RadAutoCompleteBox object, AutoCompleteTextEventArgs	当输入区域中的文本被修改后响应（InputType必须为Text）
DropDownTemplateNeeded	RadAutoCompleteBox object, AutoCompleteDropDownItemEventArgs	在模板被显示到下拉框前响应

以下为服务端事件的举例:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 using Telerik.Web.UI.AutoCompleteBox;
 8 
 9 namespace WebTestValidate
10 {
11     public partial class WebForm6 : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15 
16         }
17 
18         protected void RadAutoCompleteBox1_EntryAdded(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e)
19         {
20             string value = e.Entry.Value;
21             string text = e.Entry.Text;
22         }
23 
24         protected void RadAutoCompleteBox1_EntryRemoved(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e)
25         {
26             string value = e.Entry.Value;
27             string text = e.Entry.Text;
28         }
29 
30         protected void RadAutoCompleteBox1_TextChanged(object sender, Telerik.Web.UI.AutoCompleteTextEventArgs e)
31         {
32             string text = e.Text;
33         }
34 
35         protected void RadAutoCompleteBox1_DropDownTemplateNeeded(object sender, Telerik.Web.UI.AutoCompleteDropDownItemEventArgs e)
36         {
37             
38         }
39     }
40 }

其中描述了如何获得用户所选的Text以及Value

五、客户端函数

RadAutoCompleteBox 拥有的方法

名称	参数	返回值类型	说明
get_text()	无	string	返回输入区域中的内容，并且是以delimeter参数分割
get_entries()	无	Telerik.Web.UI. AutoCompleteBoxEntryCollection	返回一组entry
get_inputElement	无	DOM Object	返回输入区域的DOM对象
get_bindingMode()	无	Telerik.Web.UI. RadAutoCompleteBoxBinding Enum RadAutoCompleteBoxBinding: { Callback: 0, WebService: 1, OData: 2 }	返回RadAutoCompleteBoxBinding枚举中的一个值
get_isUsingODataSource()	无	boolean	是否使用OData

操作

名称	参数	返回值类型	说明
clear()	无	无	关闭下拉框并清空输入区域
createEntry()	string, string	Telerik.Web.UI. AutoCompleteBoxEntry	返回创建的entry
query()	string	无	发送一个请求至服务器并且带有一个value的参数

AutoCompleteBoxEntry 拥有的方法

名称	参数	返回值类型	说明
get_index()	无	number	返回指定entry的索引
get_text()	无	string	返回指定entry的text
get_value()	无	string	返回指定entry的value
get_token()	无	DOM object	返回指定entry的DOM 对象
get_parent	无	Telerik.Web.UI. RadAutoCompleteBox	返回指定entry的父对象

AutoCompleteBoxEntryCollection 拥有的方法

名称	参数	返回值类型	说明
add()	Telerik.Web.UI. AutoCompleteBoxEntry	无	增加指定的entry到entry组中
insert()	number, Telerik.Web.UI. AutoCompleteBoxEntry	无	增加指定的entry到entry组中的指定位置
remove()	Telerik.Web.UI. AutoCompleteBoxEntry	无	从entry组中删除指定的entry
clear()	无	无	清空entry组
getEntry()	number	Telerik.Web.UI. AutoCompleteBoxEntry	返回直嘀咕索引的entry
indexOf()	Telerik.Web.UI. AutoCompleteBoxEntry	number	返回指定entry的索引
get_count()	无	number	返回entry组中拥有的entry的数量

查看全文

相关阅读:
SQLException:The server time zone
Golang开发环境和环境变量搭建
 Docker Swanm集群配置
 .net 批量导出文件，以ZIP压缩方式导出
 【旧文章搬运】Windows句柄表分配算法分析(实验部分)
【旧文章搬运】Windows句柄表分配算法分析(三)
【旧文章搬运】Windows句柄表分配算法分析(二)
【旧文章搬运】Windows句柄表分配算法分析(一)
【旧文章搬运】PspCidTable攻与防
 【旧文章搬运】PspCidTable概述

原文地址：https://www.cnblogs.com/yaozhenfa/p/2939787.html