연습: AJAX 사용 웹 사이트 만들기

아티클
08/20/2008

업데이트: 2007년 11월

이 연습에서는 Visual Studio에 포함된 ASP.NET AJAX 라이브러리의 일부 기능을 보여 주는 웹 페이지가 포함된 기본 ASP.NET 웹 사이트를 만듭니다. AdventureWorks 샘플 데이터베이스의 직원 데이터 페이지를 표시하는 응용 프로그램을 빌드합니다. 이 응용 프로그램은 UpdatePanel 컨트롤을 사용하여 포스트백에 따른 페이지 깜박임 없이 변경된 페이지 부분만 새로 고칩니다. 이를 부분 페이지 업데이트라고 합니다. 또한 이 샘플 응용 프로그램은 부분 페이지 업데이트가 처리되는 동안 UpdateProgress 컨트롤을 사용하여 상태 메시지를 표시합니다.

사전 요구 사항

고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.

Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express Edition
AdventureWorks 샘플 데이터베이스. Microsoft 다운로드 센터에서 AdventureWorks 데이터베이스를 다운로드하여 설치할 수 있습니다. "SQL Server 2005 샘플 및 샘플 데이터베이스(2006년 12월)"를 검색합니다.

웹 사이트 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 작업한 경우를 비롯하여 Visual Web Developer에서 웹 사이트를 이미 만든 경우 해당 웹 사이트를 사용하고 다음 단원인 마스터 페이지 만들기로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.

Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지가 만들어집니다.

ASP.NET 웹 페이지에 UpdatePanel 컨트롤 추가

웹 사이트를 만든 후에는 UpdatePanel 컨트롤을 포함하는 ASP.NET 웹 페이지를 만듭니다. 페이지에 UpdatePanel 컨트롤을 추가하기 전에 ScriptManager 컨트롤을 추가해야 합니다. UpdatePanel 컨트롤은 ScriptManager 컨트롤에 의존하여 부분 페이지 업데이트를 관리합니다.

새 ASP.NET 웹 페이지를 만들려면

솔루션 탐색기에서 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

새 항목 추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 선택합니다.
새 페이지 이름을 Employees.aspx로 지정하고 다른 파일에 코드 입력 확인란의 선택을 취소합니다.
사용할 언어를 선택합니다.
추가를 클릭합니다.
디자인 뷰로 전환합니다.
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
도구 상자에서 UpdatePanel 컨트롤을 끌어다 ScriptManager 컨트롤 아래에 놓습니다.

UpdatePanel 컨트롤에 내용 추가

UpdatePanel 컨트롤은 부분 페이지 업데이트를 수행하고 페이지의 나머지 부분에 독립적으로 업데이트되는 내용을 식별합니다. 이 연습 단계에서는 AdventureWorks 데이터베이스의 데이터를 표시하는 데이터 바인딩된 컨트롤을 추가합니다.

UpdatePanel 컨트롤에 내용을 추가하려면

도구 상자의 데이터 탭에서 GridView 컨트롤을 UpdatePanel 컨트롤의 편집 가능한 영역으로 끌어 옵니다.
GridView 작업 메뉴에서 자동 서식을 클릭합니다.
자동 서식 패널의 구성표 선택에서 다양을 선택한 다음 확인을 클릭합니다.
GridView 작업 메뉴의 데이터 소스 선택 목록에서 <새 데이터 소스>를 선택합니다.

데이터 소스 구성 마법사가 표시됩니다.
응용 프로그램이 데이터를 가져오는 위치 아래에서 데이터베이스를 선택한 다음 확인을 클릭합니다.
데이터 소스 구성 마법사의 데이터 연결 선택 단계에서 AdventureWorks 데이터베이스에 대한 연결을 구성한 후 다음을 클릭합니다.
Select 문 구성 단계에서 사용자 지정 SQL 문 또는 저장 프로시저 지정을 선택한 후 다음을 클릭합니다.
사용자 지정 문 또는 저장 프로시저 정의 단계의 SELECT 탭에서 다음 SQL 문을 입력합니다.
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
다음을 클릭합니다.
마침을 클릭합니다.
GridView 작업 메뉴에서 페이징 사용 확인란을 선택합니다.
변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

다른 데이터 페이지를 선택할 경우 페이지 깜박임이 없습니다. 이는 페이지에서 포스트백을 수행하지 않으며 매번 전체 페이지를 업데이트하지 않기 때문입니다.

페이지에 UpdateProgress 컨트롤 추가

UpdateProgress 컨트롤은 UpdatePanel 컨트롤의 새 내용이 요청되는 동안 상태 메시지를 표시합니다.

페이지에 UpdateProgress 컨트롤을 추가하려면

도구 상자의 AJAX 확장 탭에서 UpdateProgress 컨트롤을 페이지로 끌어 UpdatePanel 컨트롤 아래에 놓습니다.
UpdateProgress 컨트롤을 선택하고 속성 창에서 AssociatedUpdatePanelID 속성을 UpdatePanel1로 설정합니다.

이렇게 하면 UpdateProgress 컨트롤이 이전에 추가된 UpdatePanel 컨트롤과 연결됩니다.
UpdateProgress 컨트롤의 편집 가능한 영역에 Getting Employees ...를 입력합니다. .
변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

페이지에서 SQL 쿼리를 실행하여 데이터를 반환하는 동안 지연이 발생할 경우 UpdateProgress 컨트롤은 사용자가 UpdateProgress 컨트롤에 입력한 메시지를 표시합니다.

샘플 응용 프로그램에 지연 추가

응용 프로그램에서 각 데이터 페이지를 신속하게 업데이트할 경우 페이지에서 UpdateProgress 컨트롤 내용을 보지 못할 수도 있습니다. UpdateProgress 컨트롤에서는 컨트롤 표시 전의 지연을 설정할 수 있는 DisplayAfter 속성이 지원됩니다. 이 속성을 사용하면 업데이트가 매우 빨리 발생할 경우 컨트롤로 인해 브라우저에서 깜빡임이 발생하는 것이 방지됩니다. 기본적으로 지연은 500밀리초(.5초)로 설정되며 이는 업데이트가 .5초 미만이 걸릴 경우 UpdateProgress 컨트롤이 표시되지 않는다는 것을 의미합니다.

개발 환경에서는 UpdateProgress 컨트롤이 의도한 대로 작동하는지 확인하기 위해 응용 프로그램에 인위적으로 지연을 추가할 수 있습니다. 이 단계는 응용 프로그램을 테스트하기 위한 목적으로만 사용되는 선택적 단계입니다.

샘플 응용 프로그램에 지연을 추가하려면

UpdatePanel 컨트롤 내에서 GridView 컨트롤을 선택합니다.
속성 창에서 이벤트 단추를 클릭합니다.
PageIndexChanged 이벤트를 두 번 클릭하여 이벤트 처리기를 만듭니다.

다음 코드를 PageIndexChanged 이벤트 처리기에 추가하여 3초 지연을 인위적으로 만듭니다.

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

참고:
PageIndexChanged 이벤트에 대한 처리기는 이 연습용 지연을 인위적으로 적용합니다. 실제로는 지연을 적용하지 않습니다. 대신 서버 트래픽이나, 실행 시간이 긴 데이터베이스 쿼리 같이 처리 시간이 오래 걸리는 서버 코드로 인해 시간 지연이 발생합니다.