zoukankan      html  css  js  c++  java
  • 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>

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

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

  • 相关阅读:
    倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 88怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 81.0怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 40怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 24.0怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下伺服驱动器报错 21.0怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下驱动器试运行提示过速度保护怎么办
    倍福TwinCAT(贝福Beckhoff)基础教程 松下驱动器如何执行绝对值清零
    倍福TwinCAT(贝福Beckhoff)基础教程 松下绝对值驱动器如何做初始化设置
    倍福TwinCAT(贝福Beckhoff)基础教程 松下官方软件开启报错伺服未就绪怎么办
    JAVA Eclipse 启动 Eclipse 弹出“Failed to load the JNI shared library jvm_dll”怎么办
  • 原文地址:https://www.cnblogs.com/yaozhenfa/p/2939488.html
Copyright © 2011-2022 走看看