ASP.NET - DataList-kontrol

DataList-kontrollen, ligner Repeater-kontrollen, bruges til at vise gentagne lister af projekter, der er begrænsede til denne kontrol. Dog tilføjer DataList-kontrollen som standard en tabel til dataelementerne.

Eksempel

DataList-kontrol
DataList-kontrol med stil
DataList-kontrol med <AlternatingItemTemplate>

Bind DataSet til DataList-kontrol

DataList-kontrollen, ligner Repeater-kontrollen, bruges til at vise gentagne lister af projekter, der er begrænsede til denne kontrol. Dog tilføjer DataList-kontrollen som standard en tabel til dataelementerne. DataList-kontrollen kan bindes til database-tabeller, XML-filer eller andre projektlister. Her vil vi vise, hvordan man binder en XML-fil til en DataList-kontrol.

Vi vil bruge følgende XML-fil ("cdcatalog.xml") i eksemplet:

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

Se denne XML-fil:cdcatalog.xml

Først skal vi importere "System.Data"-navnerummet. Vi har brug for dette navnerum til at arbejde sammen med DataSet-objektet. Inkluder følgende instruktion i toppen af .aspx-siden:

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

Opret derefter en DataSet for denne XML-fil og indlæs denne XML-fil i DataSet ved siden af sideindlæsning:

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

Dernæst opretter vi en DataList-kontrol i .aspx-siden. Indholdet i <HeaderTemplate>-elementet vises kun én gang i outputtet, mens indholdet i <ItemTemplate>-elementet matcher "record" i DataSet og gentages, til sidst vises indholdet i <FooterTemplate> kun én gang i outputtet:

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

Herefter tilføjer vi skriptet, der kan oprette en DataSet, og binder denne mycdcatalog DataSet til DataList-kontrollen. Vi bruger også disse elementer til at fylde DataList-kontrollen: <HeaderTemplate> som indeholder tabelhovedet, <ItemTemplate> som indeholder de data, der skal vises, og <FooterTemplate> som indeholder teksten. Bemærk, at DataList's gridlines-egenskab er sat til "both", for at vise tabelkanter:

<%@ 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>
Min CD Katalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" af
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Vis dette eksempel

Brug af stil

Du kan også tilføje stil til DataList-kontrollen, så den bliver mere trendy:

<%@ 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>
Min CD Katalog
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" af
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Vis dette eksempel

Brug af <AlternatingItemTemplate>

Du kan tilføje et <AlternatingItemTemplate> element efter <ItemTemplate> elementet, så kan du beskrive udseendet af skiftende rækker. Du kan stylisere data i <AlternatingItemTemplate> delen af DataList-kontrollen inden for:

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

Vis dette eksempel