8.1　数据绑定控件

知识点讲解：光盘:视频\PPT讲解（知识点）\第8章\数据绑定控件.mp4

在ASP.NET 4.5中，引入了一系列可以改善数据访问的新工具，包括几个数据源和数据绑定控件。新增的数据源控件可以很容易地将SQL语句或存储过程与数据源控件相关联，并且将它们绑定到数据绑定控件。ASP.NET中的数据绑定控件有如下5种。

• GridView控件。
• DetailsView控件。
• FormView控件。
• Repeater控件。
• DataList控件。

本节将详细讲解ASP.NET数据控件的基本知识。

8.1.1　GridView控件

GridView控件用于显示某数据库表中的数据。通过使用 GridView 控件，可以显示、编辑、删除、排序和翻阅多种不同的数据源，包括数据库、XML 文件和公开数据的业务对象中的表格数据。

通过Visual Studio 2012可以十分方便地使用和设置GridView控件。当插入GridView控件后，单击控件右上方的三角形按钮，在弹出的面板选项中可以对其进行具体设置，如图8-1所示。

图8-1　GridView控件设置面板

（1）使用GridView控件进行数据绑定

GridView控件提供了两个用于绑定到数据的选项，具体如下。

• 使用DataSourceID属性进行数据绑定：此选项使用户能够将GridView控件绑定到数据源控件。笔者在此建议使用此方法，因为它允许GridView控件利用数据源控件的功能并提供了内置的排序、分页和更新功能。
• 使用DataSource属性进行数据绑定：此选项使用户能够绑定到包括ADO.NET数据集和数据读取器在内的各种对象。此方法需要为所有附加功能（如排序、分页和更新）编写代码。

当使用DataSourceID属性绑定到数据源时，GridView控件支持双向数据绑定。除了可以使该控件显示返回的数据之外，还可以使它自动支持对绑定数据的更新和删除操作。

（2）在GridView控件中设置数据显示格式

可以指定GridView控件的行的布局、颜色、字体和对齐方式，以及行中包含的文本和数据的显示。另外，也可以指定将数据行显示为项目、交替项、选择的项还是编辑模式项。GridView控件还允许指定列的格式。

当然，对于样式的设置，还是建议读者使用Visual Studio 2012的“自动套用格式”对话框，这样会更快、更高效，如图8-2所示。

图8-2　Visual Studio 2012的“自动套用格式”对话框

8.1.2　DetailsView控件

DetailsView 控件用于显示表中数据源的单个记录，其中每个数据行表示记录中的一个字段。该控件通常与GridView控件组合使用。通过使用DetailsView控件，可以从它的关联数据源中一次显示、编辑、插入或删除一条记录。在默认情况下，DetailsView控件将记录的每个字段显示在它自己的一行内。DetailsView控件通常用于更新和插入新记录，并且在主/详细方案中使用。在这些方案中，主控件的选中记录决定要在DetailsView控件中显示的记录。即使DetailsView控件的数据源公开了多条记录，该控件一次也仅显示一条数据记录。

DetailsView控件需要依赖数据源控件的功能执行数据操作，例如更新、插入和删除记录等操作任务。另外，DetailsView控件不支持数据的排序。

从关联的数据源选择特定的记录时，可以通过分页到该记录进行选择。DetailsView控件显示的记录是当前选择的记录。

通过Visual Studio 2012可以十分方便地使用和设置DetailsView控件。当插入DetailsView控件后，单击控件右上方的三角形按钮，在弹出的面板选项中可以对其进行具体设置，如图8-3所示。

图8-3　DetailsView控件设置面板

（1）使用DetailsView控件进行数据绑定

在DetailsView控件中，提供了如下两个用于绑定到数据的选项。

• 使用DataSourceID属性进行数据绑定：此选项使用户能够将DetailsView控件绑定到数据源控件。建议使用此选项，因为它允许DetailsView控件利用数据源控件的功能并提供了内置的更新和分页功能。
• 使用DataSource属性进行数据绑定：此选项使用户能够绑定到包括ADO.NET数据集和数据读取器在内的各种对象。此方法需要为任何附加功能（如更新和分页等）编写代码。

当使用DataSourceID属性绑定到数据源时，DetailsView控件支持双向数据绑定。除了可以使该控件显示数据之外，还可以使它自动支持对绑定数据的插入、更新和删除操作。

（2）使用DetailsView控件数据

将DetailsView控件绑定到数据源控件，后者接下来需要处理连接到数据存储区及返回所选择的数据的任务。将DetailsView控件绑定到数据与以声明方式设置DataSourceID属性一样简单。另外，也可以用编写代码的方式将该控件绑定到数据源。

若要启用编辑操作，可以将AutoGenerateEditButton属性设置为True。除呈现数据字段外，DetailsView控件还将呈现一个【编辑】按钮。单击【编辑】按钮可使DetailsView控件进入编辑模式。在编辑模式下，DetailsView控件的CurrentMode 属性会从ReadOnly更改为Edit，并且该控件的每个字段都会呈现其编辑用户界面，如文本框或复选框等。还可以使用样式、DataControlField对象和模板自定义编辑用户界面。

8.1.3　FormView控件

FormView控件用于显示表中数据源的单个记录。在使用FormView控件时，通过用户指定的模板来显示和编辑绑定值。模板中包含用于创建窗体的格式、控件和绑定表达式。FormView控件通常与GridView控件一起用于主控/详细信息方案。

FormView控件的主要功能如下。

（1）可以使用数据源中的单个记录。

（2）实现更新和插入新记录。

（3）可以自动对它的关联数据源中的数据进行分页，一次一个记录，但前提是数据由实现ICollection接口的对象表示或基础数据源支持分页。

（4）能够公开多个可以处理的多个事件，以便执行实现功能的代码。这些事件在对关联的数据源控件执行插入、更新和删除操作之前和之后引发，并且还可以为ItemCreated和ItemCommand事件编写处理程序。

注意：FormView控件的事件模型与GridView控件的事件模型相似。但是，FormView 控件不支持选择事件，因为当前记录始终是所选择的项。

FormView控件提供了如下两个用于绑定到数据的选项。

• 使用DataSourceID属性进行数据绑定：此选项使用户能够将FormView控件绑定到数据源控件。建议使用此选项，因为它允许FormView控件利用数据源控件的功能并提供了内置的更新和分页功能。
• 使用DataSource属性进行数据绑定：此选项使用户能够绑定到包括ADO.NET数据集和数据读取器在内的各种对象。此方法需要为任何附加功能（如更新和分页等）编写代码。

当使用DataSourceID属性绑定到数据源时，FormView 控件支持双向数据绑定。除了可以使该控件显示数据之外，还可以使它自动支持对绑定数据的插入、更新和删除操作。

通过Visual Studio 2012可以十分方便地使用和设置FormView控件。当插入FormView控件后，单击其右上方的三角形按钮，在弹出的面板选项中可以对其进行具体设置，如图8-4所示。

图8-4　FormView控件设置面板

单击图8-4中的“编辑模板”选项后，在弹出的面板中可以设置此FormView控件的显示模板格式，如图8-5所示。

图8-5　编辑FormView模板

8.1.4　Repeater控件

Repeater控件是一个数据绑定容器控件，它能够生成各个项的列表，并可以使用模板定义网页上各个项的布局。当该页运行时，该控件为数据源中的每个项重复此布局。

Repeater控件是一个容器控件，它可以从页的任何可用数据中创建自定义列表。由于Repeater控件没有默认的外观，因此可以使用该控件创建多种列表，其中常用的格式有如下3种。

• 表布局。
• 逗号分隔的列表（例如，a、b、c、d等）。
• XML格式的列表。

（1）配合模板使用Repeater控件

若要使用Repeater控件，需创建定义控件内容布局的模板。模板可以包含标记和控件的任意组合。如果未定义模板，或者模板都不包含元素，则当应用程序运行时，该控件不显示在页上。

表8-1描述了Repeater控件支持的模板。

表8-1　Repeater控件支持的模板

模　　板	描　　述
ItemTemplate	包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件
AlternatingItemTemplate	包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。通常，可以使用此模板为交替项创建不同的外观，例如指定一种与在 ItemTemplate中指定的颜色不同的背景色
HeaderTemplate FooterTemplate	包含在列表的开始和结束处分别呈现的文本和控件
SeparatorTemplate	包含在每项之间呈现的元素。典型的示例可能是一条直线（使用HR元素）

（2）将数据绑定到Repeater控件

在具体使用时，必须将Repeater控件绑定到数据源。最常用的数据源是数据源控件，如SqlDataSource或ObjectDataSource控件。也可以将Repeater控件绑定到任何实现IEnumerable接口的类，包括ADO.NET数据集（DataSet类）、数据读取器（SqlDataReader类或OleDbDataReader类）或大部分集合。

绑定数据时，可以为Repeater控件整体指定一个数据源。向Repeater控件添加控件（例如，向模板中添加Label或TextBox控件）时，可以使用数据绑定语法将单个控件绑定到数据源返回的项的某个字段。

（3）Repeater控件支持的事件

ItemCommand事件在响应各个项中的按钮单击时引发。此事件被设计为允许用户在向模板中嵌入Button、LinkButton或ImageButton Web服务器控件，并在发生按钮单击时得到通知。当用户单击按钮时，此事件便会被发送到按钮的容器，即Repeater 控件。ItemCommand事件的最常见用途是对Repeater控件的更新和删除行为编程。由于每个按钮单击都引发相同的ItemCommand事件，因此可以将每个按钮的CommandNam属性设置为唯一的字符串值，以此来确定单击了哪个按钮的RepeaterCommand EventArgs参数的CommandSource属性包含被单击按钮的CommandName属性。

8.1.5　DataList控件

DataList控件用可自定义的格式显示各行数据库信息。在所创建的模板中定义数据显示布局。可以为项、交替项、选定项和编辑项创建模板，也可以使用标题、脚注和分隔符模板自定义DataList的整体外观。通过在模板中包括Button Web服务器控件，可以将列表项连接到代码，而这些代码允许用户在显示、选择和编辑模式之间进行切换。

DataList控件将以某种格式显示数据，这种格式可以使用模板和样式进行定义。DataList控件可用于任何重复结构中的数据，如数据库表。DataList控件可以以不同的布局显示行，如按列或行对数据进行排序。

（1）将数据绑定到控件

在具体使用时，必须将DataList Web服务器控件绑定到数据源。最常用的数据源是数据源控件，如SqlDataSource或ObjectDataSource控件。也可以将DataList控件绑定到任何实现IEnumerable接口的类，该接口包括ADO.NET数据集（DataSet类）、数据读取器（SqlDataReader类或OleDbDataReader类）或大部分集合。绑定数据时，可以为DataList 控件整体指定一个数据源。在给此控件添加其他控件（例如，列表项中的标签或文本框）时，还可以将子控件的属性绑定到当前数据项的字段。

（2）定义DataList模板

在DataList控件中，可以使用模板定义信息的布局。DataList控件支持的模板如表8-2所示。

表8-2　DataList控件支持的模板

模　　板	描　　述
ItemTemplate	包含一些HTML元素和控件，将为数据源中的每一行呈现一次这些HTML元素和控件
AlternatingItemTemplate	包含一些HTML元素和控件，将为数据源中的每两行呈现一次这些HTML元素和控件。通常，可以使用此模板来为交替行创建不同的外观，例如指定一个与在ItemTemplate属性中指定的颜色不同的背景色
SelectedItemTemplate	包含一些元素，当用户选择DataLis 控件中的某一项时将呈现这些元素。通常，可以使用此模板通过不同的背景色或字体颜色直观地区分选定的行。还可以通过显示数据源中的其他字段来展开该项
EditItemTemplate	指定当某项处于编辑模式中时的布局。此模板通常包含一些编辑控件，如TextBox控件
HeaderTemplate和 FooterTemplate	包含在列表的开始和结束处分别呈现的文本和控件
SeparatorTemplate	包含在每项之间呈现的元素，典型的示例可能是一条直线（使用HR元素）

（3）项的布局

DataList控件使用HTML表对应用模板的项的呈现方式进行布局。可以控制各个表单元格的顺序、方向和列数，这些单元格用于呈现DataList项。表8-3描述了DataList控件支持的布局选项。

（4）事件

DataList控件支持多种事件，其中ItemCreated事件可在运行时自定义项的创建过程。ItemDataBound事件还提供了自定义DataList控件的能力，但需要在数据可用于检查之后。例如，如果使用DataList控件显示任务列表，则可以用红色文本显示过期项，以黑色文本显示已完成项，以绿色文本显示其他任务。这两个事件都可用于重写来自模板定义的格式设置。

其余的事件为了响应列表项中的按钮单击而引发，这些事件旨在帮助响应DataList控件的最常用功能。支持该类型的EditCommand事件、DeleteCommand事件、UpdateCommand事件和CancelCommand事件。

表8-3　DataList支持的布局选项

布 局 选 项	描　　述
流布局	列表项在行内呈现，如同文字处理文档中一样
表布局	列表项在HTML表中呈现。由于在表布局中可以设置表单元格属性（如网格线），这就为用户提供了更多可用于指定列表项外观的选项
垂直布局和 水平布局	默认情况下，DataList控件中的项在单个垂直列中显示。但是可以指定该控件包含多个列。如果这样，可进一步指定这些项是垂直排序（类似于报刊栏）还是水平排列（类似于日历中的日）
列数	不管DataList控件中的项是垂直排序还是水平排序，都可以指定列表的列数。这使用户能够控制网页呈现的宽度，通常可避免水平滚动

注意：DataList控件使用HTML表元素在列表中呈现项，但是如果要精确地控制用于呈现列表的HTML，建议使用Repeater Web服务器控件，而不是DataList控件。

8.1.6　DetailsView控件

DetailsView 控件用于显示表中数据源的单个记录，其中每个数据行表示记录中的一个字段。可以从它的关联数据源中一次显示、编辑、插入或删除一条记录。在默认情况下，DetailsView控件将记录的每个字段显示在它自己的一行内。DetailsView控件通常用于更新和插入新记录，并且在主/详细方案中使用。在这些方案中，主控件的选中记录决定要在DetailsView控件中显示的记录。即使DetailsView控件的数据源公开了多条记录，该控件一次也仅显示一条数据记录。

实例032　演示DetailsView控件的数据绑定

源码路径　光盘\daima\8\DetailsView　　视频路径　光盘\视频\实例\第8章\032

本实例的具体实现过程如下。

（1）打开Visual Studio 2012，新建一个名为“DetailsView”的网站项目，如图8-6所示。

范例063：显示绑定表达式格式化的数据
源码路径：光盘\演练范例\063视频路径：光盘\演练范例\063范例064：绑定数据库中的图片路径
源码路径：光盘\演练范例\064视频路径：光盘\演练范例\064\

图8-6　新建网站项目

（2）通过工具箱插入一个DetailsView控件，并为其新建一个数据源，如图8-7所示。

图8-7　插入DetailsView控件

（3）在弹出的“数据源配置向导”对话框中分别设置数据库和数据源ID，如图8-8所示。

图8-8　“数据源配置向导”对话框

（4）单击【确定】按钮，弹出“配置数据源”对话框，在“选择您的数据连接”界面中单击【新建连接】按钮，为其设置一个指定的连接SQL数据库，如图8-9所示。

图8-9　“选择您的数据连接”

（5）单击【下一步】按钮，弹出“配置Select语句”界面，在此选择“指定自定义SQL语句或存储过程”单选项。如图8-10所示。

图8-10　“配置Select语句”

（6）单击【下一步】按钮，弹出“定义自定义语句或存储过程”界面，在此可以定义一个查询语句，例如“select * from Products”，如图8-11所示。

（7）单击【下一步】按钮，弹出“测试查询”界面，在此单击【测试查询】按钮后可以显示查询的结果，如图8-12所示。

图8-11　“定义自定义语句或存储过程”界面

图8-12　“测试查询”界面

（8）单击【确定】按钮返回设计界面，此时成功地将数据源和DetailsView控件实现了绑定，并设置了分页处理。该控件执行后，将会以分页样式显示数据库内的数据，如图8-13所示。

图8-13　执行效果

由图8-13所示的结果可以看出，当绑定DetailsView控件后，在每页显示数据库内的一条数据，并且分页的单位是1，即下一页显示下一条数据。

纵观DetailsView控件和前面介绍的GridView控件，读者应该发现两者是最佳拍档。在具体开发应用中，可以使用GridView控件列表显示库内的所有数据，然后通过DetailsView控件来显示指定一条数据的详细信息。

8.1.7　FormView控件

FormView控件用于显示表中数据源的单个记录。在使用FormView控件时，通过用户指定的模板来显示和编辑绑定值。模板中包含用于创建窗体的格式、控件和绑定表达式。FormView控件通常与 GridView控件一起关联使用，共同实现信息展示。FormView控件与DetailsView控件相似，二者之间的差别仅在于DetailsView控件使用表格布局。在该布局中，记录的每个字段都各自显示为一行。而FormView控件不指定用于显示记录的预定义布局。

实例033　用FormView控件绑定数据库“Students”的数据

源码路径　光盘\daima\8\FormView　　视频路径　光盘\视频\实例\第8章\033

本实例的功能是使用FormView控件绑定数据库“Students”的数据，并分别实现编辑、添加和删除操作功能。本实例的具体实现过程如下。

（1）打开Visual Studio 2012，新建一个名为“FormView”的网站项目，如图8-14所示。

范例065：泛型集合数据绑定
源码路径：光盘\演练范例\065视频路径：光盘\演练范例\065范例066：绑定表达式
源码路径：光盘\演练范例\066视频路径：光盘\演练范例\066\

图8-14　新建网站项目

（2）通过工具箱插入一个FormView控件，并为其新建一个数据源，如图8-15所示。

图8-15　插入FormView控件

（3）在弹出的“数据源配置向导”对话框中分别设置数据库和数据源ID，如图8-16所示。

图8-16　“数据源配置向导”对话框

（4）单击【确定】按钮，弹出“配置数据源”对话框，在“选择您的数据连接”界面中单击【新建连接】按钮，为其设置一个指定的连接SQL数据库，如图8-17所示。

图8-17　“选择您的数据连接”界面

（5）单击【下一步】按钮，弹出“配置Select语句”界面，在此选择“指定自定义SQL语句或存储过程”单选项，如图8-18所示。

图8-18　“配置Select语句”界面

（6）单击【下一步】按钮，弹出“定义自定义语句或存储过程”界面，在此可以定义一个查询语句，例如“select * from Products”，如图8-19所示。

图8-19　“定义自定义语句或存储过程”界面

（7）单击【下一步】按钮，弹出“测试查询”界面，在此单击【测试查询】按钮后可以显示查询的结果，如图8-20所示。

图8-20　“测试查询”界面

（8）单击【确定】按钮返回设计界面，此时成功地将数据源和DetailsView控件实现了绑定。

（9）勾选“FormView任务”中的“启动分页”复选框，设置控件内数据分页显示，如图8-21所示。

图8-21　启动分页

（10）单击“FormView任务”中的“编辑模板”选项，并分别设置编辑、添加和删除操作选项，如图8-22所示。

图8-22　设置操作选项

至此，该实例设计完毕。执行后将会分页样式显示数据库内的数据，如图8-23所示；单击“编辑”链接后将显示数据更新界面，如图8-24所示；单击“删除”链接后，将删除此条数据。

图8-23　初始效果

图8-24　更新界面

注意：初学者在调试上述实例的过程中可能会发生错误，如图8-25所示。

图8-25　错误提示

这是因为在绑定时忘记设置更新、添加和删除操作！解决上述错误的方法如下。

（1）在数据源配置过程中，在“定义自定义语句或存储过程”界面中定义查询语时，如果要对GridView控件内的数据实现添加、删除和更新操作，还必须在该对话框中依次单击“UPDATE”、“DELETE”、“INSERT”选项卡，并分别定义设置对应的操作语句，如图8-26所示。

图8-26　“定义自定义语句或存储过程”界面

（2）如果在“配置Select语句”界面中选择的是“指定来自表或视图的列”单选项，如图8-27所示，则在设置列值后，需要单击【高级】按钮，在弹出的“高级SQL生成选项”对话框中勾选“生成INSERT、UPDATE和DELETE语句”复选框，如图8-28所示。

图8-27　“配置Select语句”界面

图8-28　“高级SQL生成选项”对话框

8.1.8　数据绑定控件演练

ASP.NET中的数据绑定控件已经介绍完毕，本节将通过一个具体的实例来说明使用数据绑定控件的方法。

实例034　演示数据绑定，并显示数据库内的数据

源码路径　光盘\daima\8\Default.aspx　　视频路径　光盘\视频\实例\第8章\034

本实例的实现文件为Default.aspx，实现代码如下。

　　　　<asp:GridView ID="GridView1" 
　　　　runat="server" DataSourceID="AccessDataSource2" 
　　　　　 AllowSorting="True" 
　　　　　 AutoGenerateColumns="False"
　　　　 >
　　　　　 <Columns>
　　　　　　　 <asp:BoundField DataField="sid" 
　　　　　　　 HeaderText="sid" 
　　　　　　　 SortExpression="sid" 
　　　　　　　/>
　　　　　　　<asp:BoundField DataField="sname" HeaderText="sname"
　　　　　　　　　 SortExpression="sname" />
　　　　　　　<asp:BoundField DataField="sprice" HeaderText="sprice" 
　　　　　　　　　SortExpression="sprice" />
　　　　　</Columns>
　　　</asp:GridView>
　　　<asp:DataList ID="DataList1" runat="server" DataSourceID="AccessDataSource3">
　　　　　<ItemTemplate>
　　　　　　　sprice:
　　　　　　　<asp:Label ID="spriceLabel" runat="server" Text='<%#| Eval("sprice") %>' />
　　　　　　　<br />
<br />
　　　　　</ItemTemplate>
　　　</asp:DataList>
　　　<asp:AccessDataSource ID="AccessDataSource3" runat="server" 
　　　　　DataFile="~/shop.mdb" SelectCommand="SELECT [sprice] FROM [good]">
　　　</asp:AccessDataSource>
　　　<asp:AccessDataSource ID="AccessDataSource2" runat="server" 
　　　　　DataFile="~/shop.mdb" SelectCommand="SELECT * FROM [good]">
　　　</asp:AccessDataSource>
　　　<asp:AccessDataSource ID="AccessDataSource1" runat="server">
　　　</asp:AccessDataSource>　　
　　</div>

范例067：绑定方法返回值
源码路径：光盘\演练范例\067视频路径：光盘\演练范例\067范例068：Repeater控件实现商
品展示
源码路径：光盘\演练范例\068视频路径：光盘\演练范例\068\

上述代码执行后，将在各控件内分别显示各绑定的数据。GridView控件的显示效果如图8-29所示；DataList控件的显示效果如图8-30所示。

图8-29　GridView控件内的数据

图8-30　DataList控件内的数据