• Ajax Control Toolkit使用实例 (1) AutoCompleteExtender


    Ajax Control Toolkit简介

    Ajax Control Toolkit是一个丰富的控件集,你可以使用它来创建响应度高、互操作性强的带有Ajax特性的Web应用程序。Ajax Control Toolkit包含了40多种控件,包括AutoCompleteCollapsiblePanelColorPickerMaskedEditCalendarAccordionHTML Editor ExtenderWatermark等控件。

    获取Ajax Control Toolkit

    我们可以通过以下几种方式获取:

    1.对于Visual Studio 2008的用户,我们可以去Ajax Control Toolkit官网上下载工具包(.NET 3.5或.NET 4.0版本);

    2.使用Visual Studio 2010的用户,通过Nuget获取安装包即可;如果你还没有使用Nuget的话,赶紧装一个吧微笑

       PS:安装Nuget的方法很简单,点击本文中的Nuget链接,即可进入Visual Studio Gallery 扩展库,下载Nuget插件并安装即可。

       使用Nuget获取Ajax Control Toolkit的操作界面见下图:

    installpackagegui

    Ajax Control Toolkit相关的资源

    1.Ajax Control Toolkit官方主页:http://ajaxcontroltoolkit.codeplex.com/

    2.控件集使用示例:http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx

    使用Ajax Control Toolkit扩展服务器控件

    如何将程序集添加至工具箱,请大家自行查阅相关资料,这里不再赘述,添加后的工具箱列表如下所示:

    image

    下面说一下怎么使用工具包来扩展我们的服务器控件:

    添加 AutoCompleteExtender 相关的扩展控件

    AutoCompleteExtender 是一个可以附件到任何一个TextBox上的扩展控件,当用户在TextBox中键入关键词时,会弹出一个与之关联的弹出层,并在其中展示以当前关键词为前缀的条目列表,用户可以通过方向键从列表中选择相应条目。类似于百度搜索框的智能匹配。

    首先,我们从工具箱中拖出一个TextBox控件到页面上,然后我们从 Ajax Control Toolkit 工具列表中拖出 ToolkitScriptManager 和 AutoCompleteExtender 控件,最后我们修改 AutoCompleteExtender 的属性 TargetControlID 使之与刚才拖入的TextBox关联。

    这里要注意的是,三个控件的摆放一定要遵循我下面这样的摆放顺序:

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
    MinimumPrefixLength="1" ServiceMethod="GetDataList" ServicePath="AutoCompleteService.asmx"
    UseContextKey="True" CompletionInterval="500">
    </asp:AutoCompleteExtender>

    这里有一些比较重要的客户端属性,作一下特别说明:

    属性名称 说明
    MinimumPrefixLength 最短前端匹配长度,即用户键入的关键词长度大于等于此值时才进行前端匹配检索
    ServiceMethod 服务方法名,获取弹出层展示数据的方法
    ServicePath 服务路径
    CompletionInterval 自动完成匹配的时间间隔,以毫秒计,这里一般应不小于500毫秒

    创建支持异步调用的Web服务

    新建一个Web服务,这里名称为 AutoCompleteService.asmx ,并在其中添加响应方法,这里方法名为 GetDataList。

    注意方法的返回值一定要是 string 类型数组,还有方法签名中的参数类型一定要是如下顺序:

    /// <summary>
    /// AutoCompleteService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class AutoCompleteService : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod]
        public string[] GetDataList(string prefixText, int count, string contextKey)
        {
            string[] stringArr = new string[] { "高效E人", "财智软件", "DOIT.IM", "印象笔记","Dropbox","遨游浏览器" };
            return (from m in stringArr where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();
        }
    }
     

    运行刚才创建的页面,效果如下:

    image

    是不是很简单,那就在项目里试试这个工具包吧眨眼

  • 相关阅读:
    弹框只弹一次(cookie)
    多个列表求笛卡尔积的几种方法
    mysqlrouter 8.0.17启动失败
    Eclipse启动项目成功,IDEA报错java.lang.ClassNotFoundException: javax.servlet.Filter
    java的回调机制,讲得很清楚
    Java 命令行 -D
    spring boot项目中,webservice生成客户端,wsdl可配置
    一个老项目的高并发改造,遇到的redis连接不释放问题。
    ExecuterService实现线程池
    子线程获取不到请求中变量的问题
  • 原文地址:https://www.cnblogs.com/gb2013/p/ajaxcontroltoolkit_autocompleteextender.html
Copyright © 2020-2023  润新知