Ajax 관련 필기(2)

Ajax 웹 폼 추가('새 항목 추가'에 "AJAX 웹 폼"으로 생성.)

부분 페이지 렌더링

 

 

Ajax 안 쓰면 전체 페이지 포스트백 : 비효율적

부분 페이지 포스트백

빠르고 간단하게 됨

 

UpdatePanel이 하는 역할 : 그 안에서 다시 게시가 일어나면

UpdatePanel 안에서만 포스트백이 일어남

리소스 절약

 

 

 

AJAX의 가장 큰 특징 2가지

1.검색 페이지 자동완성 기능(AutoComplete)

2.부분페이지 렌더링(업데이트, 포스트백)

비동기 통신

기존에는 전체 페이지 포스트백이 됐지만

AJAX를 사용해서 부분 페이지 포스트백이 되도록 함

내가 원하는 페이지에 AJAX기능 사용하고 싶다면

UpdatePanel에 해당 컨트롤을 떨어뜨려 놓으면 됨

 

 

Asynchronous JavaScript and XML의 약자

 

 

AJAX 관련 라이브러리 (MicrosoftAjax.js, jQuery.1.3.2.js) : 자바스크립트 함수, 클래스들의 집합

-ASP.NET AJAX

-순수 AJAX

 자바스크립트

-JQuery AJAX

-Prototype.js

-스크립트타큘러스

-etc

 

네이버같은 포털 페이지는 순수 AJAX로 만들고(속도 빠름)

기업의 인트라넷의 페이지는 ASP.NET AJAX로 만드는게 효율적(생산성 좋음)

 

 

프로젝트 결과물

UI

Biz

Dac

데이터 저장소

 

ASP.NET AJAX

Server Control 제공해서 기존 여러줄로 처리했던 부분을 한줄로 처리 가능

 

Microsoft AJAX 적용

 -AJAX 확장 컨트롤 사용 : 5개 제공

           UpdatePanel : 부분 페이지 렌더링

 -AJAX Control Toolkit 사용 : 30개 이상 제공

           AutoComplete : 자동완성 기능 제공

 

 

 

상단에 ScriptManager 떨어 뜨리기

Timer 컨트롤 떨어 뜨리기 : 눈에 보이지 않음

Timer 속성 창에서 Interval(간격)을 1000으로 잡으면 1초

UpdatePanel 안에 레이블과 Timer 컨트롤 넣어 두고 실행하면

부분 페이지 포스트백(렌더링, 업데이트)가 됨

Timer컨트롤의 Interval(간격) 속성과 Tick() 이벤트 : 서버측 스크립트를 지정된 시간마다 실행될 수 있도록 함

예) 인기 검색어 읽어오기를 주기적인 시간마다 읽기

 

 

UpdateProgress

오래 걸리는 작업 수행 시

기다리는 시간 동안 지루하지 않게

다른 이미지나 텍스트를 보여줌

 

AssociatedUpdatePanelID : 여러개 UpdatePanel 있을 때 특정 패널 지정

 

 

마스터페이지는 레이아웃 용도로만 쓰자

코드 비하인드 페이지를 쓰지 말자

 

마스터 페이지를 상속받아 웹폼을 만들었을 때

ScriptManager는 부모(Master)에서 이미 ScriptManager한번 사용했으므로

추가가 안된다.

자식이 UpdatePanel 사용하기 위해서는

상단에 ScriptManagerProxy를 떨어뜨려서

부분 렌더링 기능 사용할 수 있다.

 

 

- Ajax Control Toolkit 다운받는 경로

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

 

 

- Ajax Control Toolkit 샘플 테스트해볼 수 있는 경로

http://www.asp.net/AJAX/AjaxControlToolkit/Samples

 

(Visual Studio에서 새 웹 사이트 만들기로 웹폼을 하나만든 후에 웹폼에서)도구상자 - 탭 추가 - 항목 선택 - 찾아보기 - dll 파일(AjaxControlToolkit.dll) 선택

 

 

WebAjaxControlToolkit.zip

WebMicrosoftAjax.zip