今天就跟大家聊聊有關(guān)利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示步驟是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為丹徒企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，丹徒網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
AjaxControlToolkit是一組控件的集合，可以實現(xiàn)自動補(bǔ)充文本框，點擊文本框彈出日歷，加水印等Ajax效果,包含40多個控件,具體實現(xiàn)效果如：http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
像百度搜索一樣，根據(jù)用戶輸入自動聯(lián)想相關(guān)詞匯，借助AjaxControlToolkit中的AutoCompleteExtender控件很簡單的實現(xiàn)，實現(xiàn)效果如下：
詳細(xì)步驟：
一：Vs中安裝AjaxControlToolkit
AjaxControlToolkit安裝到VS中(需要注意版本問題)：
安裝方法：http://www.asp.net/ajaxlibrary/act.ashx
相應(yīng)版本提示：http://ajaxcontroltoolkit.codeplex.com/
二：Web頁面中調(diào)用AutoCompleteExtender(頁面中要提前Register,第二行代碼)
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HTML_editor.WebForm1" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
三：添加Web服務(wù) WebService.asmx
復(fù)制代碼 代碼如下:
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
{
///
/// WebService 的摘要說明
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請取消注釋以下行。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
//從數(shù)據(jù)庫中讀取匹配信息
[WebMethod]
[ScriptMethod]
public string[] GetEnglishName(string prefixText, int count)
{
List
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();
}
//直接用方法產(chǎn)生匹配信息
//[WebMethod]
//public string[] GetCompleteList(string prefixText, int count)
//{
// char c1, c2, c3;
// if (count == 0)
// count = 10;
// List
// 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頁面即可看到文本框的自動補(bǔ)充效果，需要注意的地方如下：
AutoCompleteExtender控件參數(shù)說明：
1.TargetControlID:指定要實現(xiàn)提示功能的控件；
2.ServicePath:WebService的路徑，提取數(shù)據(jù)的方法是寫在一個WebService中的；
3.ServeiceMethod:寫在WebService中的用于提取數(shù)據(jù)的方法的名字；
4.MinimumPrefixLength:用來設(shè)置用戶輸入多少字母才出現(xiàn)提示效果；
5.CompletionSetCount:設(shè)置提示數(shù)據(jù)的行數(shù)；
6.CompletionInterval:從服務(wù)器獲取書的時間間隔，單位是毫秒。
WebService.asmx 需要注意的地方：
1.由于該WEB服務(wù)是為Ajax框架提供服務(wù)的，因此在類聲明之前得加上屬性聲明：
[System.Web.Script.Services.ScriptService]
2.特別需要注意的是GetTextString這個方法。凡是為AutoCompleteExtender控件提供服務(wù)的方法都必需完全滿足以下三個條件：
A.方法的返回類型必需為：string []；
B.方法的傳入?yún)?shù)類型必需為：string , int；
C.兩個傳入?yún)?shù)名必需為：prefixText , count。
文本框輸入的值傳遞到WebService中：
aspx:
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSearch.aspx.cs" Inherits="TestSearch" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
aspx.cs
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
<%@ 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 從腳本中調(diào)用此 Web 服務(wù)，請取消注釋以下行。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
//從數(shù)據(jù)庫中讀取匹配信息
[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
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();
}
}
看完上述內(nèi)容，你們對利用AjaxControlToolkit實現(xiàn)百度搜索時的下拉列表提示步驟是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
