Gunakan Kontrol Ikatan ASP+ Daftar
Nikhil Kothari
Microsoft Corporation
Juli 2000
Abstrak: Jelaskan kontrol ASP+ Repeater, Datalis dan Datagrid Server. Kontrol ini dapat mewujudkan sumber data, antarmuka pengguna aplikasi berbasis HTML. Diskusikan konsep yang terkait dengan kontrol ini dan merangkum contoh dasar menggunakan kontrol ini.
Daftar isi
Pendahuluan singkat
Bagaimana cara kerja kontrol yang mengikat daftar?
Kontrol repeater
Kontrol Datasist
Kontrol Datagrid
Repeater, Distalist atau Datagrid?
Sumber daya terkait
Unduh file contoh (56 kb) terkait dengan artikel ini.
Pendahuluan singkat
Kontrol Repeater, Distalist, dan Datagrid merupakan set kontrol web terkait di ruang nama di System.web.webControls dalam kerangka kerja Asp+ Page. Kontrol ini membuat konten dari daftar pengikat atau sumber data dari tampilan HTML. Oleh karena itu, mereka secara kolektif menyebutnya sebagai "daftar kontrol yang mengikat".
Mirip dengan kontrol web lainnya dalam kerangka kerja, kontrol ini menyediakan model pemrograman yang konsisten dan merangkum logika representatif yang terlepas dari browser. Karakteristik ini memungkinkan pengembang untuk memprogram dalam model objek tanpa harus menguasai pengetahuan teknis yang tidak konsisten dan kompleks terkait dengan HTML.
Ketiga kontrol ini dapat mewakili konten sumber data yang terkait dengan sumber data terkait sesuai dengan berbagai tata letak (termasuk daftar, kolom/kolom koran dan tata letak aliran (aliran HTML)). Selain itu, mereka juga memungkinkan Anda untuk membuat tata letak yang sama sekali berbeda atau sepenuhnya disesuaikan. Selain logika kemasan, ini juga menyediakan fungsi pemrosesan data yang ditransmisikan, manajemen status eksekusi, dan peristiwa yang dipicu. Akhirnya, mereka juga memberikan berbagai tingkat dukungan untuk operasi standar seperti seleksi, pengeditan, paging, dan penyortiran. Kontrol ini dapat menyederhanakan beberapa aplikasi web umum, termasuk laporan, keranjang belanja, daftar produk, hasil kueri dan menu navigasi.
Berikut ini akan lebih menggambarkan kontrol ini dan cara menggunakannya dalam aplikasi web Anda dan cara memilih kontrol.
Bagaimana cara kerja kontrol yang mengikat daftar?
Bagian ini adalah bahan latar belakang dari artikel lainnya. Tinjauan Metode Kerja Kontrol Ikatan Daftar Ini, Karakteristik Umumnya, dan Konsep Terkait tertentu.
Atribut DataSource
Setiap kontrol memiliki atribut sumber data dengan jenisnya adalah system.collections.icollection. Dalam kata -kata paling sederhana, sumber data adalah daftar atau kumpulan objek serupa.
Beberapa objek dalam kerangka ini menyediakan implementasi icollection. Koleksi ini termasuk system.data.dataview (biasanya digunakan untuk mengakses database relasional dan data XML), implementasi icollection umum (seperti arraylist dan hashtable), dan array.
Tidak seperti kontrol pengikatan data tradisional (mereka biasanya memerlukan set catatan ADO), kecuali untuk mengimplementasikan antarmuka icollection, kontrol pengikatan daftar ini tidak memperkuat persyaratan lain untuk sumber data mereka. Menurut desain, jenis dan struktur data yang dapat digunakan sebagai nilai atribut Source DataSource yang valid melalui jumlah yang besar, dan mereka dapat memaksimalkan sederhana dan fleksibilitas untuk kode aplikasi Anda.
Koleksi Proyek
Setiap daftar pengikat daftar berisi satu set proyek. Kontrol diatur ke dalam pengumpulan proyeknya dengan mendaftarkan sumber data saat ini dari objek -objek ini. Buat satu item untuk setiap objek dan gunakan untuk mewakili objek. Item -item ini adalah bagian dari struktur hierarkis kontrol yang terkandung dalam Kontrol Ikatan Daftar.
Tabel di bawah ini mencantumkan jenis proyek yang terkait dengan sumber data.
Jenis proyek default yang dibuat oleh proyek
BERGERBALITEM adalah penciptaan proyek dengan penawaran aneh dalam koleksi proyek
SelectedItem dibuat untuk proyek yang dipilih (terlepas dari apakah proyek tersebut merupakan proyek alternatif)
EditItem dibuat untuk proyek dalam mode pengeditan (apakah itu dipilih atau alternatif)
Kontrol akan dibuat pada saat yang sama dalam item berikut yang akan digunakan. Namun, mereka tidak terkait dengan data sumber data.
Header digunakan untuk mewakili informasi header
Catatan kaki digunakan untuk menunjukkan informasi yang dapat dilihat
Pemisah digunakan untuk mewakili konten antara setiap item yang ditunjukkan pada Gambar 1, dan hanya berlaku untuk repeater dan distalist
Simbol paging digunakan untuk menunjukkan UI pagination yang terkait dengan kontrol datagrid
Gambar 1. Dibandingkan dengan koleksi "proyek" koleksi "kontrol"
Ikatan dan pembuatan data proyek
Kontrol pengikat daftar mengikuti model pengikatan data eksplisit yang diimplementasikan di seluruh kerangka ASP+. Ini berarti bahwa kontrol hanya perlu terdaftar ketika metode databind dipanggil.
Ketika metode databind dipanggil, kontrol daftar akan mencantumkan sumber datanya, membuat proyek, dan menginisialisasi dengan mengekstraksi nilai dari sumber datanya. Jika manajemen status diaktifkan, kontrol juga akan menyimpan semua informasi yang diperlukan untuk membuat ulang proyeknya selama periode pemrosesan pengembalian halaman tanpa mengatur ulang sumber data.
Model pengikat data eksplisit memungkinkan kode aplikasi Anda untuk secara akurat menentukan kapan dan di mana sumber data diperlukan dalam urutan pemrosesan. Fitur ini membuat akses ke server database semakin efisien, dan akses ini biasanya merupakan operasi aplikasi web yang paling banyak dikonsumsi.
Aturan umum adalah bahwa databin harus dipanggil kapan pun Anda perlu membuat ulang proyek. Dalam kebanyakan kasus, Anda akan menghubungi databind ketika halaman Anda diminta untuk membuat koleksi proyek awal untuk pertama kalinya. Selama pelaksanaan tindak lanjut dari halaman ini, Anda perlu memanggil metode ini dalam berbagai prosedur pemrosesan acara yang diubah oleh koleksi proyek. Ini terjadi ketika kueri yang digunakan untuk membuat sumber data awal dapat terjadi. Ini juga dapat terjadi ketika status proyek berubah (seperti berubah dari hanya ke mode pengeditan).
gaya
Dengan menggunakan atribut gaya pada model objek, Anda dapat mendefinisikan semua kontrol datalist dan datagrid dan format dan penampilan yang dikandungnya. Atribut ini diizinkan untuk menyesuaikan font, warna, perbatasan, dan faktor penampilan lainnya. Atribut gaya kontrol itu sendiri (seperti warna latar depan, warna latar belakang, font dan gaya perbatasan) akan mempengaruhi representasi seluruh kontrol.
Selain itu, setiap kontrol berisi sejumlah besar atribut gaya yang cocok dengan jenis item yang dibuatnya, seperti sebagai itemStyle, alternatingItemStyle dan headersstyle. Datagrid menawarkan atribut gaya tingkat ketiga yang mempengaruhi semua sel di kolom tertentu. Setiap kolom berisi dalam kontrol dapat memiliki headlderstyle, footerstyle, dan itemstyte sendiri.
templat
Format kontrol gaya ditampilkan, sedangkan templat mendefinisikan konten dan representasi setiap item. Anda dapat menganggap templat sebagai lembar kode HTML, yang mendefinisikan struktur hierarki kontrol yang digunakan untuk mewakili proyek.
Kontrol Repeater dan Distalist digerakkan oleh template yang Anda tentukan untuk menyediakan berbagai properti templat yang dapat diatur, seperti itemTemplate, bolak -baliktemplate, dan headertemplate. Mirip dengan gaya, setiap templat sesuai dengan jenis proyek tertentu.
Kontrol datagrid bukan templat. Namun, TemplateColumns dalam koleksi kolom kontrol membuat penggunaan templat dalam datagrid. Setiap sel dalam templatecolum dapat berisi templat, yang sangat mirip dengan item dalam kontrol repeater atau distalis. Ini juga memungkinkan penyesuaian dalam datagrid.
Ikatan data di templat
Struktur hierarkis kontrol yang terkandung dalam item definisi templat. Dengan menggunakan ekspresi pengikatan data, atribut kontrol dalam struktur level ini dapat terikat pada properti data yang terkait dengan proyek ini.
Proyek tingkat induk logis sebagai templat disebut "wadah" dalam ekspresi pengikatan data. Setiap wadah memiliki atribut yang disebut Dataitem, yang mengutip data terkaitnya. Akibatnya, sebagian besar ekspresi pengikatan data khas dalam template mengikat atribut kontrol pada properti tertentu dari wadah.dataitem. Ikatan ini akan dijelaskan lebih lanjut dalam contoh -contoh berikut.
Kontrol repeater
Seperti yang disebutkan sebelumnya, kontrol repeater sepenuhnya didorong oleh templat, memungkinkan representasi dan tata letak yang sepenuhnya disesuaikan. Gambar di bawah ini menggambarkan fungsi ini.
Gambar 2. Daftar tautan simbol proyek tertaut yang dihasilkan menggunakan kontrol repeater
Dikutip dari repeater1.aspx:
<%@halaman bahasa = C# src = repeater1.cs warisan = sampel.repeter1page%>
Elastis
<ASP: Repeater runat = server id = linkslistrepeater
DataSource = '< %# SiteLinks %>'>
<nama template = headerTemplate>
<type ul = 1>
</template>
<name template = itemTemplate>
<li>
<Asp: hyperlink runat = server
text = '< %# databinder.eval.eval (container.dataitem, situs) %>'
navigateUrl = '< %# databinder.eval.eval.dataitem, situsurl) %>'>
</asp: hyperlink>
</li>
</template>
<Template Name = FooterTemplate>
</ul>
</template>
</sp: Repeater>
File .aspx ini menunjukkan pernyataan menghasilkan kontrol repeater untuk menghasilkan daftar simbol proyek.
Contoh ini menggambarkan metode pernyataan untuk mengatur sumber data dengan sintaks pengikat data (<%#...%>). Saat Anda memanggil metode databind, ekspresi dalam pengikatan data dijalankan. Dalam hal ini, properti DataSource dari repeater terikat ke properti Sitelinks di halaman, dan yang terakhir berisi referensi URL yang akan ditampilkan.
Repeater adalah satu -satunya kontrol yang memungkinkan fragmen HTML ada di templatnya. Dalam contoh ini, daftar simbol proyek dibagi menjadi tiga bagian:
Dimulai dengan daftar headertemplate (<uL type = 1>).
Akhiri label (</ul>) dengan daftar yang diwakili oleh footertemplate.
Badan utama daftar ditempatkan dari item daftar (<li>) yang dihasilkan dengan mengulangi itemTemplate di setiap objek dalam set Sitelinks.
Anda juga dapat menggunakan templat ini untuk menentukan tanda start (<abl>) di header, label akhir (</abl) menentukan tabel dalam catatan kaki, dan tentukan satu baris arloji tunggal di setiap proyek (<te>) Esensi Opsi penggantian ini akan mengarah ke representasi daftar.
Anda harus menentukan itemTemplate. Itu adalah satu -satunya templat yang diperlukan. Ketika templat lain tidak ditentukan, kontrol akan secara otomatis menggunakan itemTemplate ini untuk templat lain.
Dalam contoh berikut, itemTemplate berisi kontrol web hyperlink. Atribut teks dan navigaturl ini terikat pada properti data yang terkait dengan setiap proyek duplikat. Ini diselesaikan dengan menggunakan ekspresi pengikatan data (segera mencari ekspresi setelah membuat proyek).
Repeater1.cs:
sampel namespace {
Elastis
Public Class Repeater1Page: Page {
Repeater LinksListrePeater yang dilindungi;
Situs Icollection Publik {
mendapatkan {
Situs ArrayList = ArrayList baru ();
Situs.Add (SiteInfo baru (Microsoft Home,
http://www.microsoft.com);
Situs.Add (SiteInfo baru (MSDN Home,
http://msdn.microsoft.com);
Situs.Add (SiteInfo baru (beranda MSN,
http://www.msn.com));
Situs.Add (SiteInfo baru (Hotmail,
http://www.hotmail.com));
Situs kembali;
}
}
Override void overoad (EventArgs e) {{{{{{{{{
base.onload (e);
if (! isPostBack) {
// Ketika diminta halaman untuk pertama kalinya, pengikatan data dilakukan.
// Ini akan memanggil setiap kontrol secara rekursif dalam struktur hierarkis kontrol halaman ini.
databind ();
}
}
}
SiteInfo kelas yang disegel publik {
Situs string pribadi;
Siteurl string pribadi;
public SiteInfo (string sitename, string siteUrl) {{
this.siteName = Sitename;
this.siteUrl = situsurl;
}
Situs String Publik {
Dapatkan {return situs;}
}
Situs string publik {
geturn siteUrl;}
}
}
}
File .cs ini berisi kode yang muncul bersama di halaman ASPX di daftar sebelumnya.
Kelas Repeater1Page mencakup metode onload kelas halaman. Ini menunjukkan bahwa databind dipanggil dalam permintaan pertama halaman ini. Ini akan menyebabkan ekspresi pengikatan data pada halaman -halaman ini untuk menilai data dan membuat daftar kontrol repeater sumber data dan membuat proyek mereka. Hubungi metode databind hanya saat permintaan pertama. Alasan mengapa ini dapat berhasil adalah karena repeater dapat membuat kembali proyeknya dalam proses pengembalian status yang diawetkan sebelumnya, tanpa perlu contoh sumber data.
Halaman ini mengungkapkan atribut publik dari tipe icollection. Ini akan digunakan dalam ekspresi pengikatan data dari nilai atribut DataSource dari repeater. Akuisisi atribut menggunakan arraylist yang berisi satu set sekuens SiteInfo. Atribut ini bersifat publik, karena hanya halaman publik dan anggota perlindungan yang dapat digunakan dalam ekspresi pengikatan data.
Setiap objek SiteInfo memiliki dua atribut: Sitename dan SiteUrl. Ketika pengikatan data kontrol hyperlink di templat, akses atribut ini. Dalam ekspresi pengikatan kontrol ini, Container.Dataitem mengatakan bahwa perlu untuk mengikat item tertentu ke satu objek SiteInfo di atasnya. Databinder.eval (container.dataitem, sitename) mengunjungi properti nama siten dari objek SiteInfo saat ini.
Contoh repeater1 memperkenalkan Anda pada beberapa konsep dasar:
Template Definisi
Tata bahasa pengikat data dan ekspresi pengikatan data dalam templat
Gunakan icollection ArrayList sebagai sumber data
Hubungi metode databind selama halaman pemrosesan awal
Kontrol Datasist
Kontrol datasist adalah kontrol berorientasi template yang menyediakan kemampuan untuk menggunakan atribut gaya untuk memformat kemampuannya. Ini juga dapat menghasilkan beberapa kolom. Gambar 3 menggambarkan kedua karakteristik ini.
Gambar 3. Contoh yang dihasilkan dari kolom ganda datasist
Kutipan dari Datalist1.aspx:
<%@halaman bahasa = C# src = datalist1.cs warisan = sampel.datalist1page%>
Elastis
<Asp: Distalist runat = server id = peicalDataList
RepeatColumns = 2 RepeatDirection = Vertical RepeatMode = Tabel
lebar = 100%>
<Poperty Name = bolak -baliktemStyle>
<Asp: TableItemstyle Backcolor =#elyeee/>
</propt>
<name template = itemTemplate>
<ASP: Panel runat = server font-size = 12pt font-bold = true>
< %# ((Orang) container.dataitem) .name %>
</sp: Panel>
<ASP: Label runat = server width = 20px
Borderstyle = Solid Borderwidth = 1px BorderColor = Hitam
backcolor = '< %# (orang) container.dataitem)
</asp: label>
<ASP: Label runat = server font-size = 10pt
Text = '< %# getColorname ((orang) container.dataitem)
</asp: label>
</template>
</sh: datalis>
File .aspx ini menunjukkan pernyataan distalist yang digunakan untuk menghasilkan contoh ini.
Dalam contoh ini, tata letak multi -kolom dari distalist dicapai dengan mengatur properti pengulang ke "2". Mengatur pengulang sebagai "vertikal" akan membuat proyek diatur dari atas ke bawah, dan kemudian diatur dari kiri ke kanan. Sebaliknya, nilai yang ditetapkan ke "horizontal" akan menyebabkan proyek diatur dari kiri ke kanan, dan kemudian dari atas ke bawah.
Sintaks ASPX berisi pengaturan untuk beberapa atribut gaya datalist. Dalam contoh ini, lebar datasist diatur ke 100%dari tingkat induknya. Bolak -balik dengan latar belakang abu -abu adalah mendapatkan penampilan bergaris. Contoh ini juga menunjukkan bahwa templat dapat berisi definisi kontrol kompleks apa pun untuk memenuhi kebutuhan mendapatkan tata letak yang ideal di setiap proyek.
Akhirnya, ekspresi pengikatan data dalam templat ini mengikat pada tahap awal dengan mengonversi container.dataitem menjadi jenisnya. Ini tidak akan menyebabkan pengikatan selanjutnya dari pengikatan selanjutnya dari pengikatan penggunaan databinder. Eval (seperti yang ditunjukkan pada repeater1). Namun, metode ini dapat menghasilkan keterbacaan yang buruk. Contoh berikut juga memberikan contoh ekspresi yang memanggil metode getColorname (metode ini diimplementasikan dalam file yang didukung pada halaman ini).
DATALIST1.CS:
sampel namespace {
Elastis
Public Class DataList1Page: Page {
Peopledatalis detalis yang dilindungi;
String yang dilindungi getColorname (warna c) {
Kembali
Typedescriptor.getConverter (typeof (color)).
}
Prive void loadpeicallist () {
// Buat sumber data
Orang [] orang = orang baru [] {
Orang baru (Nikhil Kothari, Color.Green),
Orang baru (Steve Millet, Color.Purple), Color.Purple),
Orang baru (Chris Anderson, Color.Blue), Color.Blue,
Orang baru (Mike Pope, Color.Ralane),
Orang baru (Anthony Moore, Color.yllow),
Orang baru (Jon Jung, Color.Mediumaquamarine),
Orang baru (Susan Warren, Color.Slateblue),
Orang baru (Izzy Gryko, Color.Red)
};
// Atur sumber data kontrol
peicaldatalist.dataSource = pesple;
// dan buat kontrol menggunakan sumber data ini untuk membangun proyeknya
peicaldatalist.databind ();
}
Override void overoad (EventArgs e) {{{{{{{{{
base.onload (e);
if (! isPostBack) {
// Lihat halaman ini untuk pertama kalinya
Loadpeicallist ();
}
}
}
orang kelas tertutup publik {
Nama string pribadi;
Prive Color Favoritecolor;
Orang publik (nama string, color favoriteColor) {{
this.name = name;
this.favoritecolor = FavoriteColor;
}
Favorite Color Public {
geturn favoritecolor;}
}
nama string publik {
nama geturn;}
}
}
}
Pada halaman ini, atribut DataSource dari kontrol diatur melalui pengaturan program, yang diselesaikan dalam file ASPX. Hasil dari kedua metode tersebut sama. Metode seperti apa yang tidak dapat dipilih, Anda harus memanggil metode databind sehingga kontrol dapat mencantumkan sumber datanya dan membuat item yang ingin ditunjukkannya.
Sumber data yang digunakan dalam contoh ini adalah array sederhana objek orang. Karena setiap array mengimplementasikan metode icollection, array cocok untuk sumber data. Ini menunjukkan fleksibilitas yang dapat diperoleh ketika struktur dan jenis data dapat diperoleh ketika sumber data dapat diperoleh.
Contoh Datalist1 memperkenalkan konsep -konsep berikut:
Tentukan HTML UI yang kaya di templat
Gunakan array sederhana sebagai sumber data
Atur sumber data melalui program
Berbagai ekspresi diizinkan dalam sintaks pengikat data