asp.net完全入门------数据列表 DataList

最新推荐文章于 2024-02-06 09:00:00 发布

yts_dayou

最新推荐文章于 2024-02-06 09:00:00 发布

阅读量1.1k

点赞数

文章标签： asp.net datagrid server session object asp

数据列表 DataList
数据列表显示跟重复列表（Repeator）比较类似，但是它可以选择和修改数据项的内容。数据列表的数据显示和布局也如同重复列表都是通过“模板”来控制的。同样的，模板至少要定义一个“数据项模板”（ItemTemplate）来指定显示布局。数据列表支持的模板类型更多，它们如下：
1） ItemTemplate模板，数据项模板，必需的，它定义了数据项极其表现形式。
2） AlternatingItemTemplate模板，，数据项交替模板，为了使相邻的数据项能够有所区别，可以定义交替模板，它使得相邻的数据项看起来明显不同，缺省情况下，它和ItemTemplate模板定义一致，即缺省下相邻数据项无表示区分。
3） SeparatorTemplate模板，分割符模板，定义数据项之间的分割符。
4） SelectedItemTemplate模板，选中项模板，定义被选择的数据项的表现内容与布局形式，当未定义”SelectedItemTemplate”模板时，选中项的表现内容与形式无特殊化，由ItemTemplate模板定义所决定。
5） EditItemTemplate模板，修改选项模板，定义即将被修改的数据项的显示内容与布局形式，缺省情况下，修改选项模板就是数据项模板（ItemTemplate）的定义。
6） HeaderTemplate模板，报头定义模板，定义重复列表的表头表现形式。
7） FooterTemplate模板，表尾定义模板，定义重复列表的列表尾部的表现形式。
数据列表还可以通过风格形式来定义模板的字体、颜色、边框。每一种模板都有它自己的风格属性。例如，可以通过设置修改选项模板的风格属性来指定它的风格。
此外，还有一些其他属性可以导致数据列表的显示有较大的改变，下面择重说明。
RepeatLayout：显示布局格式，指定是否以表格形式显示内容。
RepeatLayout.Table指定布局以表格形式显示。
RepeatLayout.Flow指定布局以流格式显示，即不加边框。
RepeatDirection：显示方向，指定显示是横向显示还是纵向显示
RepeatDirection.Horizontal指定是横向显示
RepeatDirection.Vertical指定是纵向显示
RepeatColumns：一行显示列数，指定一行可以显示的列数，缺省情况下，系统设置为一行显示一列。这里需要注意的是，当显示方向不同时，虽然一行显示的列数不变，但显示的布局和显示内容的排列次序却有可能大不相同。
例如：有10个数据需要显示，RepeatColumns设定为4，即一行显示4列时
当RepeatDirection=RepeatDirection.Horizontal横向显示时，显示布局如下：
Item1 Item2 Item3 Item4
Item5 Item6 Item7 Item8
Item9 Item10
当RepeatDirection=RepeatDirection.Vertical纵向显示时，显示布局如下：
Item1 Item4 Item7 Item10
Item2 Item5 Item8
Item3 Item6 Item9
BorderWidth：当RepeatLayout=RepeatLayout.Table即以表格形式显示时，边框的线宽度
Unit.Pixel(x) x>=0,当x为0时无边框
GridLines: 当RepeatLayout=RepeatLayout.Table以表格形式显示时，在表格当中是否有网隔线分离表格各单元。
GridLines=GridLines.Both，有横向和纵向两个方向的分割线。
GirdLines=GridLines.None，无论横向还是纵向均无分割线。

<p style=line-height: 150%>例子：演示以上介绍的各属性的设置对数据列表输出的影响，并且当数据项被选中时，数据项以粉红色来反显。

<p style=line-height: 150%>1．源程序(DataList.aspx)

<%@ Import Namespace="System.Data" %>
<html>
<script language="VB" runat="server">
创建初始化表和载入实验数据
Function LoadData() As ICollection
Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer
创建数据表
dt = New DataTable
建立数据项结构
dt.Columns.Add(New DataColumn("Content", GetType(String)))
载入10个实验数据
For i = 1 To 10
dr = dt.NewRow()
dr(0) = "Info " & i.ToString()
dt.Rows.Add(dr)
Next
为数据表建立一个数据视图，并将其返回
LoadData = New DataView(dt)
End Function
Sub Page_Load(s As Object, e As EventArgs)
If Not IsPostBack Then
DataList1.DataSource = LoadData()
DataList1.DataBind
End If
End Sub
Sub DataList1_ItemCommand(s As Object, e As DataListCommandEventArgs)
Dim cmd As String = e.CommandSource.CommandName

<p style=line-height: 150%> If cmd = "select" Then
DataList1.SelectedIndex = e.Item.ItemIndex
End If

DataList1.DataSource = LoadData()
DataList1.DataBind
End Sub
当刷新按钮按下后，对数据列表属性重新设置
Sub RefreshBtn_Click(s As Object, e As EventArgs)
If lstDirection.SelectedIndex = 0
DataList1.RepeatDirection = RepeatDirection.Horizontal
Else
DataList1.RepeatDirection = RepeatDirection.Vertical
End If

<p style=line-height: 150%> If lstLayout.SelectedIndex = 0
DataList1.RepeatLayout = RepeatLayout.Table
Else
DataList1.RepeatLayout = RepeatLayout.Flow
End If
If chkBorder.Checked And DataList1.RepeatLayout = RepeatLayout.Table Then
DataList1.BorderWidth = Unit.Pixel(1)
Else
DataList1.BorderWidth = Unit.Pixel(0)
End If

If chkGridLines.Checked And DataList1.RepeatLayout = RepeatLayout.Table then
DataList1.GridLines = GridLines.Both
Else
DataList1.GridLines = GridLines.None
End If
DataList1.RepeatColumns=lstColsPerLine.SelectedIndex + 1
End Sub
</script>
<head>
<title>
数据列表实验
</title>
</head>
<body>
<center>
<h2>
数据列表属性方法实验
</h2>
<form runat=server>
<font face="Verdana" size="-1">
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
CellPadding="3"
Font-Name="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="#ccccff"
SelectedItemStyle-BackColor="#ffccff"
OnItemCommand="DataList1_ItemCommand"
>
<template name="HeaderTemplate">
<h><center>内容</center></h>
</template>
<template name="ItemTemplate">
<asp:LinkButton id="DetailBtn" runat="server" Text="详细" CommandName="select" />
<%# DataBinder.Eval(Container.DataItem, "Content") %>
</template>
<template name="SelectedItemTemplate">
<%# DataBinder.Eval(Container.DataItem, "Content") %>已经被选中
</template>
</asp:DataList>

<asp:Button id=RefreshBtn Text="刷新界面" OnClick="RefreshBtn_Click" runat="server"/>

</font>
</form>
</center>
</body>
</html>

<p style=line-height: 150%>3．当选择显示方向为横向，表方式，一行含5列，显示边框和网格时，界面显示如下：
4．选择纵向显示，表方式，一行含5列，无边框，无网格时，界面显示如下：5．当在步骤4的基础上选择了第5项数据项时，界面显示如下：

<p style=line-height: 150%>
接下来，我们讨论一下一种比较有实际意义的应用，即对选中数据项的修改的实现。
首先是对模板EditItemTemplate的定义，通常做法是排列可以进行修改的内容，然后定义一个修改确认键和一个修改取消键。
然后应定义数据列表支持的三种消息处理函数即OnEditCommand、OnUpdateCommand、OnCancelCommand(编辑事件处理、修改事件处理、撤消修改事件处理)
编辑事件处理：通常设置数据列表的EditItemIndex属性为选中的数据项索引，然后重载数据列表。
Protected Sub DataList_EditCommand(Source As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = CType(e.Item.ItemIndex, Integer)
‘重新加载并绑定数据
BindList()
End Sub

<p style=line-height: 150%>取消修改事件处理：通常设置数据列表的EditItemIndex为-1，表示没有数据项需要修改，然后重载数据列表
Protected Sub DataList_CancelCommand(Source As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = -1
BindList()
End Sub

<p style=line-height: 150%>修改事件处理：通常先修改数据源的数据，然后设置数据列表的EditItemIndex为-1，最后重载数据列表。
Sub DataList_UpdateCommand(Source As Object, e As DataListCommandEventArgs)
‘修改数据源数据，应根据具体情况而变
ModifySource()
DataList.EditItemIndex=-1
BindList
End Sub

<p style=line-height: 150%>例子：显示一个关于书籍修改的实例。一条书籍记录包含序号、书名、价格信息。初始化数据时，我们设置序号为1-6，书名为“书名”+序号，价格为1.11*序号。

<p style=line-height: 150%>1．源程序(FormDataList01.aspx)
<
<%@ Import Namespace="System.Data" %>
<html>
<script language="VB" runat="server">
dim Book As DataTable
dim BookView As DataView
设置数据源，并绑定
Sub BindList()
DataList1.DataSource= BookView
DataList1.DataBind
End Sub

<p style=line-height: 150%> Sub Page_Load(s As Object, e As EventArgs)

<p style=line-height: 150%> Dim dr As DataRow
如果没有连接变量session_book，定义数据表Book,并载入实验数据
if session("session_Book") = Nothing then
Book = New DataTable()
Book.Columns.Add(new DataColumn("num", GetType(string)))
Book.Columns.Add(new DataColumn("name", GetType(String)))
Book.Columns.Add(new DataColumn("price", GetType(String)))
session("session_Book") = Book
载入部分测试数据
For i = 1 To 6
dr = Book.NewRow()
dr(0)=i.ToString
dr(1) = "书名 " & i.ToString
dr(2) = ( 1.11* i).ToString
Book.Rows.Add(dr)
Next
有session_book变量，直接引用
Else
Book = session("session_Book")
end if
产生数据视图，并按num字段排序
BookView = New DataView(Book)
BookView.Sort="num"
初次需绑定数据源
if Not IsPostBack then
BindList
End If

<p style=line-height: 150%> End Sub

<p style=line-height: 150%> 编辑处理函数
Sub DataList_EditCommand(sender As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = e.Item.ItemIndex
BindList
End Sub
取消处理函数
Sub DataList_CancelCommand(sender As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = -1
BindList
End Sub
更新处理函数
Sub DataList_UpdateCommand(sender As Object, e As DataListCommandEventArgs)
Dim lbl1 As Label = e.Item.FindControl("lblNum")
Dim txt2 As TextBox = e.Item.FindControl("txtBook")
Dim txt3 As TextBox = e.Item.FindControl("txtPrice")

dim strNum as String
dim strBook as String
dim strPrice as String

<p style=line-height: 150%> strNum=lbl1.text
strBook=txt2.text
strPrice=txt3.text
用先删除再插入的方式，实现数据的更新操作
BookView.RowFilter = "num=" & strNum & ""
If BookView.Count > 0 Then
BookView.Delete(0)
End If

<p style=line-height: 150%> BookView.RowFilter = ""
dim dr as DataRow=Book.NewRow()
dr(0) = strNum
dr(1) = strBook
dr(2) = strPrice
Book.Rows.Add(dr)

<p style=line-height: 150%> DataList1.EditItemIndex = -1
BindList
End Sub

<p style=line-height: 150%> </script>
<head>
<title>
数据列表修改实验
</title>
</head>
<body>
<center>
<h2>数据列表修改实验</h2>
<hr>

<p style=line-height: 150%> <form runat=server>
<font face="Verdana" size="-1">

<asp:DataList id="DataList1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
CellSpacing="0"
Font-Name="Verdana"
Font-Size="8pt"
Width="150px"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="Gainsboro"
EditItemStyle-BackColor="green"
OnEditCommand="DataList_EditCommand"
OnUpdateCommand="DataList_UpdateCommand"
OnCancelCommand="DataList_CancelCommand"
>
<template name="HeaderTemplate">
<center><h>书籍序号</h></center>
</template>
<template name="ItemTemplate">
<asp:LinkButton id="button1" runat="server" Text="详细" CommandName="edit" />
<%# Container.DataItem("name") %>
</template>
<template name="EditItemTemplate">
书籍: 序号
<asp:Label id="lblNum" runat="server" Text=<%# Container.DataItem("num") %> />

书名:
<asp:TextBox id="txtBook" runat="server" Text=<%# Container.DataItem("name") %> />

价格:
<asp:TextBox id="txtPrice" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "price") %> />

<center>
<asp:Button id="button2" runat="server" Text="修改" CommandName="update" />
<asp:Button id="button3" runat="server" Text="撤消" CommandName="cancel" />
</center>
</template>
</asp:DataList>
</font>
</form>
</center>
</body>
</html>
2．准备对第2项进行修改，此时的画面如下：

<p style=line-height: 150%>
3.把序号为2的书籍的价格改为9.99以后，重新进入其编辑状态后，它的输出画面如下：

<p style=line-height: 150%>2.2.15 数据表格DataGrid
数据表格服务器端控件以表格形式显示数据内容，同时还支持数据项的选择、排序、分页和修改。缺省情况下，数据表格为数据源中每一个域绑定一个列，并且根据数据源中每一个域中数据的出现次序把数据填入数据表格中的每一个列中。数据源的域名将成为数据表格的列名，数据源的域值以文本标识形式填入数据表格中。
通过直接操作表格的Columns集合，可以控制数据表格各个列的次序、表现方式以及显示内容。缺省的列为Bound型列，它以文本标识的形式显示数据内容。此外，还有许多类型的列类型可供用户选择。
列类型的定义有两种方式：显视的用户定义列类型和自动产生的列类型（AutoGenerateColumns）。当两种列类型定义方式一起使用时，先用用户定义列类型产生列的类型定义，接着剩下的再使用自动列定义规则产生出其他的列类型定义。请注意自动定义产生的列定义不会加入Columns集合。
列类型介绍：
1） bound column ，列可以进行排序和填入内容。这是大多数列缺省用法。
两个重要的属性为：HeaderText指定列的表头显示
DataField指定对应数据源的域
2） hyperlink column，列内容以hyperlink控件方式表现出来。它主要用于从数据表格的一个数据项跳转到另外的一个页面，做出更详尽的解释或显示。
重要的属性有：
HeaderText指定列表头的显示
DataNavigateUrlField指定对应数据源的域作为跳转时的参数
DataNavigateUrlFormatString指定跳转时的url格式
DataTextField指定数据源的域作为显示列内容来源
3） button column，把一行数据的用户处理交给数据表格所定义的事件处理函数。通常用于对某一行数据进行某种操作，例如，加入一行或者是删去一行数据等等。
重要的属性有：
HeaderText指定列表头的显示
Text指定按钮上显示的文字
CommandName指定产生的激活命令名
4） Template column，列内容以自定义控件组成的模板方式显示出来。通常用作用户需要自定义显示格式的时候。
5） Edit Command column，当数据表格的数据项发生编辑、修改、取消修改时，相应处理函数的入口显示。它通常结合数据表格的EditItemIndex属性来使用，当某行数据需要编辑、修改、取消操作时，通过它进入相应的处理函数。例如，当需要对某行数据进行修改（update）时，通过它进入修改的处理步骤中。

<p style=line-height: 150%>其他重要列属性介绍：
1） Visible属性，控制定义的列是否出现在显示的数据列表中。
2） AllowSorting属性，是否可以进行列排序。当AollowSorting=true时，可以以点击列的列表头的方式，把数据以该列次序进行排序。缺省的（即载入数据后）的排序方式，实际上是以数据在数据源中的排列次序进行排序的。
3） AllowPage属性，是否以分页方式显示数据。当对有大量数据的数据源进行显示时，可以以例如10行一页的方式来显示数据，同时显示一个下页/前页的按钮，按下按钮可以以向前或向后的方式浏览整个数据源的数据。当AllowPage=true时，即以分页方式进行显示。可以通过设定CurrentPageIndex属性来直接跳转到相应的数据页。

<p style=line-height: 150%>例子：演示以上各种类型的列定义的用法
1．源程序(FormDataGrid.aspx)

<p style=line-height: 150%><html>
<script language="VB" runat="server">
dim Order as DataTable
dim OrderView as DataView

<p style=line-height: 150%> 对数据表格1创建数据表，并返回数据视图
Function LoadData() As ICollection

Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer

<p style=line-height: 150%> 创建数据表
dt = New DataTable
dt.Columns.Add(New DataColumn("Num", GetType(Integer)))
dt.Columns.Add(New DataColumn("Name", GetType(String)))
dt.Columns.Add(New DataColumn("DtTm", GetType(DateTime)))
dt.Columns.Add(New DataColumn("Assembly", GetType(Boolean)))
dt.Columns.Add(new DataColumn("Price", GetType(Double)))

<p style=line-height: 150%> 载入数据
For i = 1 To 6
dr = dt.NewRow()
dr(0) = i
dr(1) = "书名 " + i.ToString()
dr(2) = DateTime.Now.ToShortTimeString
If (i Mod 2 <> 0) Then
dr(3) = True
Else
dr(3) = False
End If
dr(4) = 1.11 * i
把产生的数据加入数据表中
dt.Rows.Add(dr)
Next

<p style=line-height: 150%>
LoadData = New DataView(dt)

End Function

<p style=line-height: 150%> 页面初始化，分别对DataGrid1和DataGrid2绑定数据源
Sub Page_Load(sender As Object, e As EventArgs)

If Session("session_order") = Nothing Then
Order = New DataTable()
Order.Columns.Add(new DataColumn("Name", GetType(string)))
Order.Columns.Add(new DataColumn("Price", GetType(string)))
Session("session_order") = Order
Else
Order = Session("session_order")
End If
OrderView = New DataView(Order)
DataGrid2.DataSource = OrderView
DataGrid2.DataBind

<p style=line-height: 150%> If Not IsPostBack Then
DataGrid1.DataSource = LoadData()
DataGrid1.DataBind
End If

End Sub

<p style=line-height: 150%> 对ButtonColumns的处理函数集合
Sub Grid_Command(sender As Object, e As DataGridCommandEventArgs)

Dim dr As DataRow = order.NewRow()

Dim Cell1 As TableCell = e.Item.Cells(3)
Dim Cell2 As TableCell = e.Item.Cells(6)
Dim name As String = Cell1.Text
Dim price As String = Cell2.Text

If e.CommandSource.CommandName = "Add" Then
dr(0) = name
dr(1) = price
order.Rows.Add(dr)
Else
OrderView.RowFilter = "name=" & name & ""
If OrderView.Count > 0 Then
OrderView.Delete(0)
End If
OrderView.RowFilter = ""
End If
DataGrid2.DataBind()
End Sub

<p style=line-height: 150%></script>
<head>
<title>
数据表格实验
</title>
</head>

<p style=line-height: 150%><body>
<center>
<h2>数据表格列类型实验</h2>
<hr>

<p style=line-height: 150%> <form runat=server>
<h3><b>图书清单</b></h3>
<ASP:DataGrid id="DataGrid1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
CellSpacing="0"
Font-Name="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
AutoGenerateColumns="false"
OnItemCommand="Grid_Command">
<property name="Columns">

<asp:ButtonColumn HeaderText="操作" Text="订购" CommandName="Add" />
<asp:ButtonColumn HeaderText="操作" Text="退订" CommandName="Remove" />

<asp:HyperLinkColumn
HeaderText="链接"
DataNavigateUrlField="Num"
DataNavigateUrlFormatString="FormDataGrid01.aspx?id={0}"
DataTextField="Num"
Target="_new"
/>

<asp:BoundColumn HeaderText="书名" DataField="Name" />
<asp:BoundColumn HeaderText="入库时间" DataField="DtTm"/>
<! -- 1个TemplateColumn示例 ,以CheckBox来表示布尔型数据 -->
<asp:TemplateColumn HeaderText="合集">
<template name="ItemTemplate">
<asp:CheckBox ID=Chk1 Checked=<%# DataBinder.Eval(Container.DataItem, "Assembly") %> Enabled="false" runat="server" />
</template>
</asp:TemplateColumn>

<asp:BoundColumn HeaderText="价格" DataField="Price" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="right" />
</property>

<p style=line-height: 150%>文件FormDataGrid01.aspx的内容：

<html>
<head>
<title>
数据表格链接测试实验
</title>
<script language="VB" runat="server">

<p style=line-height: 150%> Dim num As String

<p style=line-height: 150%> Sub Page_Load(sender As Object, e As EventArgs)
num=Request.QueryString("id")
End Sub

<p style=line-height: 150%></head>
<body bgcolor=#ccccff>
<center>
<h2>数据表格链接测试结果画面</h2>
<hr>

<p style=line-height: 150%> <h4>您选择的是第<u> <%= num %></u>本藏书</h4>

<p style=line-height: 150%>2．开始时画面：

<p style=line-height: 150%>3．当选择订购了第一本和第三本后的画面如下：

<p style=line-height: 150%>4．当选择退订第三本书后的画面如下：

<p style=line-height: 150%>
5．当点击连接第六项时的画面如下：