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