ASP.NET - DataList na control

Ang DataList na control, katulad ng Repeater na control, ay ginagamit upang ipakita ang kumakalapit na listahan ng mga proyekto na naka-limita sa control. Gayunpaman, ang DataList na control ay magdadagdag ng talahanayan sa mga item ng data ng default.

Halimbawa

DataList na control
DataList na control na may istilong DataList
DataList na control na may <AlternatingItemTemplate>

I-bind ang DataSet sa DataList na control

Ang DataList na control, katulad ng Repeater na control, ay ginagamit upang ipakita ang kumakalapit na listahan ng mga proyekto na naka-limita sa control. Gayunpaman, ang DataList na control ay magdadagdag ng talahanayan sa mga item ng data ng default. Ang DataList na control ay maaaring ibanggo sa database table, XML na file, o iba pang listahan ng mga proyekto. Dito, ipapakita namin kung paano i-bind ang XML na file sa DataList na control.

Magiging gamit namin ang sumusunod na XML na file ("cdcatalog.xml") sa halimbawa:

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

Ginawa na ang XML na file:cdcatalog.xml

Una, ilagay ang namespace ng "System.Data" na kailangan namin upang magtrabaho kasama ang DataSet na objekto. Ilang ng iniugnay sa itaas ng .aspx na pahina ang sumusunod na utos:

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

Susunod na, lumikha ng isang DataSet para sa XML na file at ilagay ang XML na file sa DataSet kapag nagpa-load ang pahina sa unang pagkakataon:

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

Pagkatapos, lumikha kami ng isang DataList na kontrol sa .aspx na pahina. Ang nilalaman ng <HeaderTemplate> ay lumilitaw sa output nang isang beses lamang, habang ang nilalaman ng <ItemTemplate> ay sumusunod sa 'record' sa DataSet, at sa wakas, ang nilalaman ng <FooterTemplate> ay lumilitaw sa output nang isang beses lamang:

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

Pagkatapos, idagdag namin ang skrip para lumikha ng DataSet at binindtan ang mycdcatalog DataSet sa DataList kontrol. Ginagamit din namin ang mga elemento na ito upang punan ang DataList kontrol: ang <HeaderTemplate> na naglalaman ng table header, ang <ItemTemplate> na naglalaman ng naipapakita na data items, at ang <FooterTemplate> na naglalaman ng teksto. Mangyaring takda na, ang gridlines property ng DataList ay nakatatakda bilang "both" upang ipakita ang table borders:

<%@ 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")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

แสดงตัวอย่างนี้

Gamit ang estilo

Maaari mo ring idagdag ang estilo sa DataList kontrol para mas stylish ito:

<%@ 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")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

แสดงตัวอย่างนี้

Gamit ang <AlternatingItemTemplate>

Maaari mong idagdag ang <AlternatingItemTemplate> sa likod ng <ItemTemplate> para malaman ang hitsura ng alternating rows. Maaari mong magstyle ng data sa bahagi ng <AlternatingItemTemplate> sa loob ng DataList kontrol:

<%@ 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")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" ของ
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

แสดงตัวอย่างนี้