藉助AjaxControlToolkit實現百度搜索時的下拉列表提示

来源:http://www.cnblogs.com/shouce/archive/2016/04/13/5385630.html
-Advertisement-
Play Games

AjaxControlToolkit是一組控制項的集合，可以實現自動補充文本框，點擊文本框彈出日曆，加水印等Ajax效果,包含40多個控制項,具體實現效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx ...


AjaxControlToolkit是一組控制項的集合，可以實現自動補充文本框，點擊文本框彈出日曆，加水印等Ajax效果,包含40多個控制項,具體實現效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx

像百度搜索一樣，根據用戶輸入自動聯想相關辭彙，藉助AjaxControlToolkit中的AutoCompleteExtender控制項很簡單的實現，實現效果如下：

詳細步驟：

一：Vs中安裝AjaxControlToolkit

AjaxControlToolkit安裝到VS中(需要註意版本問題)：

安裝方法：http://www.asp.net/ajaxlibrary/act.ashx

相應版本提示：http://ajaxcontroltoolkit.codeplex.com/

二：Web頁面中調用AutoCompleteExtender(頁面中要提前Register,第二行代碼)

複製代碼 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HTML_editor.WebForm1" %>

<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                TargetControlID="TextBox1"
                CompletionSetCount="10"
                EnableCaching="true"
                MinimumPrefixLength="1"
                CompletionInterval="100"
                ServicePath="WebService.asmx"
                ServiceMethod="GetEnglishName">
            </asp:AutoCompleteExtender>

        </div>
    </form>
</body>
</html>
複製代碼

三，添加Web服務 WebService.asmx

複製代碼 
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;

namespace HTML_editor
{
    /// <summary>
    /// WebService 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消註釋以下行。 
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {
        //從資料庫中讀取匹配信息
        [WebMethod]
        [ScriptMethod]
        public string[] GetEnglishName(string prefixText, int count)
        {
            List<string> suggestions = new List<string>();//聲明一泛型集合
            SqlConnection con = new SqlConnection("server=.;database=Attendance;uid=sa;pwd=;");
            con.Open();
            SqlCommand com = new SqlCommand(" select [EnglishName] from [Employee] where [EnglishName] like '%t%'  order by [EnglishName]", con);
            SqlDataReader sdr = com.ExecuteReader();
            while (sdr.Read())
            {
                suggestions.Add(sdr.GetString(0));
            }
            sdr.Close();
            con.Close();
            return suggestions.ToArray();
        }
        //直接用方法產生匹配信息
        //[WebMethod]
        //public string[] GetCompleteList(string prefixText, int count)
        //{
        //    char c1, c2, c3;
        //    if (count == 0)
        //        count = 10;
        //    List<String> list = new List<string>(count);
        //    Random rnd = new Random();
        //    for (int i = 1; i <= count; i++)
        //    {
        //        c1 = (char)rnd.Next(65, 90);
        //        c2 = (char)rnd.Next(97, 122);
        //        c3 = (char)rnd.Next(97, 122);
        //        list.Add(prefixText + c1 + c2 + c3);
        //    }
        //    return list.ToArray();
        //}
    }
}
複製代碼

四，完成，運行Web頁面即可看到文本框的自動補充效果，需要註意的地方如下：

AutoCompleteExtender控制項參數說明：

1.TargetControlID:指定要實現提示功能的控制項； 2.ServicePath:WebService的路徑，提取數據的方法是寫在一個WebService中的； 3.ServeiceMethod:寫在WebService中的用於提取數據的方法的名字； 4.MinimumPrefixLength:用來設置用戶輸入多少字母才出現提示效果； 5.CompletionSetCount:設置提示數據的行數； 6.CompletionInterval:從伺服器獲取書的時間間隔，單位是毫秒。  

WebService.asmx 需要註意的地方：

　　1.由於該WEB服務是為Ajax框架提供服務的，因此在類聲明之前得加上屬性聲明：
　　　　　[System.Web.Script.Services.ScriptService]
　　2.特別需要註意的是GetTextString這個方法。凡是為AutoCompleteExtender控制項提供服務的方法都必需完全滿足以下三個條件：
　　　　　A.方法的返回類型必需為：string []；
　　　　　B.方法的傳入參數類型必需為：string  ,   int；
　　　　　C.兩個傳入參數名必需為：prefixText  ,  count。

 

參考：

http://blog.sina.com.cn/s/blog_63070b1d0100ffpf.html

http://visionsky.blog.51cto.com/733317/268650

http://moosdau.blog.163.com/blog/static/4371128200852524114408/ (參數傳遞)

 

文本框輸入的值傳遞到WebService中：

aspx:

複製代碼 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %>

<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function OnTxtPersonInfoKeyDown() {
            var val = document.getElementById("<%=TextBox1.ClientID %>").value;
            var NameClientID = "<%=AutoCompleteExtender1.ClientID %>";
            var acName = $find(NameClientID);
            if (acName != null) {
                acName.set_contextKey(val);
            }
        }
        function OnTxtPersonInfoKeyDown2() {
            var val = document.getElementById("<%=TextBox2.ClientID %>").value;
            var NameClientID = "<%=AutoCompleteExtender2.ClientID %>";
            var acName = $find(NameClientID);
            if (acName != null) {
                acName.set_contextKey(val);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                TargetControlID="TextBox1"
                CompletionSetCount="10"
                EnableCaching="false"
                FirstRowSelected="true"
                UseContextKey="True"
                MinimumPrefixLength="0"
                CompletionInterval="100"
                ServicePath="WebService.asmx"
                ServiceMethod="GetEnglishName">
            </asp:AutoCompleteExtender>
            <br />

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
                TargetControlID="TextBox2"
                CompletionSetCount="10"
                EnableCaching="false"
                FirstRowSelected="true"
                UseContextKey="True"
                MinimumPrefixLength="0"
                CompletionInterval="100"
                ServicePath="WebService.asmx"
                ServiceMethod="GetEnglishName">
            </asp:AutoCompleteExtender>
        </div>
    </form>

</body>
</html>
複製代碼

aspx.cs

複製代碼 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class TestSearch : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown();");
        TextBox2.Attributes.Add("onkeydown", "return OnTxtPersonInfoKeyDown2();");
    }
}
複製代碼

webservice.asmx.cs

複製代碼 
<%@ WebService Language="C#" Class="WebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消註釋以下行。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    //從資料庫中讀取匹配信息
    [WebMethod]
    [ScriptMethod]
    public string[] GetEnglishName(string prefixText, int count, string contextKey)
    {
        SQLHelper sqlH = new SQLHelper();
        //contextKey = "t";  
        string strSql = " select [EnglishName] from [Employee] where [LeftDate] is null and  [EnglishName] like '" + contextKey + "%'  order by [EnglishName] ";
        DataTable dt = sqlH.ExecuteQuery(strSql, CommandType.Text);

        List<string> suggestions = new List<string>();//聲明一泛型集合
        suggestions.Clear();
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                suggestions.Add(dt.Rows[i][0].ToString());
            }
        }

        return suggestions.ToArray();
    }

}
複製代碼

 

 

 

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 深入理解索引器
    在我們開發中常見的用到索引器的地方非常之多，索引器是一個非常微妙的特殊類的成員，它能夠讓對象以類似數組的方式來存取，當一個類包含了數組和集合成員時，索引器將大大簡化對數組或集合成員的存取操作。使程式看起來更為直觀，更容易編寫。 一.定義索引器 定義索引器的方式與定義屬性有些類似，其一般形式如下： [ ...
  • 介面，深入介面,索引器，foreach本質
    1.介面 介面代表一種能力，實現該介面的類和介面沒有繼承關係 介面是用來實現的，類是用來繼承的。 C#中的類成員可以是任意類型，包括數組和集合。當一個類包含了數組和集合成員時，索引器將大大簡化對數組或集合成員的存取操作。 定義索引器的方式與定義屬性有些類似，其一般形式如下： [修飾符] 數據類型 t ...
  • Foreach原理
    本質：實現了一個IEnumerable介面， 01.為什麼數組和集合可以使用foreach遍歷？ 解析：因為數組和集合都實現了IEnumerable介面，該介面中只有一個方法,GetEnumerator() 02.數組是一種數據結構，它包含若幹相同類型的變數。數組是使用類型聲明的：type[] ar ...
  • LINQ的All的方法
    方法All返回布爾值bool，判斷集合中是否所有元素都滿足某一條件，通俗一點說，就是每一個元素，均符合同一個條件，它才返回真，不然返回假。舉列，創建一個model: source code: namespace Insus.NET.Models { public class Book { publi ...
  • 使用NISI製作.Net程式服務安裝包
    1.開篇之前先說一說NISI是什麼。 NSIS（Nullsoft Scriptable Install System）是一個開源的 Windows 系統下安裝程式製作程式。它提供了安裝、卸載、系統設置、文件解壓縮等功能。這如其名字所指出的那樣，NSIS 是通過它的腳本語言來描述安裝程式的行為和邏輯的 ...
  • 何必苦等VS2015？來看看VS2013下實現移動端的跨平臺開發
    轉載自乎聲 前 一天準備下載VS2015預覽版，到VisualStudio官網一看，發現微軟發佈了VisualStudio2013的插件——Visual Studio Tools for Apache Cordova，實現跨平臺的開發。官網下載地址：http://www.microsoft.com/ ...
  • C#中的索引器原理
    朋友們，還記得我們在C#語言開發中用到過索引器嗎？ 記得在獲得DataGridView控制項的某列值時：dgvlist.SelectedRows[0].Cells[0].Value; 記得在獲得ListView控制項的某列值時：listView1.SelectedItems[0].SubItems[0] ...
  • 用C#實現工資計算公式動態編寫
    1，工資計算公式 每一個企業都一定會用到工資計算，發工資是一件非常神聖的事情，而計算工資就是一項非常重要的工作。Excel有非常強大的公式功能，幫助了很多財務人員計算工資，但如果企業的人數比較多，而且工資的計算公式比較複雜，那使用Excel的人員必須是一個超高手了，但Excel維護起來也是非常困難的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類