DreamwaverMX dan ASP.NET(4)

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 21:06:17

4. Gunakan komponen DataList untuk menampilkan kumpulan data

Pengenalan terkait:

DataList adalah kontrol Repeater yang ditingkatkan. Selain fungsi asli Repeater, ini juga dapat mengatur jumlah data yang ditampilkan dalam satu baris (RepeatColumn), templat yang dipilih (SelectedItemTemple), dan templat item yang diedit (EditTemplate). Namun, DataList akan menyusun data keluaran dalam sebuah tabel dan menampilkannya, sedangkan Repeater lebih setia pada definisi template dan tidak akan menambahkan tag HTML apa pun. (Catatan: Untuk menampilkan kode, semua kode berikut memiliki spasi setelah "<" dan sebelum ">". Kami mohon maaf atas ketidaknyamanan ini!)

LANGKAH 1Buat halaman

Halaman yang ingin kita buat seperti gambar di bawah ini. Ketika kita mengklik hyperlink Detail, informasi detail akan muncul, seperti yang ditunjukkan pada item pertama. Saat Anda mengklik Tutup, detailnya akan ditutup dan dikembalikan ke tampilan aslinya.

[Gambar 1-1 Halaman Demonstrasi]

Mulailah dengan memilih data yang ingin Anda tampilkan. Untuk menampilkan data Eropa (yaitu Region_ID=3), kita dapat memilih untuk memfilter data Region_ID=3 di pengaturan Dataset.

[Gambar 1-2 Penyaringan data]

Gunakan kontrol Daftar Data untuk membuat halaman yang menampilkan data secara singkat. Pertama mari kita buat halaman tanpa data. Kemudian pilih Perilaku server di panel Aplikasi. Klik "+" dan pilih Daftar Data.

[Gambar 1-3 halaman pemilihan DataList]

Di kotak dialog yang muncul, kita dapat menambahkan templat halaman jika diperlukan.

u Tajuk: templat tajuk

u Item: Templat item data

u Item Alternatif: Templat tampilan silang

u Edit Item: Memodifikasi templat ((tidak ditampilkan secara default, harus ditampilkan melalui respons acara)

u Item yang Dipilih: Templat yang ditampilkan setelah pemilihan (juga harus ditampilkan melalui respons acara)

u Pemisah: templat terpisah

u Footer: templat bagian bawah tabel

[Gambar 1-4 Kotak dialog Edit DataList]
Kita bisa membuat template yang dibutuhkan dengan menambahkan kode HTML pada Contents, dan kita juga bisa mengkliknya

tombol untuk menambahkan item data. Setelah mengklik tombol tersebut, kotak dialog item data akan muncul sehingga Anda dapat memilih data yang diperlukan. Dan tambahkan di kotak masukan Isi

< %# DataBinder.Eval(Container.DataItem, "item data") % >

Kode tersebut digunakan untuk menampilkan data.

[Gambar 1-5 Menambahkan item data]

Untuk mencapai efek pratinjau, pertama-tama tambahkan kode: Nama Lokasi ke Header. Digunakan untuk menampilkan judul. Tambahkan kode ke Item:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, gunakan Nama_Lokasi sebagai judul setiap item.

Tambahkan kode ke Item Alternatif

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >

Menampilkan data dalam warna font yang berbeda.

Meskipun Item yang Dipilih tidak dapat langsung ditampilkan, kita juga harus menuliskan kodenya untuk panggilan nanti. sebagai berikut:

Alamat:

< %# DataSet1.FieldValue("ALAMAT", Wadah) % >

 

Kota:

< %# DataSet1.FieldValue("KOTA", Kontainer) % >

 

Telepon:

< %# DataSet1.FieldValue("TELEPON", Kontainer) % >

 

Klik OK, lalu pratinjau halamannya. Gambar di bawah ini adalah efek dari kode di atas. Kami akan menerapkan efek menampilkan Item yang Dipilih sebentar lagi.

[Gambar 1-6 pratinjau awal]
Salah satu perbedaan antara DataList dan Repeater adalah Anda dapat mengatur satu baris untuk menampilkan banyak data, yang dapat diatur di jendela pengeditan DataList.

[Gambar 1-7 Siapkan satu baris untuk menampilkan banyak data]

Memilih opsi Gunakan Line Breaks hanya memiliki tag untuk memisahkan data. Pilih Gunakan Tabel untuk menghasilkan output dalam bentuk tabel, dan Anda dapat menentukan jumlah data yang ditampilkan dalam satu baris dengan mengatur Kolom Tabel.

LANGKAH2 Tulis kode

Item yang dipilih perlu ditampilkan melalui event, jadi kita perlu membuat tombol untuk memulai event.

j Tambahkan LinkButton untuk menghasilkan acara. Pindahkan kursor antara <ItemTemplate> dan </ItemTemplate> di jendela kode sumber, klik tag lainnya

, pilih kontrol asp:LinkButton di kotak dialog pop-up.

[Gambar 2-1 kotak dialog Pemilih Tag]

Di kotak dialog Edit LinkButton, atur properti LinkButton. Masukkan nama:Detail di kotak input ID.

Masukkan "Detail" di Nama Perintah untuk perintah yang menghasilkan acara, dan masukkan Detail di kotak dialog Teks (akan ditampilkan)

[Gambar 2-2 kotak edit LinkButton]

Kemudian pilih warna yang diinginkan di Layout dan klik OK untuk menghasilkan kode.

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >

Untuk mendapatkan efek ini pada tampilan silang, kita perlu memasukkan kode yang sama di <AlternatingItemTemplate> dan </AlternatingItemTemplate>.
Pada saat yang sama, untuk menutup template pilihan pop-up, sebuah perintah juga perlu dibuat, jadi satu lagi Linkbutton perlu ditambahkan. Ini memerlukan penyisipan kode di <SelectedItemTemplate></SelectedItemTemplate>:

< asp:LinkButton BackColor="#FFFFFF" CommandName="Tutup" ForeColor="#000000" ID="Tutup" runat="server" Text="Tutup" >< /asp:LinkButton >

kDengan perintah, kita juga perlu menggunakan program untuk menafsirkan perintah tersebut. Sebenarnya prosesnya tidak rumit dan hanya perlu menambahkan sedikit kode saja. Tambahkan kode berikut di < head ></ /head >:

< skrip bahasa = "VB" runat = "server" >

Sub DataList_ItemCommand(pengirim sebagai Objek,e sebagai DataListCommandEventArgs)

Jika e.CommandSource.CommandName="Detail" Lalu

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Tutup" Lalu

DataList1.Indeks Terpilih=-1

Akhiri Jika

Daftar Data1.DataBind()

Akhiri sub

</ /skrip >

Program dapat memperoleh perintah (CommandName) ketika Anda mengklik LinkButton untuk menentukan program yang akan dijalankan. Ketika properti SelectedIndex dari DataList diatur ke e.Item.ItemIndex, halaman SelectedItemTemplate akan dibuka. Jika perintahnya adalah Tutup dan properti SelectedIndex dari DataList diatur ke -1 (yaitu, tidak ada item data yang dipilih), DataList akan menggunakan templat item ItemTemplate untuk menampilkan item data ini.

Tambahkan juga cuplikan kode di < asp:DataList >

OnItemCommand="DataList_ItemCommand"

Untuk mendeklarasikan hubungan dengan segmen program DataList_ItemCommand.

Tekan "F12" untuk melihat pratinjau, dan halaman akan menampilkan efek yang diharapkan.

[Gambar 2-3 Versi pratinjau akhir]
Terlampir adalah kode sumber dari segmen program utama:

Sub DataList_ItemCommand(pengirim sebagai Objek,e sebagai DataListCommandEventArgs)

Jika e.CommandSource.CommandName="Detail" Lalu

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Tutup" Lalu

DataList1.Indeks Terpilih=-1

Akhiri Jika

Daftar Data1.DataBind()

Akhiri sub

<form runat="server" >

< asp:DataList id="DataList1"

runat="server"

UlangiKolom = "1"

RepeatDirection="Vertikal"

RepeatLayout="Aliran"

Sumber Data="< %# DataSet1.DefaultView % >"

OnItemCommand="DataList_ItemCommand" >

<Templat Tajuk>

Nama Lokasi < /HeaderTemplate >

<Templat Barang>

< %# DataSet1.FieldValue("LOCATION_NAME", Penampung) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >

< /Templat Barang >

< AlternatingItemTemplate >

< %# DataSet1.FieldValue("LOCATION_NAME", Penampung) % >



< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

<SelectedItemTemplate>Alamat:

< %# DataSet1.FieldValue("ALAMAT", Wadah) % >

 

Kota:

< %# DataSet1.FieldValue("KOTA", Kontainer) % >

 

Telepon:

< %# DataSet1.FieldValue("TELEPON", Kontainer) % >

 

< asp:LinkButton BackColor="#FFFFFF" CommandName="Tutup" ForeColor="#000000" ID="Tutup" runat="server" Text="Tutup" >< /asp:LinkButton >

< /TemplateItem yang Dipilih >

< /asp:Daftar Data >

< /bentuk>

DataList juga memiliki template untuk Edit Item, yang terutama digunakan untuk pembaruan data. Buku ini akan diperkenalkan di bagian selanjutnya.