ASP.NET - Kontrol DataList

Kontrol DataList, mirip dengan kontrol Repeater, digunakan untuk menampilkan daftar pengulangan item yang terbatas di bawah kontrol ini. Namun, kontrol DataList secara baku menambahkan tabel di atas item data.

Contoh

Kontrol DataList
Kontrol DataList dengan gaya
Kontrol DataList dengan <AlternatingItemTemplate>

Ikatan DataSet ke Kontrol DataList

Kontrol DataList, mirip dengan kontrol Repeater, digunakan untuk menampilkan daftar pengulangan item yang terbatas di bawah kontrol ini. Namun, kontrol DataList secara baku menambahkan tabel di atas item data. Kontrol DataList dapat diikat ke tabel database, berkas XML, atau daftar item lainnya. Disini, kita akan menunjukkan bagaimana mengikat berkas XML ke kontrol DataList.

Kami akan menggunakan berkas XML berikut ("cdcatalog.xml") dalam contoh ini:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>

Silakan lihat berkas XML ini:cdcatalog.xml

Pertama, impor namespace "System.Data" . Kita memerlukan namespace ini untuk bekerja dengan objek DataSet. Tambahkan perintah berikut di atas halaman .aspx:

<%@ Import Namespace="System.Data" %>

Selanjutnya, buat sebuah DataSet untuk berkas XML ini dan masukkan berkas XML ini ke DataSet saat halaman dijalankan untuk pertama kalinya:

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub

Lalu, kami membuat sebuah kontrol DataList di halaman .aspx. Konten <HeaderTemplate> hanya muncul sekali dalam output, sementara konten <ItemTemplate> akan muncul berulang-ulang menurut "record" dalam DataSet, akhirnya, konten <FooterTemplate> hanya muncul sekali dalam output:

<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Kemudian kami menambahkan skrip yang dapat membuat DataSet, dan mengikat DataSet mycdcatalog ke kontrol DataList. Kami juga menggunakan elemen ini untuk mengisi kontrol DataList: <HeaderTemplate> yang mengandung judul tabel, <ItemTemplate> yang mengandung item data yang akan ditampilkan, dan <FooterTemplate> yang mengandung teks. Perhatikan bahwa properti gridlines DataList diatur menjadi "both" untuk menampilkan garis tabel:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
gridlines="both" runat="server">
<HeaderTemplate>
Katalog CD Saya
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Hak Cipta codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Tampilkan Contoh Ini

Gunakan gaya

Anda juga dapat menambahkan gaya ke kontrol DataList untuk membuatnya lebih modis:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true"
<HeaderTemplate>
Katalog CD Saya
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Hak Cipta codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Tampilkan Contoh Ini

Gunakan <AlternatingItemTemplate>

Anda dapat menambahkan elemen <AlternatingItemTemplate> setelah elemen <ItemTemplate> untuk mendeskripsikan penampilan baris yang alternatif. Anda dapat memproses gaya bagian <AlternatingItemTemplate> dalam kontrol DataList:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
Katalog CD Saya
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Tampilkan Contoh Ini