Kontrol DataList – Mengenal ASP.NET Bagian 3.7

February 17th 2010

Kontrol DataList, seperti kontrol Repeater, digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Namun, kontrol DataList menambah tabel di item data secara default.

Mengikat DataSet ke DataList Control

The DataList kontrol, seperti kontrol Repeater, digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Namun, kontrol DataList menambah tabel di item data secara default. DataList control yang dapat terikat pada tabel database, file XML, atau daftar item lain. Di sini kita akan memperlihatkan cara untuk mengikat sebuah file XML ke kontrol DataList.

Kita akan menggunakan file XML berikut contoh kami ( “cdcatalog.xml”):

<?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>

Pertama, impor “System.Data” namespace. Namespace ini kita perlu untuk bekerja dengan objek DataSet. Sertakan direktif berikut pada bagian atas sebuah. Aspx halaman:

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

Kemudian, ciptakan sebuah DataSet untuk load file XML dan file XML ke dalam DataSet saat halaman pertama loaded:

<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 kita menciptakan dalam DataList. Halaman aspx. Isi dari elemen yang diberikan <HeaderTemplate> pertama dan hanya sekali dalam output, maka isi elemen <ItemTemplate> akan diulang untuk setiap “catatan” dalam DataSet, dan terakhir, isi unsur <FooterTemplate> diberikan kali dalam output:

 <html>
 <body>

 <form runat="server">
 <asp:DataList id="cdcatalog" runat="server">

 <HeaderTemplate>
 ...
 </HeaderTemplate>

 <ItemTemplate>
 ...
 </ItemTemplate>

 <FooterTemplate>
 ...
 </FooterTemplate>

 </asp:DataList>
 </form>

 </body>
 </html>

Lalu kita tambahkan script yang menciptakan mengikat DataSet dan DataSet ke mycdcatalog kontrol DataList. Kami juga mengisi kontrol DataList dengan <HeaderTemplate> yang berisi header meja, sebuah <ItemTemplate> yang berisi item data untuk menampilkan, dan <FooterTemplate> yang berisi teks. Perhatikan bahwa atribut gridlines dari DataList diatur ke “baik” untuk menampilkan tabel perbatasan:

 <%@ 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>
 My CD Catalog
 </HeaderTemplate>

 <ItemTemplate>
 "<%#Container.DataItem("title")%>" of
 <%#Container.DataItem("artist")%> -
 $<%#Container.DataItem("price")%>
 </ItemTemplate>

 <FooterTemplate>
 Copyright Hege Refsnes
 </FooterTemplate>

 </asp:DataList>
 </form>

 </body>
 </html>

Menggunakan Styles

Anda juga dapat menambahkan gaya ke kontrol DataList untuk membuat output lebih mewah:

   <%@ 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>
   My CD Catalog
   </HeaderTemplate>

   <ItemTemplate>
   "<%#Container.DataItem("title")%>" of
   <%#Container.DataItem("artist")%> -
   $<%#Container.DataItem("price")%>
   </ItemTemplate>

   <FooterTemplate>
   Copyright Hege Refsnes
   </FooterTemplate>

   </asp:DataList>
   </form>

   </body>
   </html>

Menggunakan <AlternatingItemTemplate>

Anda dapat menambahkan elemen <AlternatingItemTemplate> setelah elemen <ItemTemplate> untuk menggambarkan kemunculan bolak-baris output. Anda mungkin gaya data dalam bagian dalam <AlternatingItemTemplate> 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>
   My CD Catalog
   </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>
   &copy; Hege Refsnes
   </FooterTemplate>

   </asp:DataList>
   </form>

   </body>
   </html>

Contoh running program: