UpdatePanel 컨트롤 개요 ASP.NET AJAX
퍼왔다 공부좀 하자. 부분 업데이트 !!
어 조금 잘못퍼왓나??
http://neostyx.tistory.com/21
아무튼 공부하고 싶은건 이것!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %> <!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 runat="server"> <title>제목 없음</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table border="0" cellpadding="0" cellspacing="0" style="background-color: #959695;" width="600px"> <tr style="height: 30px" valign="middle"> <td style="width: 100%; font-size: 11pt; color: White;" align="center" colspan="3"> AutoComplete Controls </td> </tr> <tr style="height: 30px" valign="middle"> <td style="width: 1%"> </td> <td style="width: 98%; background-color: White; font-size: 9pt;" align="left"> 단어를 입력하세요. : <asp:TextBox ID="txtText1" runat="server" Width="300px" autocomplete="off"></asp:TextBox> </td> <td style="width: 1%"> </td> </tr> <tr style="height: 2px" valign="middle"> <td style="width: 100%;" align="center" colspan="3"> </td> </tr> </table> </form> </body> </html> <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtText1" ServiceMethod="GetSearchData" ServicePath="AutoCompleteWebService.asmx" MinimumPrefixLength="0" CompletionSetCount="4" CompletionInterval="1000"> </cc1:AutoCompleteExtender> <%@ WebService Language="C#" CodeBehind="~/App_Code/AutoComplete.cs" Class="AutoComplete" %> using System; using System.Web; using System.Collections; using System.Web.Services; using System.Web.Services.Protocols; /// <summary> /// AutoCompleteWebService의 요약 설명입니다. /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class AutoCompleteWebService : System.Web.Services.WebService { public AutoCompleteWebService () { } [WebMethod] public string[] GetSearchData(string prefixText, int count) { if (count == 0) { count = 6; } else if (count > 6) { count = 6; } string strSite1 = "네이버"; string strSite2 = "엠파스"; string strSite3 = "구글"; string strSite4 = "다음"; string strSite5 = "파란"; string strSite6 = "야후"; string[] strArray = new string[6]; strArray[0] = prefixText + strSite1; strArray[1] = prefixText + strSite2; strArray[2] = prefixText + strSite3; strArray[3] = prefixText + strSite4; strArray[4] = prefixText + strSite5; strArray[5] = prefixText + strSite6; return strArray; } }
AutoComplete 컨트롤
소개
이번 포스트에서는 AutoComplete 컨트롤에 대해서 알아보도록 하겠습니다. 이 포스트는 ajax.asp.net(http://ajax.asp.net/ajaxtoolkit/AutoComplete/AutoComplete.aspx)를 참고하여 만들었습니다.
AutoComplete 컨트롤은 TextBox 컨트롤에 추가할 수 있는 컨트롤로, TextBox에 글자를 입력할 때 입력된 글자와 접두어가 일치하는 단어들이 표시되는 컨트롤입니다. 이 컨트롤은 어디에 써야 할지 바로 생각이 들지요? 대형 포탈 사이트에서 검색어를 입력할 때 검색어 입력하는 대로 주요 검색어들이 드랍다운 형태로 나타나게 되는 그러한 기능을 사용하고자 할 때 AutoComplete 컨트롤을 사용하면 됩니다.
속성
언제나 마찬가지로, AutoComplete 컨트롤이 가지고 있는 속성부터 알아보도록 하겠습니다.
ID="autoComplete1"
TargetControlID="myTextBox"
ServiceMethod="GetCompletionList"
ServicePath="AutoComplete.asmx"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="12"/>
이탤릭체의 속성은 옵션으로 사용할 수 있는 속성입니다.
속성에 대한 설명은 다음과 같습니다.
1. TargetControlID : AutoComplete와 연계되는 TextBox 컨트롤의 ID입니다.
2. ServiceMethod : 호출되는 웹 서비스 메소드입니다. 메소드의 형식은 다음과 같습니다.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }
메소드의 명은 변경할 수 있지만, 반환 형식과 파라미터명, 그리고 타입은 정확하게 일치해야 합니다.
3. ServicePath : 완전한 단어 또는 문장을 제공하는 확장자의 웹 서비스의 경로입니다. 제공되지 않을 경우에는 서비스 메소드가 페이지의 메소드로 되어야 합니다.
4. MinimumPrefixLength : 웹 서비스에서 정보를 얻어오기 전에 입력해야 하는 문자의 최소 숫자입니다.
5. CompletionInterval : 웹 서비스를 사용하여 정보를 얻어오는데 걸리는 밀리세컨드 단위의 시간입니다.
6. EnableCaching : 클라이언트 측에서 캐싱을 사용할지의 여부를 지정합니다.
7. CompletionSetCount : 웹 서비스에서 반환되는 정보의 개수입니다.
코드 예제
자, 이제 속성에 대해서 한 번 살펴보았으니, 또 이 속성을 가지고 하나하나씩 적용을 해 보도록 하겠습니다.
웹 페이지를 하나 생성하고 다음과 같이 코드를 작성합니다.
이제 도구상자에서 AutoCompleteExtender 컨트롤을 웹 폼으로 드래그 앤 드랍합니다. 그리고, AutoCompleteExtender 의 속성을 다음과 같이 정의합니다.
자, 그러면 이제 기본적인 설정은 끝났습니다. 다음으로 이 AutoCompleteExtender 에서 사용할 서비스를 만들어보도록 하겠습니다. 솔루션 탐색기의 웹 사이트에서 우측 마우스를 눌러 새 항목 추가를 눌러서 "웹 서비스"를 선택하고 웹 서비스의 이름을 AutoCompleteWebService라고 합니다. "추가"를 선택합니다.
그림 1. AutoCompleteWebService 웹 서비스 항목 추가
웹 사이트에 AutoCompleteWebService.asmx가 추가된 것을 확인할 수 있고, 또한 App_Code 폴더 밑에 AutoCompleteWebService.cs가 추가된 것을 확인할 수 있습니다.
그림 2. AutoCompleteWebService.asmx와 AutoCompleteWebService.cs 가 각각 추가된 화면
AutoCompleteWebService.asmx 파일을 열어보면 다음과 같이 코드 비하인드 파일의 경로와 클래스가 지정되어 있습니다.
이제, ServiceMethod를 만들 차례입니다. "App_Code" 아래에 생성된 AutoCompleteWebService.cs 을 열어서 사용할 GetSearchData 라는 메소드를 만듭니다. 그 전에, AutoCompleteWebService 클래스의 바로 위에 "[System.Web.Script.Services.ScriptService]"라는 속성을 지정해야 정상적으로 작동이 됩니다. 다음은 AutoCompleteWebService.cs 파일의 전체 코드입니다.
GetSearchData 메소드를 보시면, 입력한 문자에 이미 지정한 string 배열을 추가하고, string 배열을 리턴한다는 것을 확인하실 수 있습니다.
그럼, 이제 브라우저에서 실행해보면, 글자를 입력하면 GetSearchData 메소드에 의해 반환된 결과가 드랍다운 리스트로 표현되는 것을 보실 수 있습니다.
그림 3. AutoComplete가 적용된 텍스트 박스 컨트롤
이로써, 설명이 모두 끝났습니다. 생각보다 쉽게 사용할 수 있지 않습니까? 속성을 바꾸어가시면서 테스트 해보시기 바랍니다.
포스팅을 마치며... ----------------------------------------------------------------------------
AutoComplete 컨트롤은 제가 생각했던 것 보다 훨씬 쉽게 적용할 수 있었네요. 너무 어렵게만 생각했었나 봅니다. 여러분들도 실무에서 한 번 사용해보시기 바랍니다. ^^;;