영어 버전은 다음을 참조하세요: http://dflying.dflying.net/1/archive/100_building_a_real_time_progressbar_using_aspnet_atlas.html
일부 장기 작업이 백그라운드에서 수행되는 경우 사용자가 과거에 무의식적으로 기다리거나 간단한 추정을 하게 하는 대신 페이지에 진행률 표시줄을 제공하여 실제 진행 상황을 표시할 수 있다면 매우 드문 성과가 될 것입니다. 장소. 이제 ASP.NET Atlas를 사용하여 이 작업을 수행하는 것이 전적으로 가능해졌습니다. 이 문서에서는 이 기능을 수행하는 방법을 설명하고 Atlas 클라이언트 컨트롤 개발에 대한 몇 가지 기본 개념을 소개합니다. 여기에서 샘플 프로그램과 소스 파일을 다운로드할 수도 있습니다.
웹 페이지에 진행률 표시줄을 구현한다는 아이디어는 실제로 매우 간단합니다. 클라이언트측 Atlas 컨트롤을 작성하고 가끔씩 서버에 요청한 다음 반환된 현재 진행률 데이터를 사용하여 진행률 표시줄 표시를 업데이트합니다. .
이 예에는 코드의 네 부분,즉 완료하는 데 오랜 시간이 걸리는 웹 서비스가
있습니다.
위 웹 서비스의 진행 상황을 쿼리하는 데 사용되는 웹 서비스
클라이언트 Atlas 진행률 표시줄(ProgressBar) 컨트롤은 클라이언트 논리를 유지하고 시각적 UI를 출력하는 역할을 담당합니다. 이는 또한 이 예제에서 가장 중요한 구성 요소이며 향후 다른 페이지나 프로그램 개발에 재사용될 수 있습니다. 위의 웹 서비스 및 컨트롤이 포함된 ASP.NET 테스트 페이지 아래에서는 위의 4단계를 단계별로 구현합니다. :
시간이 오래 걸립니다. 완료하는 데 시간이 오래 걸리는 웹 서비스
실제 프로그램에서 완료하는 데 시간이 오래 걸리는 웹 서비스에는 다음과 같은 구문이 있을 수 있습니다.
1[WebMethod]
2공공 무효 TimeConsumingTask()
3{
4 ConnectToDataBase();
5 GetSomeValueFromDataBase();
6 CopySomeFilesFromDisk();
7 GetARemote파일();
8}
이러한 방식으로 현재 진행 완료 상태를 확인하는 몇 가지 보조 메서드를 삽입할 수 있습니다. setProgress(int)는 현재 진행 완료 비율을 설정하는 데 사용됩니다.
1[WebMethod]
2공공 무효 TimeConsumingTask()
3{
4 세트진행(0);
5ConnectToDataBase();
6 setProgress(10);
7 GetSomeValueFromDataBase();
8 setProgress(40);
9 CopySomeFilesFromDisk();
10 세트진행(50);
11 GetARemote파일();
12 세트진행(100);
13}
이 예에서는 캐시만 사용하여 진행 완료 정보를 저장하고 Thread.Sleep() 메서드를 사용하여 작업 지연을 시뮬레이션합니다.
1[WebMethod]
2public int StartTimeConsumingTask()
3{
4 문자열 processKey = this.Context.Request.UserHostAddress;
5 문자열 threadLockKey = "스레드" + this.Context.Request.UserHostAddress;
6 객체 threadLock = this.Context.Cache[threadLockKey];
7 if (threadLock == null)
8 {
9 threadLock = 새 객체();
10 this.Context.Cache[threadLockKey] = 스레드락;
11 }
12
13 // 사용자당 하나의 실행 중인 작업만 허용합니다.
14 if (!Monitor.TryEnter(threadLock, 0))
15 반환 -1;
16
17 DateTime startTime = DateTime.Now;
18
19 // 시간이 많이 걸리는 작업을 시뮬레이션합니다.
20 for (int i = 1; i <= 100; i++)
스물 하나 {
22 // 이 작업의 진행 상황을 업데이트합니다.
23 this.Context.Cache[processKey] = i;
24 스레드.수면(70);
25}
26
27 모니터.종료(threadLock);
28
29 return (DateTime.Now - startTime).Seconds;
30}
31
진행 상황을 쿼리하는 웹 서비스는
구현하기 쉽습니다. 캐시에서 진행 정보를 가져옵니다.
1[WebMethod]
2public int GetProgress()
3{
4 문자열 processKey = this.Context.Request.UserHostAddress;
5 객체 진행 = this.Context.Cache[processKey];
6 if (진행 != null)
7 {
8 (int)진행을 반환합니다.
9}
10
11은 0을 반환합니다.
12}
클라이언트 측 진행률 표시줄(ProgressBar) 컨트롤
1단계: Sys.UI.Control에서 상속
ProgressBar 컨트롤은 Atlas 컨트롤 기본 클래스 Sys.UI.Control에서 상속하고 이를 봉인된 클래스(봉인된 클래스, 더 이상 상속되지 않습니다) ). Sys.UI.Control 기본 클래스에는 모든 컨트롤에 공통적인 일부 작업과 메서드가 포함되어 있습니다. 예를 들어 자신을 HTML 요소(바인딩이라고도 함)와 연결하는 등의 작업이 있습니다. 동시에, 예를 들어 Atlas가 이 유형에 대한 설명을 얻을 수 있도록 향후 선언 및 사용을 위해 Atlas에게 이 새로운 유형에 대해 알리기 위해 등록되어야 합니다.
1Sys.UI.ProgressBar = 함수(associatedElement) {
2 Sys.UI.ProgressBar.initializeBase(this, [associatedElement]);
3
4}
5Type.registerSealedClass('Sys.UI.ProgressBar', Sys.UI.Control);
6Sys.TypeDescriptor.addType('script','progressBar', Sys.UI.ProgressBar);
7
2단계: 전용 멤버 추가 및 해당 Setter/Getter 작성
다음으로 컨트롤을 설정하려면 몇 가지 속성을 추가해야 합니다. 이 예에서는 세 가지 속성이 필요합니다.
간격. 진행률이 다시 쿼리될 때마다 진행률 표시줄이 업데이트될 때마다 간격입니다. 단위: 밀리초
서비스 URL. 웹 서비스 파일의 경로입니다.
서비스 방법. 진행 정보를 얻는 방법의 이름입니다.
이러한 속성은 Atlas의 명명 규칙을 엄격하게 따라야 합니다. Getter는 'get_'으로 시작해야 하며 Setter는 'set_'으로 시작하고 매개 변수를 전달해야 합니다. 또한 컨트롤 설명자에 이러한 속성에 대한 설명을 추가해야 합니다. 기술 방법(descriptor)에 대해서는 네 번째 단계에서 설명한다. 예를 들어 서비스 방법 속성의 경우 다음 명령문이 있습니다.
1var _serviceMethod;
2
3this.get_serviceMethod = function() {
4 _serviceMethod를 반환합니다.
5}
6
7this.set_serviceMethod = 함수(값) {
8 _serviceMethod = 값;
9}
3단계: 타이머 컨트롤을 사용하여
가끔씩 웹 서비스 시스템을 쿼리합니다. 타이머는 매번 메서드를 호출(이벤트 생성)하는 데 사용됩니다. 시간 내에 이 웹 서비스를 쿼리합니다. 브라우저 메모리 누수를 방지하려면 컨트롤이 소멸(폐기)될 때 필요한 몇 가지 정리를 수행하는 것을 기억해야 합니다.
또한 이전 요청이 반환되지 않은 경우 두 번째 요청을 보내서는 안 됩니다.
1var _timer = 새로운 Sys.Timer();
2var _responsePending;
3var _tickHandler;
4var _obj = 이것;
5
6this.initialize = 함수() {
7 Sys.UI.ProgressBar.callBaseMethod(this, '초기화');
8 _tickHandler = Function.createDelegate(this, this._onTimerTick);
9 _timer.tick.add(_tickHandler);
10 this.set_progress(0);
11}
12
13this.dispose = 함수() {
14 if (_timer) {
15 _timer.tick.remove(_tickHandler);
16 _tickHandler = null;
17 _timer.dispose();
18}
19 _timer = null;
20 관련요소 = null;
21 _obj = 널;
스물 둘
23 Sys.UI.ProgressBar.callBaseMethod(this, 'dispose');
스물넷}
25
26this._onTimerTick = function(sender, eventArgs) {
27 if (!_responsePending) {
28 _responsePending = 사실;
29
30 // 서비스 메서드를 비동기적으로 호출합니다.
31 Sys.Net.ServiceMethod.invoke(_serviceURL, _serviceMethod, null, null, _onMethodComplete);
32}
33}
34
35함수 _onMethodComplete(결과) {
36 // 진행률 표시줄을 업데이트합니다.
37 _obj.set_progress(결과);
38 _responsePending = 거짓;
39}
4단계: 제어 방법 추가
진행률 표시줄의 시작/중지를 제어할 수 있어야 합니다. 또한 Atlas 컨트롤의 경우 관련 설명 방법(설명자)도 필요합니다. Atlas는 이를 사용하여 이러한 유형의 정보를 설명합니다.
1this.getDescriptor = 함수() {
2 var td = Sys.UI.ProgressBar.callBaseMethod(this, 'getDescriptor');
3 td.addProperty('interval', Number);
4 td.addProperty('progress', Number);
5 td.addProperty('serviceURL', String);
6 td.addProperty('serviceMethod', String);
7 td.addMethod('시작');
8 td.addMethod('중지');
9 반환 td;
10}
11
12this.start = 함수() {
13 _timer.set_enabled(true);
14}
15
16this.stop = 함수() {
17 _timer.set_enabled(false);
18}
자, 이제 클라이언트 제어가 완료되었습니다. ProgressBar.js로 저장합니다.
ASP.NET 테스트 페이지 ASP.NET 테스트 페이지
Atlas 페이지에서 가장 먼저 해야 할 일은 ScriptManager 서버 컨트롤을 추가하는 것입니다. 이 예에서는 ProgressBar 컨트롤, 완료하는 데 시간이 오래 걸리는 웹 서비스 및 Progress Query 웹 서비스를 참조합니다. (이 두 웹 서비스는 동일한 파일 TaskService.asmx에 있습니다.)
1<atlas:ScriptManager ID="ScriptManager1" runat="server" >
2 <스크립트>
3 <atlas:ScriptReference Path="ScriptLibrary/ProgressBar.js" ScriptName="Custom" />
4 </스크립트>
5 <서비스>
6 <atlas:ServiceReference Path="TaskService.asmx" />
7 </서비스>
8</atlas:ScriptManager>
다음은 페이지의 레이아웃과 스타일입니다.
1<style type="text/css">
2* {}{
3 글꼴 모음: tahoma;
4}
5.progressBarContainer {}{
6 테두리: 1px 실선 #000;
7 너비: 500px;
8 높이: 15px;
9}
10. 진행률 표시줄 {}{
11 배경색: 녹색;
12 높이: 15px;
13 너비: 0px;
14 글꼴 두께: 굵게;
15}
16</style>
17
18<div>작업 진행</div>
19<div class="progressBarContainer">
20 <div id="pb" class="progressBar"></div>
21</div>
22<input type="button" id="start" onclick="startTask();return false;" value="시간이 많이 걸리는 작업을 시작하세요!"
23<div id="output" ></div>
마지막으로 완료하는 데 오랜 시간이 걸리고 ProgressBar 컨트롤이 작동을 시작하게 하는 웹 서비스를 시작하는 JavaScript가 있습니다.
스크린샷 및 다운로드
이제 모든 작업이 완료되었으며 실행할 준비가 되었습니다!
페이지 초기화:
달리기:
실행 완료:
샘플 프로그램과 소스 파일은 여기에서 다운로드 할 수 있습니다.