ASP.NET AJAX / AJAX Control Toolkit 응용 2010 컴퓨터공학실험( I ) 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

ASP.NET AJAX ASP.NET 2.0을 기반으로 하여 AJAX을 구현하기 위한 프레임워크 주소: http://ajax.asp.net

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 최신 라이브러리를 다운받는다.

ASP.NET AJAX Control Toolkit AJAX Extension 기반에서, 웹 클라이언트를 위한 컴포넌트 모음 http://ajaxcontroltoolkit.codeplex.com/releases/view/33804 에서 .NETFRAMEWORK 버전에 맞는 Control Toolkit을 다운로드 할 수 있다. 하지만 AjaxScriptManager라는 Control이 필요하기에 http://www.asp.net/ajaxlibrary/download.ashx에서 Ajax 라이브러리를 다운 받는다. 적절한 위치에 압축을 해제하도록 한다.

ASP.NET AJAX Control Toolkit 개발 환경의 도구상자에서 오른쪽 버튼 클릭 → 탭 추가 클릭 새로운 탭을 2개 만든다. 라이브러리 파일의 압축을 해제한 폴더에서 \WebForms\Release 폴더의 AjaxControlTookit.dll과 System.Web.Ajax.dll 파일을 각각 하나씩 새로 만든 탭으로 끌어 놓는다. 오른쪽과 같이 ASP.NET AJAX용 컴포넌트가 추가된 것을 확인할 수 있다.

주요 AJAX 컴포넌트 Script Manager: AJAX와 관련한 내부적인 처리를 담당하는 컴포넌트, AJAX를 사용하는 페이지에 반드시 1개만 존재하여야 한다. Control 종류로는 ScriptManager(2008기본), AjaxScriptManager, ToolkitScriptManager가 있다. UpdatePanel: 기본적으로 ASP.NET의 Panel과 동일하나 내부에 있는 모든 컴포넌트는 비동기적으로 작동하게 된다.

참고 자료 ASP.NET AJAX 공식 홈페이지: http://ajax.asp.net 메인 페이지에 tutorial video 참조 ASP.NET AJAX Control Toolkit 샘플 및 안내서 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Default.aspx

5주차 실습 과제 - 목표 몇 가지 AJAX Control의 사용법 익히기 이미지 슬라이드 드래그패널 DropDown 부분 도구상자의 HTML 탭의 Table을 사용하여 2개의 행을 만들어 첫 번째 행에는 이미지 슬라이드 부분을 디자인, 두 번째 행에는 DropDown 부분을 디자인할 것. Table 밖엔 드래그패널 부분을 디자인. DropDown 부분

슬라이드 작성 이미지 폴더 추가 후 기존항목 추가로 이미지 프로젝트에 추가 페이지에 AjaxScriptManager와 UpdatePanel 추가 UpdatePanel 속성에서 UpdateMode를 Conditional로 변경 Button과 Image Control을 추가 Image의 속성 중 ImageUrl을 입력 Image 속성 UpdatePanel 속성

슬라이드 작성 Image Control의 좌측에 화살표 클릭 후 Extender 추가 선택 Extender 목록에서 SlideShowExtender선택

슬라이드 작성 Add SlideShow page method 선택 아래와 같이 Method 내부 코드 작성하여

슬라이드 작성 Image 속성의 SlideShowExtender 속성에서 NextButtonID, PlayButtonID, PreviousButtonID 항목을 자신이 추가한 Button Control의 ID를 알맞게 작성 PlayButtonText와 StopButtonText 항목 또한 알맞게 작성

DropDown 작성 Extender를 추가할 Label을 추가한 후 Panel(표준 탭의 Panel)을 추가 한다 Panel 안에 DropDown시에 보여줄 Link Button들을 넣어주고 Link Button Click 이벤트 Function을 설정한다. 모든 Link Button이 하나의 이벤트 Function에 연결되도록 한다 Panel의 소스 코드에 Style을 네모 부분과 같이 코딩 Visibility가 hidden 이므로 Panel이 디자인 창에서 숨겨짐.

DropDown 작성 Label에 Extend 추가를 선택하여 DropDownExtender를 추가 한다.

DropDown 작성 Label 속성의 DropDownExterder의 속성에서 DropDownControlID란에 Link Button을 넣은 Panel의 ID를 적어준다(네모의 ID=“dropdownpanel”이라고 된 부분중 dropdownpanel 이 ID 이다).

DropDown 작성 UpdatePanel을 추가한 후 UpdatePanel안에 Label을 하나 추가한다. LinkButton의 Click 이벤트 Function에 선택한 LinkButton을 확인할 수 있도록 UpdatePanel안에 추가한 Label의 Text를 변경 시켜 주는 코드를 작성한다. Control의 Event 함수 실행 시 파라미터로 넘어오는 object Type의 sender를 활용하면 됨.

DropDown 작성 UpdatePanel의 속성에서 Trigger를 선택하여 Trigger를 등록 한다. 추가를 눌러 멤버를 추가 후 ControlD에는 LinkButton을 EventName에는 Click을 선택한다. 모든 Link Button에 대해서 작성해 준다.

Drag Panel 작성 Panel을 추가 후 적당한 크기로 조정한 뒤 Text를 몇 글자 정도 적어준다. Panel에서 Extender 추가를 선택해 DragPanelExtender를 선택한다. Panel에 TextBox를 하나 넣어준다. TextBox의 크기를 조절하고 SingleLine을 MultiLine으로 바꿔준다.