asp中gridview多行数据累加_深圳嘉华学校之asp.net listview

最新推荐文章于 2020-11-27 21:17:39 发布

weixin_39968724

最新推荐文章于 2020-11-27 21:17:39 发布

阅读量169

点赞数

文章标签： asp中gridview多行数据累加 asp子窗口读取父窗口数据 asp还有人用吗

http://Asp.Net ListView 数据绑定控件是在http://Asp.Net 3.5中引入的，在此之前我们已经拥有了n多同类的控件了。那么我们还有必要再增加这类控件吗？答案是Yes！它为你提供了强大的可高度自定义外观功能，使用它你几乎可以扔掉其他的数据绑定控件了。

ListView 包含大量的模板，使用这些模板我们可以很方便地显示、编辑、插入数据，也可以对数进行分组，设置选中一行数据或如数据为空时的显示方式等。主要的模板有：

·LayoutTemplate ·ItemTemplate ·AlternatingItemTemplate ·SelectedItemTemplate ·EmptyItemTemplate ·EmptyDataTemplate

·ItemSeparatorTemplate ·GroupTemplate ·GroupSeparatorTemplate ·EditItemTemplate ·InsertItemTemplate

一、显示数据

显示数据要用到两个关键模板分别是LayoutTemplate 和 ItemTemplate，其中LayoutTemplate用于控制数据的外观呈现，而ItemTemplate则用于提供数据集中的每一行数据。 ListView将用ItemTemplate中的数据填充到LayoutTemplate中的占位符位置。

先创建一个http://ADO.NET 实体数据模型（使用Northwind 示例数据库），用EntityDataSource 配置为Products数据集。

<asp:EntityDataSource ID="EntityDataSource1" runat="server"
ConnectionString="name=NorthwindEntities"
DefaultContainerName="NorthwindEntities" EnableFlattening="False"
EntitySetName="Products">
</asp:EntityDataSource>

接着拖放一个ListView到设计窗口中设置其DataSourceID="EntityDataSource1"，并在源窗口中修改成如下的代码：

<asp:ListView ID="ListView1" runat="server" DataSourceID="EntityDataSource1" ItemContainerID= "ItemPlaceHolder ">
<LayoutTemplate>
<table border="2">
<thead>
<tr>
<th>ProductID</th>
<th>ProductName</th>
<th>UnitPrice</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder runat ="server" ID="ItemPlaceHolder"></asp:PlaceHolder>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("ProductID")%></td>
<td><%# Eval("ProductName")%></td>
<td><%# Eval("UnitPrice")%></td>
</tr>
</ItemTemplate>
</asp:ListView>

代码中LayoutTemplate模板我们定义了一个HTML Table控件，请注意其中的一行：

<asp:PlaceHolder runat ="server" ID="ItemPlaceHolder"></asp:PlaceHolder>

服务器控件PlaceHolder 实际上起到了占位符的作用，其中" ItemContainerID= "ItemPlaceHolder "属性是关键，它指示ListView在ID="ItemPlaceHolder" 的控件的位置进行填充数据。

ItemTemplate 模板我们定义了一个数据行共3个数据单元，这些数据将填充在ID="ItemPlaceHolder"的控件位置上。图（1）是运行的结果

---------------------------------------------------------

http://ASP.NET中新的ListView控件为显示和CURD数据库操作提供了基于模板的布局，使之成为一项极好的方式，建立以数据为中心的Web应用程序。

当你编写以用户为中心的应用程序时，总需要某种形式的数据集，起码来说，你需要从一个数据源如关系数据库或XML文件检索数据，在显示给用户之前先要进行格式化，尽管http://ASP.NET之前的版本就提供了以数据为中心的显示控件如GridView，这些控件缺乏专业Web开发人员需要的可自定义和可扩展特性，为了解决这个问题，ASP.NET3.5提供了一个新的控件ListView，它提供了非常优秀的自定义和扩展特性，使用这些特性，你可以以任何格式显示数据，使用模板和样式，同时用最少的代码执行CURD（创建、读取、更新、删除）操作。

本文主要集中于使用新的ListView控件时数据访问步骤，同时还包括高级特性如编辑数据和处理事件。

ListView控件入门

http://ASP.NET提供的大部分数据绑定控件都是使用额外的标记自动封装显示数据，举例来说，GridView控件在一个HTML表格（<table>）中显示它的数据，每条记录显示一行（<tr>），每个字段显示为一个单元格（<td>），虽然你可以使用TemplateField组件自定义GridView的外观，但GridView的输出仍然是限制在一个table组件中的，但有时候你想要完全控制由数据绑定控件产生的HTML标记的外观，这正是ListView控件的优势，ListView控件不是使用额外的标记来封装它的输出内容，而是靠你指定的精确的HTML描述，使用ListView控件内置的模板就可以指定精确的标记，表1列出了ListView控件支持的模板。

模板
用途
AlternatingItemTemplate

交替项目模板
用不同的标记显示交替的项目，便于查看者区别连续不断的项目
EditItemTemplate

编辑项目模板
控制编辑时的项目显示
EmptyDataTemplate

空数据模板
控制ListView数据源返回空数据时的显示
EmptyItemTemplate

空项目模板
控制空项目的显示
GroupSeparatorTemplate

组分隔模板
控制项目组内容的显示
GroupTemplate

组模板
为内容指定一个容器对象，如一个表行、div或span组件
InsertItemTemplate

插入项目模板
用户插入项目时为其指定内容
ItemSeparatorTemplate

项目分隔模板
控制项目之间内容的显示
ItemTemplate

项目模板
控制项目内容的显示
LayoutTemplate

布局模板
指定定义容器对象的根组件，如一个table、div或span组件，它们包装ItemTemplate或GroupTemplate定义的内容。
SelectedItemTemplate

已选择项目模板
指定当前选中的项目内容的显示

最关键的两个模板是LayoutTemplate和ItemTemplate，正如名字暗示的那样，LayoutTemplate为 ListView控件指定了总的标记，而ItemTemplate指定的标记用于显示每个绑定的记录，例如：下面的代码显示了在ListView中由 HTML table控制的一串项目。

<asp:ListView ID="..." runat="server" DataSourceID="...">
<LayoutTemplate>
<table …….>
<tr runat="server" ID="itemPlaceholder"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Name") %></td>
</tr>
</ItemTemplate>
</asp:ListView>

在前面的代码中，LayoutTemplate标记内的<tr>标记的ID是设置项目占位符（itemPlaceHolder），它告诉ListView通过<table>内的ItemTemplate产生的内容要放到什么地方，这就是为什么你需要单独定义 LayoutTemplate和ItemTemplate模板的原因。

你已经看到LisView控件支持的多个模板了，下一步是要创建一个简单的web站点，名字就叫做ListViewExample（你可以从http://assets.devx.com/sourcecode/38579_tt_mainsource.zip下载该站点的示例代码），创建好web站点后，选择Web站点?添加新项目，添加一个新的ASP.NET页面，名字命名为 SimpleListView.aspx（见清单1），这个页面将使用ListView控件从AdventureWorks示例数据库中的Product 表显示产品数据。

清单1.ListView控件示例清单

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Simple Data Binding Example using ListView control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView runat="server" ID="productsView"
DataSourceID="productSource" DataKeyNames="ProductID">
<LayoutTemplate>
<table cellpadding="2" runat="server" id="tblProducts"
style="width:460px">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<asp:DataPager runat="server" ID="DataPager" PageSize="3">
<Fields>
<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--" NextPageText="-->" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" style="height:72px" runat="server">
<td valign="top" class="ProductInfo">
Product ID : <asp:Label ID="lblProductID" runat="server"
Text='<%#Eval("ProductID") %>' />
<br />
Name : <asp:Label ID="lblName" runat="server"
Text='<%#Eval("Name") %>' />
<br />
Product Number : <asp:Label ID="lblProductNumber"
runat="server" Text='<%#Eval("ProductNumber") %>' />
</td>
</tr>
</ItemTemplate>
<ItemSeparatorTemplate>
<tr id="separator" style="height:10px" runat="server">
<td>--------------------------------------------------------
------------------</td>
</tr>
</ItemSeparatorTemplate>
<EmptyDataTemplate>
There are no products!
</EmptyDataTemplate>
</asp:ListView>
<asp:SqlDataSource id="productSource" runat="server"
DataSourceMode="DataSet"
ConnectionString="<%$ ConnectionStrings:AdventureWorks%>"
SelectCommand="SELECT ProductID,Name,ProductNumber,
Color,ListPrice FROM Production.Product">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

在清单1中，SqlDataSource通过设置ConnectionString 和SelectCommand 属性控制从AdventureWorks数据库的Product表中检索数据，ConnectionString属性通过一个http://ASP.NET表达式从 web.config文件获取连接字符串，在我的测试机上，连接字符串定义在web.config中，如：

设置好SqlDataSource属性后，下一步是通过ListView控件显示数据，下面是在LayoutTemplate模板中的标记：

LayoutTemplate模板定义了ListView控件输出内容的容器，除了在ListView控件顶层定义了table 外，LayoutTemplate模板还定义了<asp:DataPager>，它为ListView控件提供了分页功能，DataPager让你可以为任何数据绑定控件实现IpageableItemContainer进行数据分页并显示导航控制。

有两种方法使数据分页（DataPager）和数据绑定（data-bound）联合使用：

1、设置DataPager 的PagedControlID属性为data-bound的名字。
2、将DataPager置于data-bound层次体系之下，对于ListView控件，你可以将DataPager置于LayoutTemplate组件内。

设置DataPager的PageSize属性，它控制每页显示的数据行数，你也可以在页面提交到服务器时通过设置QueryStringField属性实现。

在DataPager内，你指定NumericPageField模板，它可以让用户输入一个页号，然后按照页号进行跳转，如：

<asp:NumericPagerField ButtonCount="10"
PreviousPageText="<--"
NextPageText="-->" />

ItemTemplate组件为每个记录的明细提供了标记。图1显示了在浏览器中导航到该页面的输出。

图1.ListView示例：通过数据绑定ListView控件到SqlDataSource控件检索Product表中部分数据产生的输出

用ListView控件编辑数据

正如你所看到的，使用ListView控件显示数据相对要直接得多，但你还可以让用户在ListView中直接编辑数据，添加一个新页面ListViewEditExample.aspx，它的代码如清单2所示。

清单2.编辑ListView

<%@ Page Language="C#" %>
<script runat="server">
void deptsView_ItemUpdated(object sender,
ListViewUpdatedEventArgs e)
{
lblResult.Text = e.AffectedRows.ToString() +
" row(s) successfully updated";
}

void deptsView_PagePropertiesChanged(object sender, EventArgs e)
{
//Set the text to empty when navigating to a different page
lblResult.Text = "";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
<title>Editing Data using ListView Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="ContactsListView" DataSourceID="deptSource"
DataKeyNames="DepartmentID" runat="server"
OnItemUpdated="deptsView_ItemUpdated"
OnPagePropertiesChanged="deptsView_PagePropertiesChanged">
<LayoutTemplate>
<table cellpadding="2" width="640px" border="1"
runat="server" id="tblProducts">
<tr id="row1" runat="server" class="header">
<th id="header2" runat="server">Name</th>
<th id="header3" runat="server">Group Name</th>
<th id="header1" runat="server">Action</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
<asp:DataPager runat="server" ID="deptsDataPager"
PageSize="3">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="True"
ShowLastPageButton="True" FirstPageText="|<< "
LastPageText=" >>|" NextPageText=" > "
PreviousPageText=" < " />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="row2" runat="server">
<td>
<asp:Label ID="lblName" runat="Server"
Text='<%#Eval("Name") %>' />
</td>
<td valign="top">
<asp:Label ID="lblGroupName" runat="Server"
Text='<%#Eval("GroupName") %>' />
</td>
<td>
<asp:LinkButton ID="btnEdit" runat="Server" Text="Edit"
CommandName="Edit" />
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr style="background-color: #ADD8E6">
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>
<br /><br />
<asp:Label runat="server" ID="lblResult" Text=""
Font-Bold="true" />
</div>
</form>
</body>
</html>

清单2的代码说明了如何使用EditItemTemplate组件在编辑模式下生成内容，然后通过SqlDataSource更新数据库。

首先，你设置SqlDataSource的UpdateCommand属性，这样SQL语句就会用由用户指定的最新值执行数据库更新操作。

<asp:SqlDataSource ID="deptSource" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM
HumanResources.Department" UpdateCommand="UPDATE
HumanResources.Department SET Name = @Name,
GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
</asp:SqlDataSource>

接下来，在ItemTemplate组件中，指定编辑项目的连接用户：

然后，指定EditItemTemplate声明用户输入更新的部门名称或组名的文本框，以及提交或取消当前操作的用户连接。

<EditItemTemplate>
<tr style="background-color: #ADD8E6">
<td>
<asp:TextBox ID="txtName" runat="server"
Text='<%# Bind("Name") %>'
MaxLength="50" /><br />
</td>
<td>
<asp:TextBox ID="txtGroupName" runat="server" Text='<%#
Bind("GroupName") %>' MaxLength="50" /><br />
</td>
<td>
<asp:LinkButton ID="btnUpdate" runat="server"
CommandName="Update" Text="Update" /> 
<asp:LinkButton ID="btnCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</td>
</tr>
</EditItemTemplate>

这里通过CommandName属性定义的LinkButton的行为，如表2所示。

表2. LinkButton CommandName属性值：列出了ListView控件支持的CommandName属性值

值
描述
Cancel
取消当前操作
Delete
从数据源删除当前选中的项目
Edit
切换ListView到编辑模式，显示EditItemTemplate组件中指定的内容
Insert
作为一条新记录将数据保存到数据源
Update
用指定的值更新数据源

在更新结束后，ListView控件激活一个OnItemUpdated事件，你可以用它向用户提供执行的状态，在清单2的代码中，ListView控件处理两个事件：

1、OnItemUpdated：正如名字所暗示的那样，这个事件允许你在更新操作完毕后执行一个自定义的程序，在前面的代码中，这个事件被用于通知用户影响的记录条数。
2、OnPagePropertiesChanged：当页面属性发生改变时ListView控件激活这个事件，前面代码中使用这个事件清除了在lable标记包括的文本。

如果你导航到该页面，你会看到如图2所示的页面：

图2.在运转中编辑ListView：配置ListView控件为每条记录显示一个编辑连接，点击编辑连接切换到编辑模式

当你点击了编辑（Edit）超链接后，ListView控件使用EditItemTemplate显示文本框，用户就可以编辑文本框中的内容了，如图3所示：

图3.编辑模式：在编辑模式下，EditItemTemplate组件产生文本框，用户可以在这里输入要更新的值

注意在编辑模式下右边的更新（Update）和取消（Cancel）链接，当你点更新链接就会将所做的改变保存到数据库中，代码使用了OnItemUpdated事件显示更新操作所影响的行数，如图4所示：

图4.影响的记录：更新结束时，显示更新操作影响的数据行数

以上就是ListView的全部关键特性了，同时你也看到了一个使用ListView控件的简单以数据驱动的示例web页面，以及更复杂的更新功能，最后，描述了如何使用ListView控件产生的事件，正如你看到的，ListView控件扩展了运行时自定义的特性，更加适合你的需要。

================================

　当你编写以用户为中心的应用程序时，总需要某种形式的数据集，起码来说，你需要从一个数据源如关系数据库或XML文件检索数据，在显示给用户之前先要进行格式化，尽管http://ASP.NET之前的版本就提供了以数据为中心的显示控件如GridView，但 GridView的输出仍然是限制在一个table组件中的，而且这些控件缺乏专业Web开发人员需要的可自定义和可扩展特性，有时候你想要完全控制由数据绑定控件产生的HTML标记的外观，这正是ListView控件的优势，ListView控件不是使用额外的标记来封装它的输出内容，而是靠你指定的精确的HTML描述，使用ListView控件内置的模板就可以指定精确的标记，它提供了非常优秀的自定义和扩展特性，使用这些特性，你可以以任何格式显示数据，使用模板和样式，同时用最少的代码执行CURD（创建、读取、更新、删除）操作。

我们先看一下ListView支持的模板

模板

用途

AlternatingItemTemplate

交替项目模板

用不同的标记显示交替的项目，便于查看者区别连续不断的项目

EditItemTemplate

编辑项目模板

控制编辑时的项目显示

EmptyDataTemplate

空数据模板

控制ListView数据源返回空数据时的显示

EmptyItemTemplate

空项目模板

控制空项目的显示

GroupSeparatorTemplate

组分隔模板

控制项目组内容的显示

GroupTemplate

组模板

为内容指定一个容器对象，如一个表行、div或span组件

InsertItemTemplate

插入项目模板

用户插入项目时为其指定内容

ItemSeparatorTemplate

项目分隔模板

控制项目之间内容的显示

ItemTemplate

项目模板

控制项目内容的显示

LayoutTemplate

布局模板

指定定义容器对象的根组件，如一个table、div或span组件，它们包装ItemTemplate或GroupTemplate定义的内容。

SelectedItemTemplate

已选择项目模板

指定当前选中的项目内容的显示

最关键的两个模板是LayoutTemplate和ItemTemplate，正如名字暗示的那样，LayoutTemplate为ListView控件指定了总的标记，而ItemTemplate指定的标记用于显示每个绑定的记录
一、LayoutTemplate和ItemTemplate模板
标识定义控件的主要布局的根模板。它包含一个占位符对象，例如表行 (tr)、div 或 span 元素。此元素将由 ItemTemplate 模板或 GroupTemplate 模板中定义的内容替换。使用 LayoutTemplate 属性可以为 ListView 控件的根容器定义自定义用户界面 (UI)。LayoutTemplate 模板是 ListView 控件所必需的。LayoutTemplate 内容必须包含一个占位符控件，例如由 ItemTemplate 模板定义的项表行 (tr) 元素。占位符控件必须将 runat 属性 (Attribute) 设置为“server”，将 ID 属性 (Attribute) 设置为 ItemPlaceholderID 或 GroupPlaceholderID 属性 (Property) 的值（具体取决于 ListView 控件是否使用组）。
例如：

前端代码：

ListView演示前端代码
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr>
<td runat="server" style="">
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
<br />
</td>
<td>
<asp:Label ID="xLabel" runat="server" Text='<%# Eval("Age") %>' />
<br />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
</asp:ListView>

后台代码：

ListView演示后台代码
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Employee e1 = new Employee { Name = "lfm1", Age = 30 };
Employee e2 = new Employee { Name = "lfm2", Age = 30 };
Employee e3 = new Employee { Name = "lfm3", Age = 30};
Employee e4 = new Employee { Name = "lfm4", Age = 30};
Employee e5 = new Employee { Name = "lfm5", Age = 30};
Employee e6 = new Employee { Name = "lfm6", Age = 30 };
Employee[] employees = { e1,e2,e3,e4,e5,e6};
ListView1.DataSource = employees;
ListView1.DataBind();
}
protected void Button1_Click(object sender, EventArgs e)
{
}
}
class Employee
{
public string Name { get; set; }
public int Age { get; set; }
public int Sex { get; set; }
}

浏览器中得到的代码为：

浏览器中显示的代码
<table border="0" style="">
<tr>
<td style="">
<span id="ListView1_ctrl0_idLabel">lfm1</span>
<br />
</td>
<td>
<span id="ListView1_ctrl0_xLabel">30</span>
<br />
</td>
</tr>
<tr>
<td style="">
<span id="ListView1_ctrl1_idLabel">lfm2</span>
<br />
</td>
<td>
<span id="ListView1_ctrl1_xLabel">30</span>
<br />
</td>
</tr>
<tr>
<td style="">
<span id="ListView1_ctrl2_idLabel">lfm3</span>
<br />
</td>
<td>
<span id="ListView1_ctrl2_xLabel">30</span>
<br />
</td>
</tr>
<tr>
<td style="">
<span id="ListView1_ctrl3_idLabel">lfm4</span>
<br />
</td>
<td>
<span id="ListView1_ctrl3_xLabel">30</span>
<br />
</td>
</tr>
<tr>
<td style="">
<span id="ListView1_ctrl4_idLabel">lfm5</span>
<br />
</td>
<td>
<span id="ListView1_ctrl4_xLabel">30</span>
<br />
</td>
</tr>
<tr>
<td style="">
<span id="ListView1_ctrl5_idLabel">lfm6</span>
<br />
</td>
<td>
<span id="ListView1_ctrl5_xLabel">30</span>
<br />
</td>
</tr>
</table>

这里要注意LayoutTemplate中的<tr runat="server" id="itemPlaceholder" />即为占位符，它将在绑定时被ItemTemplate中的内容替换掉

二、分组的应用

前端代码:

前端代码
<asp:ListView ID="ListView1" runat="server" GroupItemCount="4">
<LayoutTemplate>
<table id="groupPlaceholderContainer" runat="server" border="1">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<%#Eval("ID") %>
<%# Eval("name") %>
<%# Eval("age") %>
</td>
</ItemTemplate>
</asp:ListView>

通过itemPlaceholderContainer知道这是一段要被替换的元素，而且是根据tr进行行替换。然后再配合LayoutTemplate形成分组。我们是如何来定义每行的列数的呢？只需要在 ListView里添加一个属性定义<asp:ListView ID="ListView1" runat="server" GroupItemCount="4">我们这里设置GroupItemCount属性的值为4，也就代表我们的每个Group里面包含的4项。