网络编程
位置:首页>> 网络编程>> ASP.NET>> AlternatingItemTemplate类似于 ItemTemplate 元素

AlternatingItemTemplate类似于 ItemTemplate 元素

  发布时间:2023-07-14 13:09:07 

标签:DataList,Web,服务器控件

DataList Web 服务器控件
通过使用模板显示数据源中的项。通过操作组成 DataList 控件的不同组件的模板(如 ItemTemplate 和 HeaderTemplate),可以自定义该控件的外观和内容。
<asp:DataList id="DataList1"
     CellPadding="pixels"
     CellSpacing="pixels"
     DataKeyField="DataSourceKeyField"
     DataSource='<% databindingexpression %>'
     ExtractTemplateRows="True|False"
     GridLines="None|Horizontal|Vertical|Both"
     RepeatColumns="ColumnCount"
     RepeatDirection="Vertical|Horizontal"
     RepeatLayout="Flow|Table"
     ShowFooter="True|False"
     ShowHeader="True|False"
     OnCancelCommand="OnCancelCommandMethod"
     OnDeleteCommand="OnDeleteCommandMethod"
     OnEditCommand="OnEditCommandMethod"
     OnItemCommand="OnItemCommandMethod"
     OnItemCreated="OnItemCreatedMethod"
     OnUpdateCommand="OnUpdateCommandMethod"
     runat="server">
   <AlternatingItemStyle ForeColor="Blue"/>
   <EditItemStyle BackColor="Yellow"/>
   <FooterStyle BorderColor="Gray"/>
   <HeaderStyle BorderColor="Gray"/>
   <ItemStyle Font-Bold="True"/>
   <PagerStyle Font-Name="Ariel"/>
   <SelectedItemStyle BackColor="Blue"/>
   <HeaderTemplate>
      Header template HTML
   </HeaderTemplate>
   <ItemTemplate>
      Item template HTML
   </ItemTemplate>
   <AlternatingItemTemplate>
      Alternating item template HTML
   </AlternatingItemTemplate>
   <EditItemTemplate>
      Edited item template HTML
   </EditItemTemplate>
   <SelectedItemTemplate>
      Selected item template HTML
   </SelectedItemTemplate>
   <SeparatorTemplate>
      Separator template HTML
   </SeparatorTemplate>
   <FooterTemplate>
      Footer template HTML
   </FooterTemplate>
</asp:DataList>
备注
通过定义模板,可以操作控件的布局和内容。下表列出 DataList 控件的不同模板。
AlternatingItemTemplate 类似于 ItemTemplate 元素,但在 DataList 控件中隔行(交替行)呈现。通过设置 AlternatingItemTemplate 元素的样式属性,可以为其指定不同的外观。 
EditItemTemplate 项在设置为编辑模式后的布局。此模板通常包含编辑控件(如 TextBox 控件)。当 EditItemIndex 设置为 DataList 控件中某一行的序号时,将为该行调用 EditItemTemplate。 
FooterTemplate 在 DataList 控件的底部(脚注)呈现的文本和控件。 
FooterTemplate 不能是数据绑定的。
HeaderTemplate 在 DataList 控件顶部(标头)呈现的文本和控件。 
HeaderTemplate 不能是数据绑定的。
ItemTemplate 为数据源中的每一行都呈现一次的元素。 
SelectedItemTemplate 当用户选择 DataList 控件中的一项时呈现的元素。通常的用法是增加所显示的数据字段的个数并以可视形式突出标记该行。 
SeparatorTemplate 在各项之间呈现的元素。 
SeparatorTemplate 项不能是数据绑定的。
通过为 DataList 控件的不同部分指定样式,可以自定义该控件的外观。下表列出用于控制 DataList 控件不同部分的外观的样式属性。
样式属性 说明 样式类 
AlternatingItemStyle 隔项(交替项)的样式。 TableItemStyle 
EditItemStyle 正在编辑的项的样式。 TableItemStyle 
FooterStyle 列表结尾处的脚注(如果有的话)的样式。 TableItemStyle 
HeaderStyle 列表开始处的标头(如果有的话)的样式。 TableItemStyle 
ItemStyle 单个项的样式。  Style 
SelectedItemStyle 选定项的样式。 TableItemStyle 
SeparatorStyle 各项之间的分隔符的样式。 TableItemStyle 
注意   DataList 控件与 Repeater 控件的不同之处在于,前者支持定向呈现(通过使用 RepeatColumns 和 RepeatDirection 属性)并且有用于在 HTML 表内呈现的选项。
Items 集合包含 DataList 控件的数据绑定成员。当在 DataList 控件上调用 DataBind 方法时该集合将被填充。首先添加标头(如果有的话),然后为每个数据行添加一个 Item 对象。如果存在 SeparatorTemplate,则 Separators 将被创建并添加到各项之间,但不会添加到 Items 集合中。
在为 DataSource 中的行创建所有项之后,Footer 被添加到该控件中(但不会添加到 Items 集合中)。最后,该控件为每一项(包括标头、脚注和分隔符)引发 ItemCreated 事件。与大多数集合不同,Items 集合不公开 Add 或 Remove 方法。但是,可以通过为 ItemCreated 事件提供处理程序来修改项内的内容。
警告   文本在 DataList 控件中显示之前并非 HTML 编码形式。这使得可以在文本中的 HTML 标记间嵌入脚本。如果控件值是用户输入的,请务必验证这些值以防止出现安全漏洞。
有关 DataList Web 服务器控件的属性和事件的详细信息,请参见 DataList 类文档。
示例
以下示例说明如何使用 DataList 控件显示数据源中的项。
[Visual Basic]
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
   <script runat="server">
      Function CreateDataSource() As ICollection
         Dim dt As New DataTable()
         Dim dr As DataRow
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         Dim i As Integer
         For i = 0 To 9
            dr = dt.NewRow()
            dr(0) = "Item " & i.ToString()
            dt.Rows.Add(dr)
         Next i
         Dim dv As New DataView(dt)
         Return dv
      End Function 'CreateDataSource
      Sub Page_Load(sender As Object, e As EventArgs)
         If Not IsPostBack Then
            DataList1.DataSource = CreateDataSource()
            DataList1.DataBind()
         End If
      End Sub 'Page_Load
      Sub Button1_Click(sender As Object, e As EventArgs)
         If DropDown1.SelectedIndex = 0 Then
            DataList1.RepeatDirection = RepeatDirection.Horizontal
         Else
            DataList1.RepeatDirection = RepeatDirection.Vertical
         End If 
         If DropDown2.SelectedIndex = 0 Then
            DataList1.RepeatLayout = RepeatLayout.Table
         Else
            DataList1.RepeatLayout = RepeatLayout.Flow
         End If 
         DataList1.RepeatColumns = DropDown3.SelectedIndex + 1
         If Check1.Checked = True And DataList1.RepeatLayout = RepeatLayout.Table Then
            DataList1.BorderWidth = Unit.Pixel(1)
            DataList1.GridLines = GridLines.Both
         Else
            DataList1.BorderWidth = Unit.Pixel(0)
            DataList1.GridLines = GridLines.None
         End If
      End Sub 'Button1_Click
   </script>
<body>
   <form runat="server">
      <h3>DataList Example</h3>
      <asp:DataList id="DataList1" runat="server"
           BorderColor="black"
           CellPadding="3"
           Font-Name="Verdana"
           Font-Size="8pt">
         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>
         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>
         <HeaderTemplate>
            Items
         </HeaderTemplate>
         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
         </ItemTemplate>
      </asp:DataList>
      <p>
      <hr noshade align="left" width="300px">
      RepeatDirection:
      <asp:DropDownList id=DropDown1 runat="server">
         <asp:ListItem>Horizontal</asp:ListItem>
         <asp:ListItem>Vertical</asp:ListItem>
      </asp:DropDownList><br>
      RepeatLayout:
      <asp:DropDownList id=DropDown2 runat="server">
         <asp:ListItem>Table</asp:ListItem>
         <asp:ListItem>Flow</asp:ListItem>
      </asp:DropDownList><br>
      RepeatColumns:
      <asp:DropDownList id=DropDown3 runat="server">
         <asp:ListItem>1</asp:ListItem>
         <asp:ListItem>2</asp:ListItem>
         <asp:ListItem>3</asp:ListItem>
         <asp:ListItem>4</asp:ListItem>
         <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList><br>
      Show Borders: 
      <asp:CheckBox id=Check1 runat="server" /><p>
      <asp:LinkButton id=Button1 
           Text="Refresh DataList" 
           OnClick="Button1_Click" 
           runat="server"/>
   </form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
   <script runat="server">
      ICollection CreateDataSource() 
      {
         DataTable dt = new DataTable();
         DataRow dr;
         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         for (int i = 0; i < 10; i++) 
         {
            dr = dt.NewRow();
            dr[0] = "Item " + i.ToString();
            dt.Rows.Add(dr);
         }
         DataView dv = new DataView(dt);
         return dv;
      }
      void Page_Load(Object Sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
            DataList1.DataSource = CreateDataSource();
            DataList1.DataBind();
         }
      }
      void Button1_Click(Object Sender, EventArgs e) 
      {
         if (DropDown1.SelectedIndex == 0)
            DataList1.RepeatDirection = RepeatDirection.Horizontal;
         else
            DataList1.RepeatDirection = RepeatDirection.Vertical;
         if (DropDown2.SelectedIndex == 0)
            DataList1.RepeatLayout = RepeatLayout.Table;
         else
            DataList1.RepeatLayout = RepeatLayout.Flow;
         DataList1.RepeatColumns=DropDown3.SelectedIndex+1;
         if ((Check1.Checked ==true) && 
            (DataList1.RepeatLayout == RepeatLayout.Table)) 
         {
            DataList1.BorderWidth = Unit.Pixel(1);
            DataList1.GridLines = GridLines.Both;
         }    
         else  
         {
            DataList1.BorderWidth = Unit.Pixel(0);
            DataList1.GridLines = GridLines.None;
         }    
      }    
   </script>
<body>
   <form runat="server">
      <h3>DataList Sample</h3>
         <asp:DataList id="DataList1"
              BorderColor="black"
              CellPadding="3"
              Font-Name="Verdana"
              Font-Size="8pt"
              runat="server">
            <HeaderStyle BackColor="#aaaadd"/>
            <AlternatingItemStyle BackColor="Gainsboro"/>
            <HeaderTemplate>
               Items
            </HeaderTemplate>
            <ItemTemplate>
               <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
            </ItemTemplate>
         </asp:DataList>
         <p>
         <hr noshade align="left" width="300px">
         RepeatDirection:
         <asp:DropDownList id=DropDown1 runat="server">
            <asp:ListItem>Horizontal</asp:ListItem>
            <asp:ListItem>Vertical</asp:ListItem>
         </asp:DropDownList><br>
         RepeatLayout:
         <asp:DropDownList id=DropDown2 runat="server">
            <asp:ListItem>Table</asp:ListItem>
            <asp:ListItem>Flow</asp:ListItem>
         </asp:DropDownList><br>
         RepeatColumns:
         <asp:DropDownList id=DropDown3 runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
         </asp:DropDownList><br>
         Show Borders: 
         <asp:CheckBox id=Check1 runat="server" />
         <p>
         <asp:LinkButton id=Button1 
              Text="Refresh DataList" 
              OnClick="Button1_Click" 
              runat="server"/> 
      </font>
   </form>
</body>
</html>

0
投稿

猜你喜欢

  • 摘要: 本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对jQuery这样的框架内部有一个大致的认识。推荐:
  • redux-saga在学习它之前先了解es6生成器生成器关键字:yield next()定义函数需要在函数名前急+*号function *t
  • 很多时候,我们都在说设计需要引导用户,尤其是在对初级用户的引导上,很大程度决定着产品能否快速聚拢用户的可能;但同样很多时候,用户并不需要引导
  • 这个程序将记数器的数字放在ACCESS数据库中,当然你也能用你希望其它的ODBC数据源.这个程序从URL中读取记数信息.如下:< IM
  • 客户/服务器体系结构图形化的用户界面,使系统的管理更加直观和简单。丰富的编程接口,为用户进行应用程序设计提供了更大的选择余地。与Window
  • 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!在这些简单的”秘
  • 1 导言 Microsoft 在Microsoft SQL Server 2000中推出了与XML相关的功能以及Transact-SQL 关
  • 代码如下:<% str = request("str") reg 
  • 一、介绍QQ空间相册的个性化利器,能对照片进行效果的优化、文字编辑等等。从设计上使用了创新的手法,尽量减少用户的思考。其中,通过界面的特殊表
  • 1、XML 是什么?XML仅仅是一种数据存放格式,这种格式是一种文本(虽然XML规范中也提供了存放二进制数据的解决方案)。事实上有很多文本格
  • 随着技术的不断升级,微软的王牌数据库SQL Server 2000正在逐渐淡出人们的视线,而新版的SQL Server 2005正成为企业和
  • 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个 
  •   原文地址:30 Days of Mootools 1.2 Tutorials - Day 21 - Classes part
  • W3C终于发布了第一个HTML5草案,大家还沉溺在HTML2XHTML转换的快乐和痛苦中时,却又突然发现,HTML5和XHTML2,到底谁是
  • 一、INSERT和REPLACEINSERT和REPLACE语句的功能都是向表中插入新的数据。这两条语句的语法类似。它们的主要区别是如何处理
  • 问题:无法上传较大的文件“Request 对象 错误 'ASP 0104 : 80004005'”或者上传成功后,找不到文件
  • 以前有过一篇类似的文章, 讲的比较简单只有三个插件而已, 所以这篇文章将全持续更新.jQuery UI 大名顶顶, 不用介绍, 它的各个控件
  • canal简介由阿里巴巴开源 github地址:https://github.com/alibaba/canalCanal是阿里巴巴开源的一
  • 调度和锁定在很多客户一起查询数据表时,如果使客户能最快地查询到数据就是调度和锁定做的工作了。在MySQL中,我们把select操作叫做读,把
  • 在很多情况下,我们可能需要控制某一段代码只执行一次,比如做某些初始化操作,如初始化数据库连接等。 对于这种场景,go 为我们提供了 sync
手机版 网络编程 asp之家 www.aspxhome.com