注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我只是一个人

我爱一个人

 
 
 

日志

 
 

ajax控件,自动输入完成扩展器的使用方法  

2011-03-20 22:37:32|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

微软提供的ajax控件很方便的为开发者提供了快速准确的开发条件,使用这个扩展器AutoCompleteExtender 可以快速的开发出具有自动输入功能的程序。

AutoCompleteExtender 简介

以后补上来,今天不发

示例:

aspx页代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CH1_DemoForm015.aspx.cs" Inherits="CH1_DemoForm015" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>自动输入完成调用 Page Method,可输入多个词,并已加入动画的效果</title>
    <style type="text/css">
    /* AutoComplete 飞出效果 */
    .autocomplete_completionListElement
    { 
     visibility : hidden;
     margin: 0px!important; /* 让 Firefox 和 Opera 可以啊、根据 !important 所修改的规则优先显示 */
     padding: 0px; /* 让 Firefox 和 Opera 在显示列表时,不会让列表往右偏移 */
     background-color: inherit;
     color: windowtext;
     border: buttonshadow;
     border-width: 1px;
     border-style: solid;
     cursor: default;
     overflow: auto;
     height: 200px; /* 修改自动输入完成列表的高度 */
     text-align: left;
     list-style-type: none;
    }
   
    /* AutoComplete 被选择的项目 */
    .autocomplete_highlightedListItem
    {
     background-color: #ffff99;
     color: black;
     padding: 1px;
 }
 
 /* AutoComplete 列表 */
 .autocomplete_listItem
 {
     background-color: window;
     color: windowtext;
     padding: 1px;
 }
    </style>
</head>
<body>
     <a href="http://liminzhang.cnblogs.com/" target="_blank">
        <img border="0" src="Images/CH1_DemoForm015_Banner.gif" title="前往立民讲堂" />
    </a>

    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
            EnablePageMethods="True" />
        请输入姓名:
        <!-- 为了避免 IE 的自动完成会有所动作,需要将 AutoComplete 的属性修改为 off。 -->
        <asp:TextBox ID="TextBoxName" runat="server" Width="496px" AutoComplete="off" />
        <br />
        <!-- 加入自动输入完成扩充器 -->
        <ajaxToolkit:AutoCompleteExtender ID="aceEditName" runat="server"
            TargetControlID="TextBoxName"
            ServiceMethod="GetSuggestion"
            ServicePath=""
            ContextKey="name"
            UseContextKey="true"
            MinimumPrefixLength="1"
            EnableCaching="true"
            CompletionSetCount="12"
            CompletionInterval="1000"           
            CompletionListCssClass="autocomplete_completionListElement"
            CompletionListItemCssClass="autocomplete_listItem"
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
            DelimiterCharacters=";, :"
            FirstRowSelected="true">
            <Animations>
                <OnShow>
                    <Sequence>
                        <%-- 让自动输入完成列表显示透明状,然后再显示出来 --%>
                        <OpacityAction Opacity="0" />
                        <HideAction Visible="true" />
                       
                        <%-- 于第一次播放动画时,先记录自动输入完成列表的大小,
                             然后再将其大小设置为 0px --%>
                        <ScriptAction Script="
                            // 记录自动完成列表的大小,并给予初始大小 0px
                            var behavior = $find('aceEditName');
                            if (!behavior._height) {
                                var target = behavior.get_completionList();
                                behavior._height = target.offsetHeight - 2;
                                target.style.height = '0px';
                            }" />
                       
                        <%-- 在播放淡入效果时,将自动完成列表从 0px 开始展开到原来的大小 --%>
                        <Parallel Duration=".4">
                            <FadeIn />
                            <Length PropertyKey="height" StartValue="0"
                                EndValueScript="$find('aceEditName')._height" />
                        </Parallel>
                    </Sequence>
                </OnShow>
                <OnHide>
                    <%-- 播放淡出动画效果并缩小到 0px --%>
                    <Parallel Duration=".4">
                        <FadeOut />
                        <Length PropertyKey="height"
                            StartValueScript="$find('aceEditName')._height" EndValue="0" />
                    </Parallel>
                </OnHide>
            </Animations>
        </ajaxToolkit:AutoCompleteExtender>
        请输入地址:
        <!-- 为了避免 IE 的自动完成的差别,需要将 AutoComplete 的属性修改为 off。 -->
        <asp:TextBox ID="TextBoxAddress" runat="server" Width="496px" AutoComplete="off" />
        <!-- 加入自动输入完成扩充器 -->
        <ajaxToolkit:AutoCompleteExtender ID="aceEditAddress" runat="server"
            TargetControlID="TextBoxAddress"
            ServiceMethod="GetSuggestion"
            ContextKey="addr"
            MinimumPrefixLength="3"
            EnableCaching="true" CompletionSetCount="35"
            CompletionInterval="1000"
            CompletionListCssClass="autocomplete_completionListElement"
            CompletionListItemCssClass="autocomplete_listItem"
            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
            DelimiterCharacters=";, :"
            FirstRowSelected="true">
            <Animations>
                <OnShow>
                    <Sequence>
                        <%-- 让自动输入完成列表显示透明状,然后再显示出来 --%>
                        <OpacityAction Opacity="0" />
                        <HideAction Visible="true" />
                       
                        <%-- 在第一次播放动画时,先记录自动输入完成列表的大小,然后再将其大小设置为 0px --%>
                        <ScriptAction Script="
                            // 记录自动完成列表的大小,并给予初始大小 0px
                            var behavior = $find('aceEditAddress');
                            if (!behavior._height) {
                                var target = behavior.get_completionList();
                                behavior._height = target.offsetHeight - 2;
                                target.style.height = '0px';
                            }" />
                       
                        <%-- 在播放淡入效果时,将自动完成列表从 0px 开始展开到原来的大小 --%>
                        <Parallel Duration=".4">
                            <FadeIn />
                            <Length PropertyKey="height" StartValue="0"
                                EndValueScript="$find('aceEditAddress')._height" />
                        </Parallel>
                    </Sequence>
                </OnShow>
                <OnHide>
                    <%-- 播放淡出动画效果并缩小到 0px --%>
                    <Parallel Duration=".4">
                        <FadeOut />
                        <Length PropertyKey="height" StartValueScript="$find('aceEditAddress')._height"
                            EndValue="0" />
                    </Parallel>
                </OnHide>
            </Animations>
        </ajaxToolkit:AutoCompleteExtender>
    </form>
</body>
</html>

 

 

cs页代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
// 引用 Page Method 所需的命名空间。
using System.Web.Services;
using System.Web.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;

public partial class CH1_DemoForm015 : System.Web.UI.Page
{
    // 这是一个 Page Method
    [WebMethod()]
    public static string[] GetSuggestion(
        string prefixText, int count,
        string contextKey)
    {
        // 定义一个泛用集合对象 List 来存储提示词。
        List<string> suggestions = new List<string>();

        try
        {
            // 获取 web.config 中的数据库连接字符串设置来创建 SQL 连接对象。
            using (SqlConnection cn = new SqlConnection(WebConfigurationManager.
                ConnectionStrings["chtNorthwind"].ConnectionString))
            {

                SqlCommand cmdLiming = cn.CreateCommand();

                // 根据 contextKey 来赋值查询语句。
                switch (contextKey.ToLower())
                {
                    case "name":
                        cmdLiming.CommandText = "SELECT DISTINCT TOP(@rows) 姓名 FROM" +
                            " 章立民工作室 WHERE 姓名 LIKE @prefixText ORDER BY 1";
                        break;
                    case "addr":
                        cmdLiming.CommandText = "SELECT DISTINCT TOP(@rows) 街道 FROM" +
                            " 邮政编码一览表 WHERE 街道 LIKE @prefixText ORDER BY 1";
                        break;
                }
                // 设置参数值。
   
             cmdLiming.Parameters.AddWithValue("@rows", count);
                cmdLiming.Parameters.AddWithValue("@prefixText", prefixText + "%");

                // 打开数据库连接并将数据读入数据读取器中
                cn.Open();
                using (SqlDataReader dr = cmdLiming.ExecuteReader())
                {
                    while (dr.Read())
                        suggestions.Add(dr.GetSqlString(0).Value);
                }
            }
            return suggestions.ToArray();
        }
        catch (Exception ex)
        {
            suggestions.Add(ex.Message);
            return suggestions.ToArray();
        }
    }
}

 效果图如下

ajax控件,自动输入完成扩展器的使用方法 - 坚持下来的人! - 我只是一个人
 
本文采摘自章立民撰写的名师讲堂系列
  评论这张
 
阅读(158)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018