Controlling Server Control ClientIDs

Dalam latihan ini, Anda akan belajar bagaimana mengontrol ID sisi klien yang dihasilkan dari kontrol server ASP.NET oleh framework. Sebelumnya kerangka akan memodifikasi ID sisi klien untuk secara unik mengidentifikasi setiap kontrol. Hal ini terkadang kiri Anda dengan ID Anda didefinisikan di markup atau kadang-kadang kiri Anda dengan sesuatu yang terlihat seperti ini, "ctl00_MasterPageBody_ctl01_Textbox1".

Modifikasi dari sisi klien properti id karya besar untuk memastikan bahwa setiap elemen secara unik diidentifikasi, namun, untuk siapapun yang telah mencoba untuk melakukan apapun client side scripting ini menjadi sangat frustasi. Kemungkinannya adalah bahwa jika Anda telah bekerja di ASP.NET untuk waktu sama sekali Anda telah menjalankan ke dalam masalah ini. Masalahnya adalah bahwa sampai runtime Anda tidak tahu apa ID sisi client bisa, sehingga sulit untuk melakukan segala jenis script sisi klien. Selain itu, setiap modifikasi halaman, menambahkan kontrol menghapus, dapat mengakibatkan ID sisi klien yang berbeda yang dihasilkan.

Sekali lagi, jika Anda telah bekerja dengan ASP.NET untuk jumlah waktu yang Anda tahu ada bekerja di sekitar untuk masalah ini. Kontrol masing-masing memiliki sifat yang disebut ClientID yang hanya membaca dan perlengkapan ID sisi klien unik. Anda bisa menggunakan ini dalam kode di belakang ketika secara dinamis menambahkan script atau lebih umum menggunakan kode inline (lama ASP gaya) untuk memasok nilai dan script sisi client....

 

 

<script type="text/javascript">
    function DoSomething(){
        alert('<%= Control.ClientID %>');
    }
</script>

ASP.NET Web Forms 4 alamat kebutuhan ini dengan menyediakan empat ClientID 'mode', memberikan semua pengguna dari perilaku yang ada untuk kontrol penuh. Properti ID kontrol yang diubah sesuai dengan mode ClientIDMode dan kemudian digunakan sebagai id sisi klien.

Area nya meliputi:

 

• AutoID: Nilai default jika ClientIDMode tidak diatur di mana saja dalam hirarki kontrol. Hal ini menyebabkan klien ID sisi ke berperilaku seperti yang mereka lakukan di versi 2.0 (3,0 dan 3,5 tidak mengubah jalan ini kode) dari framework. Mode ini akan menghasilkan sebuah ID yang mirip dengan "ctl00_MasterPageBody_ctl01_Textbox1". 
• Mewarisi: Ini adalah perilaku default untuk mengontrol setiap. Hal ini terlihat induk kontrol untuk mendapatkan nilai untuk ClientIDMode. Anda tidak perlu mengatur ini di kontrol setiap saat adalah default, ini digunakan hanya ketika ClientIDMode telah berubah dan perilaku yang diinginkan baru untuk mewarisi dari induk kontrol.
• Statis: Mode ini tidak persis apa yang Anda pikir itu akan, itu membuat ID sisi klien statis. Artinya bahwa apa yang Anda dimasukkan untuk ID adalah apa yang akan digunakan untuk ID sisi klien. Peringatan, ini berarti bahwa jika ClientIDMode statis digunakan dalam kontrol mengulangi pengembang bertanggung jawab untuk memastikan klien sisi keunikan ID.
• Ditebak: Mode ini digunakan ketika kerangka kebutuhan untuk memastikan keunikan tetapi perlu dilakukan sehingga dalam cara yang dapat diprediksi. Penggunaan paling umum untuk modus ini adalah pada kontrol databound. Kerangka akan melintasi hirarki kontrol awalan ID yang disertakan dengan ID kontrol orang tua sampai mencapai kontrol dalam hirarki yang ClientIDMode didefinisikan sebagai statis. Dalam hal kontrol adalah ditempatkan di dalam kontrol databound akhiran dengan nilai yang mengidentifikasi contoh yang juga akan ditambahkan ke ID disediakan. Properti ClientIDRowSuffix digunakan untuk mengontrol nilai yang akan digunakan sebagai akhiran. Mode ini akan menghasilkan sebuah ID yang mirip dengan "Gridview1_Label1_0". 

Catatan:
Untuk memastikan bahwa setiap langkah dilakukan dengan benar, disarankan untuk membangun solusi di akhir setiap tugas.

 

 

Tugas 1 - Menetapkan ClientID Static untuk ASP.NET Kontrol

Dalam tugas ini, Anda akan mengaktifkan modus dalam kontrol ASP.NET StaticClientID beberapa dalam aplikasi web. Dengan melakukan ini, Anda akan dapat referensi mereka mulus dari sisi klien kode, dan dari CSS di langkah ke depan.

 

1. Buka Microsoft Visual Studio 2010 sebagai Administrator. Klik kanan pada Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.and pilih Run as administrator....
2. Buka WebFormsSampleApp.sln solusi file terletak di bawah \ Ex02-ClientID \ begin \ (Memilih folder yang sesuai dengan bahasa preferensi Anda).     

Catatan:
Skenario laboratorium terdiri dari satu halaman yang berisi daftar produk disaring berdasarkan kategori dari database AdventureWorksLT, yang memungkinkan pengguna untuk menambahkan mereka ke troli dan kemudian menyerahkan mereka dengan mengklik Check Out. File AdventureWorksLT.mdf harus disalin dari \ AspNetWebForms4 \ Sumber \ Aset folder ke folder App_Data dari proyek ini.

 

 

 

 Gambar 11
Melihat Aplikasi Web di Solution Explorer (C #)

 

Gambar 12 Melihat Aplikasi Web di Solution Explorer (VB)

 

• Buka kontrol pengguna ShoppingCart dalam mode Source. Untuk melakukan hal ini, di Solution Explorer, klik kanan file ShoppingCart.ascx bawah folder UserControls, lalu pilih Lihat Markup. 

Catatan:  

Ini adalah keranjang belanja di mana pengguna akan menempatkan pesanan. Kontrol ini diberikan pengguna ketika akan memiliki kemampuan untuk memperluas dan runtuh dengan mengambil keuntungan dari properti ClientID (modus Statis) melalui script sisi client. 

  

 

• Mengaktifkan mode ClientIDStatic dalam Panel ASP.NET ShopCartCollapsed. Untuk melakukan hal ini, mengganti asp ShopCartCollapsed saat ini: definisi Panel dengan kode disorot berikut. 

 

Catatan: 

Panel ini akan diberikan kepada klien sebagai div dengan Id yang sama sebagai kontrol server, dalam kasus ini, ShopCartCollapsed.

<asp:Panel ID="ShopCartCollapsed" ClientIDMode="Static" runat="server">

• Do the same as in the previous step but with the ShopCartExpanded ASP.NET Panel.

<asp:Panel ID="ShopCartExpanded" ClientIDMode="Static" runat="server">

Tugas 2 - Menetapkan ClientID ditebak untuk ASP.NET Kontrol

Dalam tugas ini, Anda akan menetapkan modus PredictableClientID ke daftar item produk yang diambil dari database, pengaturan id produk sebagai ClientIDRowSuffix tersebut.

Catatan: ASP.NET sebelumnya dihasilkan ID yang unik untuk mencegah tabrakan ID, dan tempat yang paling umum untuk jenis tabrakan ada di dalam kontrol databound. Modus diprediksi ini terutama dirancang untuk mengatasi masalah ini saat bekerja dengan kontrol databound.
Output mode diprediksi mengikuti pola [Awalan] _ [ID] _ [Sufiks], di mana setiap parameter mewakili berikut:
- Awalan: Menggarisbawahi-daftar terpisah dari semua kontrol orangtua dengan ID eksplisit / ClientID
- ID: Item diulang Server Id kontrol
- Suffix: Sebuah nomor auto-incrementing opsional digunakan untuk item berulang (hanya berlaku ketika menggunakan sebuah IDataKeysControl). Parameter ini ditetapkan dengan menyetel properti ClientIDRowSuffix dari kontrol server databound (bukan pada item yang berulang). Jika properti ini tidak diatur atau tidak tersedia, indeks baris akan digunakan di tempatnya.
Mengatur properti ClientIDRowSuffix hanya didukung oleh kontrol yang mengimplementasikan antarmuka baru yang disebut IDataKeysControl (saat ini dilaksanakan oleh ListView GridView dan). Interface ini menyediakan kemampuan untuk mengatur ClientIDRowSuffix dari elemen anak yang nilainya didasarkan pada data kunci tiap baris.

1. Menetapkan properti ClientIDRowSuffix ke ListView yang menunjukkan item yang ditempatkan di keranjang belanja. Untuk melakukan hal ini, ShoppingCart.ascx terbuka dalam modus Sumber, cari ListView ShoppingCartItemsLists, dan mengganti definisi kontrol saat ini dengan kode disorot berikut.   
   Catatan: ProductID adalah properti dari kelas yang item akan diulang (ShoppingCartItem), dan secara otomatis dimasukkan ke dalam pengumpulan data kunci ketika sumber data terikat.
2.