Transcript AJAX

5주 실습강의
ASP.NET AJAX / AJAX Control Toolkit 응용
2010 컴퓨터공학실험( I )
AJAX
 Asynchronous Javascript And Xml
- 정의: 웹 기반의 비동기 통신 기법
 동기 통신: 새로운 정보를 서버로부터 받아오기 위해 페이지 전체를
서버로부터 새로 읽어와야 한다.
- 예) naver 검색 버튼을 누르면 페이지 전체가 변경
 비동기 통신: 새로운 정보를 서버로부터 받아오기 위해 전체 페이지
를 새로 고침 하지 않는다.
- 예) 구글 맵스(http://maps.google.com): 맵을 이동하여 새로운 정보를 서
버로부터 읽어 오지만 페이지 새로 고침을 하지는 않는다.
- 구현 방법: 여러 가지 기술을 사용
 통신: SOAP, HTTP
 표현: Javascript, DOM, HTML, CSS
Artificial Intelligence Laboratory
ASP.NET AJAX
 ASP.NET 2.0을 기반으로 하여 AJAX을 구현하기 위한 프
레임워크
- 주소: http://ajax.asp.net
Artificial Intelligence Laboratory
ASP.NET AJAX 설정
 개발환경 :
- Visual Studio 2008 .NET FRAMEWORK 3.5의 경우 이미
ASP.NET AJAX를 포함하기에 extension 을 설치하지 않아도 됨
 개발에 필요한 ASP.NET AJAX 라이브러리 :
http://www.asp.net/ajaxlibrary/download.ashx 에서
ASP.NET AJAX 최신 라이브러리를 다운받는다.
Artificial Intelligence Laboratory
ASP.NET AJAX Control Toolkit
 AJAX Extension 기반에서, 웹 클라이언트를 위한 컴포넌
트 모음
 http://ajaxcontroltoolkit.codeplex.com/releases/view/338
04 에서 .NETFRAMEWORK 버전에 맞는 Control Toolkit
을 다운로드 할 수 있다.
 하지만 AjaxScriptManager라는 Control이 필요하기에
http://www.asp.net/ajaxlibrary/download.ashx에서 Ajax
라이브러리를 다운 받는다.
 적절한 위치에 압축을 해제하도록 한다.
Artificial Intelligence Laboratory
ASP.NET AJAX Control Toolkit

ASP.NET AJAX용 컴포넌트 설치
- 개발 환경의 도구상자에서 오른쪽 버튼 클릭 → 탭 추가 클릭
- 새로운 탭을 2개 만든다.
- 라이브러리 파일의 압축을 해제한 폴더에서
\WebForms\Release 폴더의 AjaxControlTookit.dll과
System.Web.Ajax.dll 파일을 각각 하나씩 새로 만든 탭으로
끌어 놓는다.
- 오른쪽과 같이 ASP.NET AJAX용 컴포넌트가 추가된 것을 확
인할 수 있다.
Artificial Intelligence Laboratory
주요 AJAX 컴포넌트
 Script Manager: AJAX와 관련한 내부적인 처리를 담당하
는 컴포넌트, AJAX를 사용하는 페이지에 반드시 1개만 존
재하여야 한다. Control 종류로는 ScriptManager(2008기
본), AjaxScriptManager, ToolkitScriptManager가 있다.
 UpdatePanel: 기본적으로 ASP.NET의 Panel과 동일하나
내부에 있는 모든 컴포넌트는 비동기적으로 작동하게 된
다.
Artificial Intelligence Laboratory
참고 자료
 ASP.NET AJAX 공식 홈페이지: http://ajax.asp.net
- 메인 페이지에 tutorial video 참조
 ASP.NET AJAX Control Toolkit 샘플 및 안내서
- http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Default.as
px
Artificial Intelligence Laboratory
5주차 실습 과제 - 목표
이미지 슬라이드
 몇 가지 AJAX Control의 사용법 익히기
드래그패널
DropDown 부분
도구상자의 HTML 탭의
Table을 사용하여 2개의 행을
만들어 첫 번째 행에는 이미
지 슬라이드 부분을 디자인,
두 번째 행에는 DropDown
부분을 디자인할 것. Table 밖
엔 드래그패널 부분을 디자인.
Artificial Intelligence Laboratory
슬라이드 작성





이미지 폴더 추가 후 기존항목 추가로 이미지 프로젝트에 추가
페이지에 AjaxScriptManager와 UpdatePanel 추가
UpdatePanel 속성에서 UpdateMode를 Conditional로 변경
Button과 Image Control을 추가
Image의 속성 중 ImageUrl을 입력
Image 속성
UpdatePanel 속성
Artificial Intelligence Laboratory
슬라이드 작성
 Image Control의 좌측에 화살표 클릭 후 Extender 추가 선택
 Extender 목록에서 SlideShowExtender선택
Artificial Intelligence Laboratory
슬라이드 작성
 Add SlideShow page method 선택
 아래와 같이 Method 내부 코드 작성하여
이미지를 Slide에 등록
Artificial Intelligence Laboratory
슬라이드 작성
 Image 속성의 SlideShowExtender
속성에서 NextButtonID, PlayButtonID,
PreviousButtonID 항목을 자신이
추가한 Button Control의 ID를 알맞게
작성
 PlayButtonText와 StopButtonText 항목
또한 알맞게 작성
Artificial Intelligence Laboratory
DropDown 작성
 Extender를 추가할 Label을 추가한 후 Panel(표준 탭의
Panel)을 추가 한다
 Panel 안에 DropDown시에 보여줄 Link Button들을 넣어
주고 Link Button Click 이벤트 Function을 설정한다. 모든
Link Button이 하나의 이벤트 Function에 연결되도록 한다
 Panel의 소스 코드에 Style을 네모 부분과 같이 코딩
 Visibility가 hidden 이므로 Panel이 디자인 창에서 숨겨짐.
Artificial Intelligence Laboratory
DropDown 작성
 Label에 Extend 추가를 선택하여 DropDownExtender를
추가 한다.
Artificial Intelligence Laboratory
DropDown 작성
 Label 속성의 DropDownExterder의 속성에서
DropDownControlID란에 Link Button을 넣은 Panel의 ID
를 적어준다(네모의 ID=“dropdownpanel”이라고 된 부분
중 dropdownpanel 이 ID 이다).
Artificial Intelligence Laboratory
DropDown 작성
 UpdatePanel을 추가한 후 UpdatePanel안에 Label을 하
나 추가한다.
 LinkButton의 Click 이벤트 Function에 선택한 LinkButton
을 확인할 수 있도록 UpdatePanel안에 추가한 Label의
Text를 변경 시켜 주는 코드를 작성한다.
 Control의 Event 함수 실행 시 파라미터로 넘어오는
object Type의 sender를 활용하면 됨.
Artificial Intelligence Laboratory
DropDown 작성
 UpdatePanel의 속성에서 Trigger를 선택하여 Trigger를
등록 한다. 추가를 눌러 멤버를 추가 후 ControlD에는
LinkButton을 EventName에는 Click을 선택한다. 모든
Link Button에 대해서 작성해 준다.
Artificial Intelligence Laboratory
Drag Panel 작성
 Panel을 추가 후 적당한 크기로 조정한 뒤 Text를 몇 글자
정도 적어준다.
 Panel에서 Extender 추가를 선택해 DragPanelExtender
를 선택한다.
 Panel에 TextBox를 하나 넣어준다. TextBox의 크기를 조
절하고 SingleLine을 MultiLine으로 바꿔준다.
Artificial Intelligence Laboratory