Kontrol seri AjaxControlToolkit yang dirilis dengan Asp.net Ajax 1.0 telah membawa banyak kemudahan bagi pengembang, namun banyak di antaranya tampaknya tidak sesempurna yang kita bayangkan. Saya telah banyak menggunakan kontrol AutoComplete akhir-akhir ini dan menemukan beberapa kekurangan atau kesalahan:
1. Dalam beberapa kasus, kesalahan "dua komponen dengan id yang sama" akan terjadi;
2. Sangat mudah untuk menyebabkan masalah "Tidak dapat membuka situs Internet,..., operasi telah dihentikan" di IE;
3. Sekalipun pengguna memasukkan banyak karakter, meskipun tidak ada hasil yang cocok, ia tetap akan memanggil metode server untuk mencoba mendapatkan nilai yang cocok, yang sia-sia menambah beban server;
4. Gaya daftar pelengkapan otomatis tidak terlalu bagus;
5. Tanda tangan metode server harus: string[] GetCompletionList(string prefixText, int count). Hal ini sangat fatal ketika ada beberapa kontrol LengkapiOtomatis di halaman yang perlu memperoleh data dari sumber data berbeda.
Untuk mengatasi masalah ini, pertama-tama Anda perlu mengetahui cara memodifikasi kode yang sesuai dan membuatnya efektif di aplikasi Anda sendiri. Untungnya, kontrol seri AjaxControlToolkit bersifat open source, sehingga kita dapat memodifikasinya sesuai kebutuhan kita. Buka solusi AjaxControlToolkit dengan VS2005, buka file AutoCompleteBehavior.js di folder AutoComplete, modifikasi dan kompilasi ulang, dan perbarui file AjaxControlToolkit.dll yang dihasilkan ke referensi proyek Anda sendiri untuk menerapkan kontrol AutoComplete kami yang dioptimalkan dan ditingkatkan.
Jadi, kode spesifik apa yang perlu diubah?
Untuk pertanyaan pertama, Anda perlu menambahkan sebelum baris AjaxControlToolkit.AutoCompleteBehavior.callBaseMethod(this, 'dispose');:
if (ini._popupBehavior) {
this._popupBehavior.dispose();
this._popupBehavior = null;
}
Pertanyaan kedua adalah mengubah baris document.body.appendChild(this._completionListElement); menjadi element.parentNode.appendChild(this._completionListElement);
Pertanyaan ketiga adalah menggunakan if (text.trim().length < this._minimumPrefixLength ) Penilaian ini menambahkan kondisi dan menjadi: if (text.trim().length < this._minimumPrefixLength || text.trim().length > 10) , yang membuat, ketika input pengguna melebihi 10 karakter, tidak ada perlu memanggil server untuk membaca nilai yang cocok.
Pertanyaan keempat, untuk mengatur gaya daftar pelengkapan otomatis, Anda dapat langsung memodifikasi kode berikut di metode inisialisasiCompletionList:
penyelesaianListStyle.backgroundColor = this._textBackground;
penyelesaianListStyle.color = this._textColor;
penyelesaianListStyle.border = 'bayangan tombol 1px padat';
penyelesaianListStyle.cursor = 'default';
penyelesaianListStyle.unselectable = 'tidak dapat dipilih';
penyelesaianListStyle.overflow = 'hidden';
tambahkan
definisi kelas gaya "completionList" pada halaman;
prefixText: this._currentPrefix, count: this._completionSetCount} Tambahkan parameter yang dikirim ke server di baris ini, yang menjadi:
{ prefixText: this._currentPrefix, hitung: this._completionSetCount, srcId: this.get_element().getAttribute("srcid") }
Oleh karena itu, tanda tangan metode sisi server untuk membaca item daftar pelengkapan otomatis dapat ditulis sebagai: string[] GetCompletionList(string prefixText, int count, string srcId). Ini berarti bahwa kita dapat mengatur string identifikasi terlebih dahulu untuk mengidentifikasi sumber datanya untuk kotak teks yang perlu menerapkan fungsi pelengkapan otomatis. Kode C# adalah seperti: tb.Attributes.Add("srcid", "xxx" ); Kemudian, Dalam metode GetCompletionList, data dapat dibaca secara tertarget berdasarkan nilai parameter yang diteruskan oleh klien.