代码改变世界

telerik的RadAutoCompleteBox控件学习完结

2013-03-02 11:05  y-z-f  阅读(2326)  评论(0编辑  收藏  举报

一、客户端模板

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的数量