3. Gunakan komponen Repeater untuk menampilkan kumpulan data
Pengenalan terkait
Ada berbagai cara untuk menampilkan data di ASP.NET, di antaranya Repeater adalah komponen lain yang sudah ada. DataGrid akan selalu menampilkan data dalam bentuk "tabel". Saat kita ingin menampilkan data dengan lebih bebas, kita pasti akan menggunakan kontrol Repeater.
Ini mendefinisikan format keluaran data dalam bentuk Templat.
LANGKAH 1. Buat halaman. Kita dapat membuat komponen Repeater untuk menampilkan data dengan mengubah halaman aslinya. Ganti nama Location1.htm menjadi Location1.aspx. Hapus bagian asli halaman dan buat Kumpulan Data seperti pada bab sebelumnya, dengan memfilter Region_IDenterValue=1. Mari gunakan kontrol Repeater untuk membuat halaman dinamis.
jUntuk menggunakan templat untuk menentukan format keluaran, pertama-tama buatlah tabel. Kita bisa melihatnya melalui halaman ApplicationàDatabases
Struktur basis data.
[Gambar 3-1 Struktur database]
Berdasarkan struktur database, rancanglah tabel berikut.
[Gambar 3-2 Diagram templat]
kDatanya perlu diikat ke tabel di bawah ini. Seret item data dari Bindings di panel Aplikasi ke posisinya.
[Gambar 3-3 Kotak dialog pengikatan]
Setelah pengikatan data, Anda mendapatkan halaman berikut:
[Gambar 3-4 Halaman setelah pengikatan data]
Rasanya seperti déjà vu, karena Dreamwaver MX melanjutkan tradisi UltraDev dalam menyorot data. ③ Formulir representasi data juga dapat dipilih di kotak dialog Binding. Setelah mengklik item data pada halaman, formulir representasi data dapat dipilih untuk data terkait di Binding.
[Gambar 3-5 Bentuk representasi data]
Jika Anda ingin menggunakan tabel ini sebagai templat untuk menampilkan semua item data, Anda harus memilih semua tabel ini. Klik "+" di item Perilaku Server di panel Aplikasi dan pilih item Ulangi Wilayah 
[Gambar 3-6 Pilih Wilayah Pengulangan] [Gambar 3-7 Pilih metode pengulangan]
Tentukan metode yang ingin Anda ulangi di Repeat Region dan klik OK. Sekarang Anda dapat menekan "F12" untuk melihat pratinjau halaman.
LANGKAH 2 Analisis kodenya (Catatan: Untuk menampilkan kode, semua kode berikut memiliki spasi setelah "<" dan sebelum ">". Kami mohon maaf atas ketidaknyamanan ini!)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<Templat Barang>
< lebar tabel="75%" perbatasan="0" >
<tr>
< td width="18%" >Nama Lokasi< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Penampung) % > </ /td >
< /tr >
<tr>
< td >Kota< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Kontainer) % > </ /td >
< td width="19%" >Alamat< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Kontainer) % > </ /td >
< /tr >
<tr>
< td >Negara Bagian</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Kontainer) % > < /td >
< td >Kode< /td >
< td > < %# DataSet1.FieldValue("KODE", Penampung) % > < /td >
< /tr >
<tr>
< td >Telepon< /td >
< td > < %# DataSet1.FieldValue("TELEPON", Kontainer) % > < /td >
< td >Faks< /td >
< td > < %# DataSet1.FieldValue("FAX", Kontainer) % > < /td >
< /tr >
< /tabel >
< /Templat Barang >
< /ASP:Pengulang >
ASP.net menampilkan semua data berulang kali dengan membuat template ItemTemple, jadi jika Anda ingin mengatur gaya Repeater, Anda dapat melakukannya dengan mengatur template.
Kita juga dapat menambahkan template lain untuk mendapatkan efek yang kita inginkan.
AlternatingItemTemplate: Mengimplementasikan data lintas tampilan. Data lintas tampilan dengan template ItemTemplate asli
SepartorTemplate: Templat pemisah. Dapat digunakan untuk memisahkan baris data.
Templat Tajuk: Templat tajuk. Ditampilkan di atas dengan semua data.
Templat Footer: Templat catatan kaki. Ditampilkan di bagian bawah dengan semua data.
Bentuk desainnya sama dengan ItemTemplate. Kelilingi saja bagian yang ingin Anda templat dengan spidol.
Ada jalan pintas untuk memasukkan kode melalui Dreamwaver MX. Klik tab ASP.NET pada panel Sisipkan, lalu klik
tandai, kotak dialog penambahan tanda akan muncul. Pilih proyek Templat di Tag ASP.NET. Anda kemudian dapat memilih kode yang ingin Anda tambahkan. Dreamwaver MX akan menambahkan kode pada posisi dimana kursor input asli Anda berada.
[Gambar 2-1 Kotak Dialog Tambahkan Penanda]
Berikut kode AlternatingItemTemplate, SepartorTemplate, HeaderTemplate, dan FooterTemplate yang dapat disisipkan pada < ASP:Repeater > < /ASP:Repeater >.
< headertemplate >< font color="#666666" size="4" >Semua
Lokasi< /font >< /headertemplate >
<TemplatItem Alternatif>
< lebar tabel="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >Nama Lokasi< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Penampung) % >
</ /td>
< /tr >
<tr>
< td >Kota< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Kontainer) % > </ /td >
< td width="24%" >Alamat< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Kontainer) % > </ /td >
< /tr >
<tr>
< td >Negara Bagian</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Kontainer) % > < /td >
< td >Kode< /td >
< td > < %# DataSet1.FieldValue("KODE", Penampung) % > < /td >
< /tr >
<tr>
< td >Telepon< /td >
< td > < %# DataSet1.FieldValue("TELEPON", Kontainer) % > < /td >
< td >Faks< /td >
< td > < %# DataSet1.FieldValue("FAX", Kontainer) % > < /td >
< /tr >
< /tabel >
< /AlternatingItemTemplate >
< separatortemplate >< jam lebar="70%" align="kiri" >
< /template pemisah >
< footertemplate >< font color="#666666" size="4" >Akhir< /font >< /footertemplate >
Ketika IIS mem-parsing kode, ia akan menempatkan template ke posisi relatif berdasarkan kata kunci dan mendapatkan halaman yang diminta semula.
Halaman yang dihasilkan oleh program di atas adalah sebagai berikut:
[Gambar 2-1 Halaman terakhir]
Komponen Repeater dapat membuat halaman lebih bebas, namun setiap baris hanya dapat menampilkan satu kumpulan data. Jika Anda ingin membuat halaman yang lebih bebas, mari lanjutkan ke bagian berikutnya dan gunakan kontrol DataList untuk menampilkan data.