Memperluas kontrol Peta HTML menggunakan kerangka ASP.NET AJAX

Sekarang, tulis metode web kami:

Berikut cuplikan kutipannya:
[Metode Web]
[Metode Skrip(UseHttpGet = salah, ResponseFormat = ResponseFormat.Json)]
string publik GetAreaInfo(area string)
{
daerah pengembalian;
}

Menurut saran dari sumber resmi, untuk alasan keamanan, kami biasanya menggunakan HttpPost (atau HttpGet= false) untuk mengakses metode Web. Kemudian, kami mengonfigurasi format data yang dikembalikan ke format JSON (mode defaultnya adalah mode JSON).

Untuk mempermudah, metode GetAreaInfo di sini hanya mengembalikan nilai parameter input yang sama; namun dalam pengembangan sebenarnya, kita harus mengganti di sini untuk mengambil data dari database.

Sejauh ini kita telah berhasil membuat layanan Web yang dipanggil dari klien menggunakan AJAX.

Namun, kita juga perlu membuat beberapa konfigurasi yang sesuai untuk kontrol server ScriptManager di halaman tersebut, seperti yang ditunjukkan di bawah ini:

Berikut ini adalah kutipan kutipan:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<layanan>
<asp:jalur referensi layanan="~/LocationService.asmx" />
</layanan>
</asp:Manajer Skrip>

Di sini kami hanya menambahkan referensi layanan di bawah node, tetapi apa perannya?

Dari analisis kode sumber HTML yang dihasilkan, konfigurasi di atas akan menghasilkan konten berikut:

Berikut ini adalah fragmen referensi:

<script src="LocationService" .asmx /jsdebug" type="text/javascript"></script>

Tag skrip di sini merujuk pada file JavaScript LocationService.asmx/jsdebug. Sebenarnya, ini adalah kelas proxy layanan Web. Melalui kelas proxy inilah kita dapat memanggil layanan web sisi server secara asinkron dari klien.

Yang lebih menarik adalah jika Anda cukup menyalin jalur yang ditunjukkan di atas ke browser Anda, Anda akan melihat file JavaScript yang dihasilkan oleh lingkungan AJAX saat run time - file ini membuat panggilan layanan skrip tersedia. Kami tidak akan membahas kelas proxy secara mendalam.

Selanjutnya, mari kita lihat cara membuat kelas klien khusus.

4. Membuat kelas kustom sisi klien

Kita tahu bahwa salah satu "penemuan" utama kerangka ASP.NET AJAX adalah memperkenalkan model pemrograman JavaScript berorientasi objek. Sekarang, dengan bantuan pola desain JavaScript, kita dapat dengan mudah membuat template atau kelas kita sendiri, menambahkan konsep pewarisan, membuat antarmuka dan enumerasi, dll.

Pada artikel ini, kami akan mengembangkan kelas klien yang merangkum semua fungsi yang diperlukan dalam contoh ini.

Sekarang, klik kanan pada proyek dan tambahkan file JavaScript baru bernama ImageMap. Dalam file ini, kita akan mendefinisikan namespace baru MyServices; namespace ini akan berisi kelas klien yang akan kita kembangkan. Seperti gambar di bawah ini:

Berikut penggalan kutipannya:
Type.registerNamespace("Layanan Saya");

Selanjutnya, kita mendefinisikan konstruktor kelas klien yang ingin kita buat:

Berikut cuplikan referensinya:

MyServices.Location = function (uiElement, uiBody) {
Layanan Saya.Location.initializeBase(ini);
this._uiElement = uiElement;
ini._uiBody = uiBody;
ini._xAxis = 0;
ini._yAxis = 0;
}

Templat atau konstruktor kelas tidak lebih dari fungsi JavaScript biasa. Konstruktor ini memiliki dua parameter: uiElement dan uiBody.

Kedua parameter tersebut akan digunakan untuk mendeskripsikan jendela pop-up yang ditampilkan pada halaman. Dua variabel pribadi lainnya _xAxis dan _yAxis digunakan untuk mendeskripsikan posisi tampilan jendela pop-up. Biasanya, yang terbaik adalah mendeklarasikan semua anggota privat di konstruktor.

Selanjutnya, kita akan menggunakan pola desain prototipe untuk menulis fungsi dan properti anggota di kelas ini:

Berikut adalah fragmen referensinya:

MyServices.Location.prototype =
{
get_uiElement: fungsi()
{
kembalikan ini._uiElement;
},
set_uiElement: fungsi(nilai)
{
this._uiElement = nilai;
},
get_uiBody: fungsi()
{
kembalikan ini._uiBody;
},
set_uiBody: fungsi(nilai)
{
this._uiBody = nilai;
},

Perhatikan bahwa definisi metode atribut elemen UI di sini sangat mirip dengan bentuk definisi dalam berbagai bahasa di .NET.

Fungsi anggota berikut ini adalah fokus kami, yang bertanggung jawab untuk memanggil layanan Web jarak jauh:

Berikut ini adalah fragmen referensi:
ShowPopupinfo: fungsi (acara, Nama area)
{
Layanan Saya.LocationService.GetAreaInfo(namaarea,
Fungsi.createDelegate(ini, ini.Selesai),
this.OnError, //Fungsi panggilan balik bertanggung jawab atas penanganan kesalahan
this.OnTimeOut); //Fungsi panggilan balik bertanggung jawab untuk pemrosesan batas waktu
this._xAxis = acara.klienX;
this._yAxis = acara.klienY;
}

Kode di atas menunjukkan metode yang sangat umum untuk memanggil layanan Web dari klien:

1) Bentuknya hampir sama nyamannya dengan memanggil metode lokal biasa;

2) Fungsi Function.createDelegate sangat penting dalam pengembangan klien ASP.NET AJAX global fungsi. Salah satu tujuan awal pembuatan fungsi ini adalah untuk memecahkan masalah kata kunci ini. Dalam event handler yang dipicu oleh elemen DOM, kata kunci this selalu mengacu pada elemen DOM, bukan kelas itu sendiri. Namun di sini, alasan kami menggunakan fungsi ini adalah agar lingkungan AJAX memanggil fungsi panggilan balik jika berhasil di instance kelas yang sama yang memicu layanan Web. Ini cukup penting ketika Anda perlu mereferensikan properti dan metode kelas klien. Singkatnya, penggunaan fungsi ini akan membuat pengaksesan properti dan metode kelas klien yang memanggil layanan Web menjadi aman dan akurat. Jika tidak, instance kelas klien yang melakukan panggilan asinkron akan menjadi null karena respons layanan web dijalankan dalam konteks yang berbeda—konteks ini tidak lagi setara dengan konteks di mana permintaan panggilan web asinkron dibuat.

3) Menariknya, metode GetAreaInfo di sini bukan yang ada di layanan Web yang kita buat sebelumnya, tetapi milik kelas proksi layanan Web yang dibuat saat runtime—kelas proksi ini bertindak sebagai proksi klien untuk mengakses layanan Web ASMX di sisi server .

Dalam dua baris kode terakhir pada fungsi ShowPopupInfo di atas, parameter input acara digunakan untuk menyetel nilai dua variabel privat xAxis dan yAxis. Tujuan kami di sini adalah menampilkan popup sedekat mungkin dengan tempat yang diklik pengguna.

Berikut ini adalah kode implementasi fungsi panggilan balik yang sesuai ketika panggilan berhasil:

Berikut ini adalah fragmen referensi:

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(ini.get_uiElement());
var uiBody = $get(ini.get_uiBody());
jika (uiBody != nol)
{
var textNode = uiBody.firstChild;
jika (!textNode)
{
textNode = dokumen.createTextNode(hasil);
uiBody.appendChild(textNode);
}
kalau tidak
{
textNode.nodeValue = hasil;
}
jika (uiElement != nol)
{
uiElement.style.visibility = "terlihat";
uiElement.style.display = "sebaris";
uiElement.style.left = ini._xAxis + "px";
uiElement.style.top = ini._yAxis + "px";
}
}
},

Isinya cukup sederhana - atur data yang dikembalikan dari server ke konten tampilan jendela pop-up dan pastikan jendela ini ditampilkan sesuai situasi.

Di akhir pembuatan kelas klien, kita juga harus memberitahu framework AJAX untuk mendaftarkannya di sisi klien agar dapat diakses dari klien:

Berikut cuplikan kutipannya:
Layanan Saya.Location.registerClass("Layanan Saya.Lokasi");

Pada titik ini, kelas klien MyServices.Location telah berhasil dibuat. Jadi, bagaimana cara menggunakannya?

Pertama, kita perlu mendefinisikan instance baru dari kelas klien saat halaman dimuat. Untuk melakukan ini kita perlu memprogram fungsi pageLoad:

Berikut cuplikan kutipannya:
var lokasi = nol;
fungsi pageLoad(pengirim, args) {
lokasi = new MyServices.Location("modal", "modalBody");
lokasi.HidePopupInfo();
}

Kode di atas hanya membuat instance baru dari kelas MyServices.Location. Kemudian panggil salah satu fungsi anggota kelas klien untuk menyembunyikan jendela pop-up di halaman. Mengapa kita membuat instance kelas klien dalam fungsi pageLoad? Alasannya adalah ketika aliran kontrol lingkungan AJAX mencapai fungsi pageLoad, semua klien AJAX dan kode JavaScript yang ditentukan pengguna telah berhasil dimuat. Oleh karena itu, saat ini kami dapat dengan aman mengakses kode JavaScript yang ditentukan pengguna atau sistem mana pun.

Beberapa fungsi alat lainnya relatif sederhana dan tidak akan dijelaskan secara detail di sini.

5. Ringkasan

Pada artikel ini, saya menunjukkan cara memperluas kontrol Peta HTML dengan membuat layanan AJAX dan membuat kelas klien kustom Anda sendiri. Dalam kontrol yang diperluas, ketika area tertentu pada gambar diklik, kami dapat memberikan informasi detail yang relevan melalui metode AJAX baru tanpa harus menyegarkan seluruh halaman Web. Meskipun kami jarang menggunakan kontrol Peta ini di sebagian besar aplikasi Web (mungkin karena ini, kontrol ini dihilangkan dari toolbar VS2005), tetapi jika kami mengembangkan aplikasi Web yang terkait dengan sejumlah besar gambar, gambar, dan operasi peta, Peta setelah transformasi AJAX berdasarkan artikel ini Kontrol pasti akan membuat aplikasi web Anda lebih berwarna.

[Lampiran] Lingkungan debugging kode sumber artikel ini: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.