메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

한빛랩스 - 지식에 가능성을 머지하다 / 강의 콘텐츠 무료로 수강하시고 피드백을 남겨주세요. ▶︎

IT/모바일

ASP.NET AJAX의 세 가지 얼굴 - (3)

한빛미디어

|

2007-04-11

|

by HANBIT

페이스북 퍼가기 트위터 퍼가기

11,942

제공 : 한빛 네트워크
저자 : Jesse Liberty, Dan Hurwitz
역자 : 이대엽
원문 : The Three Faces of ASP.NET AJAX

[이전 기사 보기]
ASP.NET AJAX의 세 가지 얼굴 - (1)
ASP.NET AJAX의 세 가지 얼굴 - (2)

세번째 얼굴: DOM 심화 연구

가끔씩 커스텀 익스텐더 조차 만족스럽지 못할 때가 있는데, 예를 들어 여러분이 (DHTML을 경유하여) 문서 객체 모델(DOM; Document Object Model)에 접근하여 자바스크립트를 이용해서 그것들을 직접 조작하거나 Update Panel을 매개체로 하지 않고 XMLHttp 객체를 직접적으로 이용하여 브라우저의 비동기적인 기능들을 직접 요청하는 등의 작업들이 그러하다. 이것들은 극도로 어렵고, 상당한 노력을 필요로 하며, 순수 AJAX 코드를 작성해야 하며, 다루기도 쉽지 않다.

순수 AJAX 작동 방식을 보여주기 위하여 필자는 여러분이 텍스트 상자에 문자를 입력하면 지금까지 입력했던 문자들로 시작하는 모든 도시명을 보여줄 워드 휠(word-wheel)을 하나 작성해 볼 것이다. 이렇게 하기 위해서는 도시명에 대한 데이터베이스가 필요한데 여기에서는 AdventureWorks 데이터베이스에 들어있는 도시들의 목록을 이용할 것이다.

우선 앞의 예제를 HardCoreAjax라는 이름의 새로운 웹 사이트로 복사한다.

bin 디렉터리의 내용도 함께 복사되도록 한다

HardCoreAjax 웹 사이트를 열고 Default.aspx를 기본 페이지로 지정한다. 여전히 웹 사이트가 제대로 작동하는지 확인해 보기 위하여 실행시켜 본다.

웹 사이트에 UserNameLookup.aspx라는 이름으로 새 페이지를 하나 추가한다. 이 페이지는 Default.aspx에 포함된 자바스크립트가 서버측 코드를 실행시켜주는 수단으로 사용될 것이다. 페이지가 구동될 때 페이지의 Page_Load 메소드가 사용자명을 데이터베이스로부터 읽어 들인 다음 HTML을 구성하여 읽어들인 결과물로부터 선택 목록을 구축할 것이다. 그리고 나서 이 HTML 텍스트 문자열을 요청하는 자바스크립트로 돌려주어 그것들을 기본 페이지에 비동기적으로 삽입할 것이다.

UserNameLookup.aspx가 소스보기에 나타나면 첫째 줄의 Page 지시자를 제외한 나머지 페이지 전체 내용을 삭제한다. 페이지 내용을 하나의 ASP.NET Literal 컨트롤로 치환하여 파일의 전체 내용을 [예제 1]처럼 만든다. 여러분은 일반적으로 문법 오류를 의미하는 Literal 컨트롤의 asp 태그 아래의 빨간색 표시줄을 무시해도 된다.

[예제 1] UserNameLookup.aspx 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="UserNameLookup.aspx.vb" 
    Inherits="UserNameLookup" %>
이 페이지가 어떤 일을 할지 밝혀보자면 이 페이지의 역할은 데이터베이스에서 도시 이름을 찾아서 그것들을 Default.aspx 페이지에 삽입하고자 하는 HTML로 만들어 그것을 Literal 컨트롤에 넣는 것이다. 그런 다음 우리는 그 HTML을 클라이언트측 페이지에 DHTML과 자바스크립트를 이용하여 삽입할 것이다.

도시이름 가져오기

UserNameLookup과 UserNameLookup.aspx.vb의 코드 비하인드(code-behind) 파일을 연다. 아래의 예제 1-2에 나타나 있는 모든 코드를 추가한다. 이 코드에는 클래스 바깥에 두 개의 import 문장을 포함하고 있는데, 그 문장들은 필요한 Data 네임스페이스와 이벤트 핸들러 메소드인 Page_Load, 그리고 헬퍼 메소드인 UserNamesForPartialName 에 접근할 수 있도록 해준다. 이것들 모두 별다른 것 없는 간단한 서버측 ASP.NET 코드이다.

페이지를 불러오면 페이지에 전달된 쿼리 스트링을 살펴보고 데이터베이스로부터 도시 이름을 뽑아내기 위하여 쿼리를 변환할 것이다. 만약 도시 이름을 받아오게 되면 그것들의 역할은 HTML listbox(Select 객체)에 도시 이름들을 보여줄 HTML 문장들을 생성하는 것이다. 첫 번째 라인은 select 객체를 생성한다: 
""
그 다음 전체 문자열은 Literal 컨트롤에 위치하게 되는데, 그 문자열들은 그대로 .aspx 페이지가 된다. 그러므로 이 페이지는 어디든 삽입할 수 있는 listbox HTML과 다를 바가 없으므로 바로 Default 페이지 마크업의 적당한
안에 DHTML을 이용하여 넣어줄 수 있다.

[예제 2]는 " Dim row As DataRow For Each row In dt.Rows returnString = returnString + "" Next returnString = returnString + "" UserNames.Text = returnString End If Else UserNames.Text = String.Empty End If End Sub Public Function UserNamesForPartialName(ByVal strPartialName As String) _ As DataTable Dim connectionString As String = _ ConfigurationManager.AppSettings("AdventureWorks") Dim connection As SqlConnection = New SqlConnection(connectionString) Dim queryString As String = _ "select distinct LastName as UserName from Person.Contact where " + _ "LastName like "" + _ strPartialName + "%" order by LastName" Dim ds As DataSet = New DataSet() Try Dim dataAdapter As SqlDataAdapter = _ New SqlDataAdapter(queryString, connection) dataAdapter.Fill(ds, "Names") Catch ex As Exception "" Handle exception UserNames.Text = ex.Message Finally connection.Close() End Try Return ds.Tables("Names") End Function End Class
사용자명은 HumanResources.Employee 테이블의 Login 컬럼에 “adventure-works사용자명”의 형태로 저장된다. 필자는 필드 외부에서 그것을 파싱하지 않고 단순히 Person.Contact 테이블의 LastName 컬럼을 질의하도록 하였다. 그렇지만 쿼리문에서는 리턴되는 컬럼에 대하여 UserName이라는 별칭을 사용하고 있다. 원한다면 여러분이 직접 쿼리를 수정하여 데이터베이스로부터 실제 사용자명을 검색하게 할 수도 있다.

소스 보기에서 Default.aspx를 연다. 여러분은 페이지 상단의 엘리먼트에 모든 자바스크립트 코드를 추가할 수 있다. 게다가 TextBox의 txtName 라는 속성을 추가하여 keyup 이벤트를 처리할 자바스크립트 함수 중 하나를 가리키도록 할 수도 있다. 마지막으로 여러분은
엘리먼트를 추가하여 여러분이 UserNameLookup의 코드 비하인드에서 생성했던 HTML을 삽입할 수 있는 자바스크립트 함수를 추가한다.

Default.aspx는 스크립트를 제외한 나머지 부분은 변경된 것이 없으므로 스크립트만 한번 살펴보기로 하자. 
	      
      
      

        
목록

최신 콘텐츠

인기 콘텐츠

자료실

최근 본 상품0