开发学院

您的位置:首页>教程>正文

教程正文

ASP.NET - DataList 控件

ASP.NET - DataList 控件

    DataList 控件,类似于 Repeater 控件,用于显示限制于该控件的项目的重复列表。不过,DataList 控件会默认地在数据项目上添加表格。

    把 DataSet 绑定到 DataList 控件

    DataList 控件,类似于 Repeater 控件,用于显示限制于该控件的项目的重复列表。不过,DataList 控件会默认地在数据项目上添加表格。DataList 控件可被绑定到数据库表、XML 文件或者其他项目列表。这里,我们将展示如何把 XML 文件绑定到一个 DataList 控件。

    我们将在例子中使用下面的 XML 文件 ("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>

    请查看该 XML 文件:cdcatalog.xml

    首先,导入 "System.Data" 命名空间。我们需要此命名空间与 DataSet 对象一同工作。在 .htmlx 页面的顶部包含下面这条指令:

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

    接下来,为这个 XML 文件创建一个 DataSet,并把此 XML 文件在页面首次加载时载入 DataSet:

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

    然后我们在 .htmlx 页面中创建一个 DataList 控件。<HeaderTemplate> 元素中的内容在输出中仅出现一次,而 <ItemTemplate> 元素的内容会对应 DataSet 中的 "record" 重复出现,最后,<FooterTemplate> 的内容在输出中仅出现一次:

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

    然后我们添加可创建 DataSet 的脚本,并把这个 mycdcatalog DataSet 绑定到 DataList 控件。我们同样使用这些元素来填充该 DataList 控件:包含表头的 <HeaderTemplate>,包含要显示的数据项的 <ItemTemplate>,以及包含文本的 <FooterTemplate>。请注意,DataList 的 gridlines 属性被设置为 "both",以显示表格边框:

    <%@ 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 开发学院.com.cn
    </FooterTemplate>
    
    </asp:DataList>
    </form>
    
    </body>
    </html>


    使用样式

    您也可以向 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"
    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 开发学院.com.cn
    </FooterTemplate>
    
    </asp:DataList>
    </form>
    
    </body>
    </html>


    使用 <AlternatingItemTemplate>

    您可以在 <ItemTemplate> 元素后添加 <AlternatingItemTemplate> 元素,这样就可以描述交替行的外观了。您可以在 DataList 控件内部对 <AlternatingItemTemplate> 部分的数据进行样式化处理:

    <%@ 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; 开发学院.com.cn
    </FooterTemplate>
    
    </asp:DataList>
    </form>
    
    </body>
    </html>