9.4 DataList控件
DataList控件默认使用表格方式来显示数据，其使用方法与Repeater控件相似，也是使用模板标记。不过，DataList控件新增了SelectItemTemplate和EditItemTemplate模板标记，可支持选取和编辑功能。DataList控件可以自己定义的格式显示数据库行的信息。显示数据的格式在创建的模板中定义。可以为项、交替项、选定项和编辑项创建模板，在这些模板中，除了ItemTemplate模板外，其他都是可选的。
DataList控件中各种Template模板说明如下。
● AlternatingItemTemplate：类似于ItemTemplate元素，但在DataList控件中隔行（交替行）呈现。通过设置AlternatingItemTemplate元素的样式属性，可以为其指定不同的外观。
● EditItemTemplate：现在设置为编辑模式后的布局。此模板通常包含编辑控件（如TextBox控件）。当EditItemIndex设置为DataList控件中某一行的序号时，将为该行调用EditItemTemplate。
● FooterTemplate：在DataList控件的底部（脚注）呈现的文本和控件。FooterTemplate不能进行数据绑定。
● HeaderTemplate：在DataList控件顶部（标头）呈现的文本和控件。HeaderTemplate不能进行数据绑定。
● ItemTemplate：为数据源中的每一行都呈现一次的元素。
● SelectedItemTemplate：当用户选择DataList控件中的一项时呈现的元素。通常的用法是增加所显示数据字段的个数并以可视形式突出标记该行。
● SeparatorTemplate：在各项之间呈现的元素。SeparatorTemplate项不能进行数据绑定。
9.4.1 DataList控件的属性和事件
DataList控件的相关属性很多，下面介绍常用属性，如表9-5所示。
表9-5 DataList控件的常用属性
DataList控件提供了对行为，以及对行的数据进行选择、编辑、更新和删除等操作相关事件，如表9-6所示。
表9-6 DataList控件的事件
9.4.2 编辑DataList控件的模板
编辑项模板除了可以以手写代码的方法外，还可以通过项模板编辑器进行可视化操作。在编辑器中提供了项模板、页脚和页眉模板以及分隔符模板。这三种是比较常用的项模板。编辑项模板的步骤如下：
01 在设计视图中选中DataList控件单击鼠标右键，在弹出如图9-12所示的“DataList任务”列表。
图9-12 选择项模板
02 单击“编辑模板”命令，进入如图9-13所示的“模板”编辑器界面。
图9-13 “模板”编辑器界面
03 在“模板”编辑器界面中的“显示”下列列表中列出了所有的项模板，这里选择“项模板”，进入如图9-14所示的“项模板”编辑器界面
图9-14 模板编辑器
项模板有4种类型ItemTemplate（普通项）、AlternatingItemTemplate（交叉项）、SelectedItemTemplate（选中项）、EditItemTemplate（可编辑项），可以分别为这些项进行项的编辑。ItemTemplate控制的是DataList中每一行的外观；AlternatingItemTemplate控制的是交替项的外观，当上下两项具有不同外观时，使用该项来设置，奇数项显示由ItemTemplate控制的外观，偶数项显示由AlternatingItemTemplate控制的外观；SelectedItemTemplate控制的是被选中项的外观；EditItemTemplate控制DataList控件中为进行编辑而选定的项内容，在需要进行编辑时，将外观从ItemTemplate切换到EditItemTemplate，然后可以修改项中的内容。
04 编辑设计DataList中ItemTemplate模板和SelectedItemTemplate。分别在ItemTemplate和SelectedItemTemplate中各自添加一个LinKButton，并设置不同的颜色背景，这样在单击此按钮时，因为颜色不同，就很容易和未被选中的状态区别开来。编辑完的模板如图9-15所示。
图9-15 编辑后的项模板
05 模板编辑结束后，在模板上单击鼠标右键，在弹出的快捷菜单中选择“结束模板编辑”命令，DataList模板进入不可编辑的状态。
9.4.3 使用属性编辑器
除了使用模板来编辑DataList控件的外观以外，也可以使用属性编辑器来修改外观。具体步骤如下：
01 选中DataList控件，在“属性”窗口中单击如图9-16所示的图标。
图9-16 属性窗口
02 弹出如图9-17所示的“DataList属性”对话框。在该对话框左侧有三个选项，一个是“常规”选项，主要用于设置DataList控件显示表格的布局。一个是“格式”选项，用户设置各种项的外观属性。还有一个是“边框”选项，用于设计表格的边框属性。打开“格式”选项，在“对象”列表框中选择“项”|“选定项”命令，并设置“背景色”为“#ffffcc”。
图9-17 “DataList属性”对话框
03 设置完成后，进入DataList的项模板编辑器中，可以发现如图9-18所示的SelectedItemTemplate模板的背景色已经被改变。
图9-18 选中项模板
【实例9-3】DataList控件的使用
本实例通过DataList控件的模板，以SqlDataSource控件为数据源，实现db_news数据库的tb_News表中当用户选择某条记录后，将展开显示该数据的详细记录。
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例9-3”。
02 在“实例9-3”中创建一个名为Default.aspx的窗体。
03 单击网站目录下的Default.aspx文件，进入“视图编辑”界面，打开“设计视图”，从工具箱中拖动一个DataList控件和一个SqlDataSource数据源控件。
04 配置SqlDataSource1控件的数据源绑定tb_News数据表。
05 在DataList控件右上方有一个向右的黑色小三角，单击这个小按钮打开“DataList控件任务”列表，展开“选择数据源”下拉列表，从中选择SqlDataSource1。
06 在“DataList任务”列表中选择“自动套用格式”选项。弹出自动套用格式对话框。单击“选择架构”列表中的“蓝黑2”选项，然后单击“确定”按钮。
07 切换到“源视图”，在编辑区中<form></form>标记之间编写如主要下代码：
上面的代码中第1行添加一个服务器DataList控件，设置控件的数据源为SqlDataSource1，列表项的主键为ID，定义了单击DataList控件项时进入的处理函数，在用户单击Select链接的时候会触发OnItemCommand事件，同时设置用于表布局中每行中有4列数据。第2行～第5行定义了控件ItemTemplate模板的内容。其中，第3行添加一个标签控件，使用绑定表达式绑定数据库表tb_News中的Title字段值显示在标签控件上。第4行添加一个服务器链接控件，设置按钮的命令为Select。
第6行～第11行定义了控件SelectedItemTemplate模板的内容。其中，第7行～第10行各添加一个标签控件，使用绑定表达式绑定数据库表tb_News中的ID、Title、Categories和IssueDate字段值显示在标签控件上。
08 双击网站目录下的Default.aspx.cs文件，编写代码如下：
上面的代码中第1行定义处理DataList1控件项命令事件ItemCommand的方法。第2行中的e.Item.ItemIndex参数中记录了用户选择的项，通过把这一项赋给DataList控件的SelectedIndex属性，确定DataList控件中需要展开的项。第3行调用DataBind方法重新进行数据绑定，以便显示展开的项。
09 按快捷键Ctrl＋F5运行程序，如图9-19所示。用户单击某一条数据中的“查看”按钮，显示如图9-20所示的数据详情。
图9-19 运行结果1
图9-20 运行结果2