Untuk versi bahasa Inggris, lihat: http://dflying.dflying.net/1/archive/100_building_a_real_time_progressbar_using_aspnet_atlas.html
Ketika beberapa operasi jangka panjang dilakukan di latar belakang, akan menjadi pencapaian yang sangat langka jika bilah kemajuan dapat disediakan pada halaman untuk menunjukkan kemajuan sebenarnya, dibandingkan membiarkan pengguna menunggu tanpa menyadarinya atau membuat perkiraan sederhana di masa lalu. tempat. Sekarang sangat mungkin untuk melakukan hal ini menggunakan ASP.NET Atlas. Artikel ini akan membahas cara mencapai fungsi ini dan memperkenalkan beberapa konsep dasar tentang pengembangan kontrol klien Atlas. Anda juga dapat mengunduh contoh program dan file sumber di sini.
Ide untuk menerapkan bilah kemajuan pada halaman web sebenarnya sangat sederhana: tulis kontrol Atlas sisi klien, minta server sesekali, dan gunakan data kemajuan terkini yang dikembalikan untuk memperbarui tampilan bilah kemajuan . Dalam contoh ini, akan ada empat bagian kode:
Layanan Web yang memerlukan waktu lama untuk diselesaikan
Layanan Web yang digunakan untuk menanyakan kemajuan Layanan Web di atas
Kontrol bilah kemajuan Atlas klien (ProgressBar) bertanggung jawab untuk menjaga logika klien dan mengeluarkan UI visual. Ini juga merupakan komponen terpenting dalam contoh ini dan dapat digunakan kembali dalam pengembangan halaman atau program lain di masa mendatang. Halaman pengujian ASP.NET berisi Layanan Web dan kontrol di atas. Di bawah ini kami menerapkan empat langkah di atas langkah demi langkah :
membutuhkan waktu lama Layanan Web yang membutuhkan waktu lama untuk diselesaikan
Dalam program sebenarnya, Layanan Web yang membutuhkan waktu lama untuk diselesaikan mungkin memiliki pernyataan berikut:
1[Metode Web]
2 public void TimeConsumingTask()
3{
4 HubungkanKeDataBase();
5 GetSomeValueFromDataBase();
6 SalinBeberapaFileDariDisk();
7 DapatkanARemoteFile();
8}
Dengan cara ini, kita dapat memasukkan beberapa metode tambahan untuk menentukan status penyelesaian kemajuan saat ini. setProgress(int) digunakan untuk mengatur persentase penyelesaian kemajuan saat ini:
1[Metode Web]
2 public void TimeConsumingTask()
3{
4 setKemajuan(0);
5ConnectToDataBase();
6 setKemajuan(10);
7 GetSomeValueFromDataBase();
8 setKemajuan(40);
9 SalinBeberapaFileDariDisk();
10 setKemajuan(50);
11 GetARemoteFile();
12 setKemajuan(100);
13}
Dalam contoh ini, kami hanya menggunakan Cache untuk menyimpan informasi kemajuan penyelesaian dan menggunakan metode Thread.Sleep() untuk mensimulasikan penundaan operasi:
1[Metode Web]
2publik ke dalam StartTimeConsumingTask()
3{
4 string processKey = ini.Konteks.Permintaan.UserHostAddress;
5 string threadLockKey = "utas" + ini.Konteks.Permintaan.UserHostAddress;
6 objek threadLock = this.Context.Cache[threadLockKey];
7 jika (threadLock == nol)
8 {
9 threadLock = objek baru();
10 this.Context.Cache[threadLockKey] = threadLock;
11 }
12
13 // Hanya mengizinkan 1 tugas yang berjalan per pengguna.
14 jika (!Monitor.TryEnter(threadLock, 0))
15 pengembalian -1;
16
17 DateTime startTime = DateTime.Sekarang;
18
19 // Mensimulasikan tugas yang memakan waktu.
20 untuk (int i = 1; i <= 100; i++)
dua puluh satu {
22 // Perbarui kemajuan tugas ini.
23 ini.Konteks.Cache[processKey] = i;
24 Benang.Tidur(70);
25}
26
27 Monitor.Keluar(threadLock);
28
29 kembali (DateTime.Sekarang - startTime).Detik;
30}
31
Layanan Web untuk menanyakan kemajuan
mudah diterapkan, cukup dapatkan informasi kemajuan dari Cache:
1[Metode Web]
2publik ke dalam GetProgress()
3{
4 string processKey = ini.Konteks.Permintaan.UserHostAddress;
5 kemajuan objek = this.Context.Cache[processKey];
6 jika (kemajuan!= null)
7 {
8 pengembalian (int) kemajuan;
9}
10
11 mengembalikan 0;
12}
Kontrol bilah kemajuan sisi klien (ProgressBar)
Langkah 1: Mewarisi dari Sys.UI.Control
Kontrol ProgressBar harus mewarisi dari kelas dasar kontrol Atlas Sys.UI.Control dan mendeklarasikannya sebagai kelas tersegel (kelas tersegel, yang dapat tidak lagi diwariskan) ). Kelas dasar Sys.UI.Control berisi beberapa operasi dan metode yang umum untuk semua kontrol. Misalnya, mengasosiasikan diri Anda dengan elemen HTML (juga dikenal sebagai pengikatan), dll. Pada saat yang sama, ia harus didaftarkan agar Atlas mengetahui tentang tipe baru ini untuk deklarasi dan penggunaan di masa mendatang, misalnya, sehingga Atlas dapat memperoleh deskripsi tipe ini, dll.
1Sys.UI.ProgressBar = fungsi(Elemen terkait) {
2 Sys.UI.ProgressBar.initializeBase(ini, [associatedElement]);
3
4}
5Type.registerSealedClass('Sys.UI.ProgressBar', Sys.UI.Control);
6Sys.TypeDescriptor.addType('script','progressBar', Sys.UI.ProgressBar);
7
Langkah 2: Tambahkan anggota pribadi dan tulis Setter/Getter yang sesuai
Selanjutnya, Anda perlu menambahkan beberapa properti untuk mengatur kontrol kami. Dalam contoh ini, kita memerlukan tiga properti:
Interval.Interval antara setiap kali progres dikueri ulang dan bilah progres diperbarui. Satuan: milidetik
Url Layanan. Jalur file Layanan Web.
Metode Layanan. Nama metode untuk memperoleh informasi kemajuan.
Properti ini harus benar-benar mengikuti konvensi penamaan Atlas: Getter harus dimulai dengan 'get_', dan Setter harus dimulai dengan 'set_' dan meneruskan parameter. Anda juga perlu menambahkan deskripsi properti ini di deskriptor kontrol. Metode deskripsi (deskriptor) akan dijelaskan pada langkah keempat. Misalnya, untuk atribut Metode Layanan, kami memiliki pernyataan berikut:
1var _serviceMethod;
2
3ini.get_serviceMethod = fungsi() {
4 kembalikan _serviceMethod;
5}
6
7ini.set_serviceMethod = fungsi(nilai) {
8 _Metode Layanan = nilai;
9}
Langkah 3: Gunakan kontrol Timer untuk menanyakan
Sistem Layanan Web sesekali. Timer digunakan untuk memanggil metode (memancarkan peristiwa) setiap saat. Kita dapat menentukan delegasi untuk menunjuk ke metode ini dan melakukannya setiap saat waktu. Untuk menghindari kebocoran memori browser, Anda harus ingat untuk melakukan pembersihan yang diperlukan ketika kontrol dirusak (membuang).
Perhatikan juga bahwa Anda tidak boleh mengirim permintaan kedua ketika permintaan sebelumnya tidak kembali.
1var _timer = Sys.Timer baru();
2var _responseTertunda;
3var _tickHandler;
4var _obj = ini;
5
6ini.inisialisasi = fungsi() {
7 Sys.UI.ProgressBar.callBaseMethod(ini, 'inisialisasi');
8 _tickHandler = Function.createDelegate(ini, ini._onTimerTick);
9 _timer.tick.add(_tickHandler);
10 ini.set_progress(0);
11}
12
13ini.buang = fungsi() {
14 jika (_timer) {
15 _timer.centang.hapus(_tickHandler);
16 _tickHandler = nol;
17 _timer.buang();
18}
19 _timer = nol;
20 elemen terkait = null;
21 _obj = nol;
dua puluh dua
23 Sys.UI.ProgressBar.callBaseMethod(ini, 'buang');
dua puluh empat}
25
26ini._onTimerTick = function(pengirim, eventArgs) {
27 jika (!_responsePending) {
28 _responsePending = benar;
29
30 // Memanggil metode layanan secara asinkron.
31 Sys.Net.ServiceMethod.invoke(_serviceURL, _serviceMethod, null, null, _onMethodComplete);
32}
33}
34
35fungsi _onMethodComplete(hasil) {
36 // Perbarui bilah kemajuan.
37 _obj.set_progress(hasil);
38 _responsePending = salah;
39}
Langkah 4: Tambahkan metode kontrol
Kita harus dapat mengontrol mulai/berhentinya bilah kemajuan. Selain itu, untuk pengendalian Atlas, metode deskripsi terkait (deskriptor) juga diperlukan. Atlas akan menggunakannya untuk mendeskripsikan jenis informasi ini.
1ini.getDescriptor = fungsi() {
2 var td = Sys.UI.ProgressBar.callBaseMethod(ini, 'getDescriptor');
3 td.addProperty('interval', Angka);
4 td.addProperty('kemajuan', Angka);
5 td.addProperty('serviceURL', String);
6 td.addProperty('serviceMethod', String);
7 td.addMethod('mulai');
8 td.addMethod('berhenti');
9 kembali td;
10}
11
12ini.mulai = fungsi() {
13 _timer.set_enabled(benar);
14}
15
16ini.berhenti = fungsi() {
17 _timer.set_enabled(salah);
18}
Oke, kontrol klien sudah selesai sejauh ini. Kami menyimpannya sebagai ProgressBar.js.
Halaman Pengujian ASP.NET Halaman Pengujian ASP.NET
Untuk halaman Atlas mana pun, hal pertama yang perlu kita lakukan adalah menambahkan kontrol server ScriptManager. Dalam contoh ini kita akan merujuk pada kontrol ProgressBar, Layanan Web yang membutuhkan waktu lama untuk diselesaikan, dan Layanan Web Progress Query. (Kedua Layanan Web ini terletak di file yang sama: TaskService.asmx)
1<atlas:ScriptManager ID="ScriptManager1" runat="server" >
2 <Skrip>
3 <atlas:ScriptReference Path="ScriptLibrary/ProgressBar.js" ScriptName="Kustom" />
4 </skrip>
5 <Layanan>
6 <atlas:ServiceReference Path="TaskService.asmx" />
7 </Layanan>
8</atlas:Manajer Skrip>
Berikutnya adalah tata letak dan gaya halaman:
1<style type="text/css">
2* {}}{
3 keluarga font: tahoma;
4}
5.progressBarContainer {}
6 batas: 1 piksel padat #000;
7 lebar: 500 piksel;
8 tinggi: 15 piksel;
9}
10. Bilah Kemajuan {}
11 warna latar: hijau;
12 tinggi: 15 piksel;
13 lebar: 0 piksel;
14 berat font: tebal;
15}
16</gaya>
17
18<div>Kemajuan Tugas</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="Mulai Tugas yang Memakan Waktu!" />
23<div id="keluaran" ></div>
Terakhir, ada bagian JavaScript untuk memulai Layanan Web yang membutuhkan waktu lama untuk diselesaikan dan membiarkan kontrol ProgressBar mulai bekerja:
Screenshot dan Download
Sekarang semuanya sudah selesai dan siap dijalankan!
Inisialisasi halaman:
Berlari:
Jalankan selesai:
Contoh program dan file sumber dapat diunduh di sini .