ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I ) 11주 실습강의 ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( 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 Web Developer Express Edition 또는 Visual Studio 2005 설치 개발환경에 ASP.NET AJAX extension 설치: http://ajax.asp.net에서 ASP.NET AJAX 설치 파일 다운로드 하여 실행
ASP.NET AJAX용 컴포넌트 설치 ASP.NET AJAX용 컴포넌트 설치 http://ajax.asp.net에서 ASP.NET AJAX Control Toolkit을 다운로드하여 압축을 해제한다. 개발 환경의 도구상자에서 오른쪽 버튼 클릭 → 탭 추가 클릭 새로운 탭의 이름을 AJAX Control Toolkit으로 한다. 압축을 해제한 폴더에서 SampleWebSite/Bin 폴더의 AjaxControlTookit.dll 파일을 새로 만든 탭으로 끌어 놓는다. 오른쪽과 같이 ASP.NET AJAX용 컴포넌트가 추가된 것을 확인할 수 있다.
주요 AJAX 컴포넌트 Script Manager: AJAX와 관련한 내부적인 처리를 담당하는 컴포넌트, AJAX를 사용하는 페이지에 반드시 1개가 존재하여야 한다. UpdatePanel: 기본적으로 ASP.NET의 Panel과 동일하나 내부에 있는 모든 컴포넌트는 비동기적으로 작동하게 된다.
참고 자료 ASP.NET AJAX 공식 홈페이지: http://ajax.asp.net 메인 페이지에 tutorial video 참조
11주차 실습 과제 - 목표 비동기 게시판 작성
ASP.NET 2.0에서 테이블 연결 솔루션 탐색기의 최상위 노드에서 오른쪽 버튼 클릭 → 새 항목 추가 클릭 → 데이터 집합 추가
ASP.NET 2.0에서 테이블 연결 TableAdapter 구성 마법사가 나타남 데이터 연결 성정 명령 유형 선택: SQL 문 사용 선택 후 다음 클릭 SQL 문 입력: 쿼리 작성기 클릭 후 가져올 테이블에 대해 쿼리 문 입력 후 다음 클릭 생성할 메서드 선택: 다음 클릭 마법사 결과: 마침 클릭
디자이너 모드에서 테이블 연결 사용 도구상자 → 데이터 → ObjectDataSource를 페이지로 드래그 앤 드롭 데이터 소스 구성에서 이전에 작성한 TableAdapter 선택 후 다음 클릭 데이터 메서드 정의에서 SELECT에는 GetData()를 설정, INSERT에는 InsertQuery()를 설정 후 마침 클릭
코드 보기에서 테이블 연결 사용 작성한 데이터 셋 이름 + TableAdapters에 작성한 TableAdapter가 들어 있음 해당 데이터 테이블의 인스턴스 생성 생성한 인스턴스에 GetData(), InsertQuery() 등 작성한 데이터 접근 메소드가 있고 이 메소드를 사용하여 데이터 접근.
비동기 페이지 작성 페이지에 ScriptManager와 UpdatePanel 추가