Ajax Control Toolkit 을 이용 하여 바 이 두 검색 시 드 롭 다운 목록 알림 상세 절차

9641 단어 AjaxControlToolkit드 롭 다운 목록제시 하 다.
Ajax Control Toolkit 은 컨트롤 의 집합 으로 텍스트 상 자 를 자동 으로 보충 할 수 있 습 니 다.텍스트 상 자 를 클릭 하여 달력 을 팝 업 하고 워 터 마크 등 Ajax 효 과 를 추가 할 수 있 습 니 다.40 여 개의 컨트롤 을 포함 하고 구체 적 인 실현 효 과 는 다음 과 같 습 니 다.http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx 바 이 두 검색 처럼 사용자 입력 에 따라 관련 어 휘 를 자동 으로 연상 합 니 다.Ajax ControlToolkit 의 AutoComplete Extender 컨트롤 을 통 해 쉽게 이 루어 집 니 다.구현 효 과 는 다음 과 같 습 니 다.상세 한 절차:1:Vs 에 AjaxControl Toolkit AjaxControl Toolkit 을 설치 하여 VS 에 설치 합 니 다(버 전 문제 에 주의 하 셔 야 합 니 다):설치 방법:http://www.asp.net/ajaxlibrary/act.ashx 해당 버 전 알림:http://ajaxcontroltoolkit.codeplex.com/ 2.웹 페이지 에서 AutoComplete Extender 를 호출 합 니 다.(페이지 에서 미리 등록 해 야 합 니 다.두 번 째 줄 코드)
 
<%@ 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>
3:웹 서비스 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(); 
//} 
} 
}
를 추가 합 니 다.4:완료,웹 페이지 를 실행 하면 텍스트 상자 의 자동 보충 효 과 를 볼 수 있 습 니 다.주의해 야 할 부분 은 다음 과 같 습 니 다.AutoComplete Extender 컨트롤 파라미터 설명:1.TargetControlid:알림 기능 을 실현 할 컨트롤 을 지정 합 니 다.2.ServicePath:WebService 의 경로,데 이 터 를 추출 하 는 방법 은 하나의 WebService 에 적 힌 것 입 니 다.3.ServeiceMethod:웹 서비스 에 적 힌 데 이 터 를 추출 하 는 방법 에 대한 이름;4.MinimumPrefixLength:사용자 가 몇 자 모 를 입력 해 야 알림 효과 가 나타 나 는 지 설정 합 니 다.5.Complete SetCount:알림 데이터 의 줄 수 를 설정 합 니 다.6.Complete Interval:서버 에서 책 을 가 져 오 는 시간 간격,단 위 는 밀리초 입 니 다.웹 서비스.asmx 가 주의해 야 할 점:1.이 WEB 서 비 스 는 Ajax 프레임 워 크 에 서 비 스 를 제공 하기 때문에 클래스 성명 전에 속성 성명 을 추가 해 야 합 니 다.[System.Web.script.Service.ScriptService]2.특히 주의해 야 할 것 은 GetTextString 입 니 다.AutoComplete Extender 컨트롤 에 서 비 스 를 제공 하 는 방법 은 모두 다음 과 같은 세 가지 조건 을 완전히 만족 시 켜 야 한다.A.방법의 반환 유형 은 string[]이 어야 한다.B.방법의 입력 매개 변수 유형 은 string,int 여야 합 니 다.C.두 개의 입력 매개 변수 이름 은 prefixtText,count 여야 합 니 다.텍스트 상자 에 입력 한 값 은 웹 서비스 에 전 달 됩 니 다: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();"); 
} 
}
웹 서비스.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(); 
} 
}
JavaScript 는 세 션 실현 원리 와 코드 를 어떻게 제어 합 니까?
Ajax$.getJSON 사례 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage