知识点：掌握 DataList 控件呈现数据的方法； 掌握 Repeater 控件呈现数据的方法；掌握处理 Repeater 控件中的按钮事件。
1、 使用 DataList 控件呈现数据
在用 开发 Web 应用程序时，DataList 是非常重要的数据绑定控件。DataList 控件 可用于创建模板化的列表数据，如果重复结构比较复杂，那么建议使用 DataList 和 Repeater 控件，因为 GridView 控件比较适合显示多行多列的表格类数据。
示例练习1：DataList控件的使用
要求：制作一个车型展示页面，使用DataList控件。
前提：在【第八课】的基础之上完成。
第一步，添加Web窗体：在VS中打开已有项目【WebApplication7】，右键单击项目名称【WebApplication7】，依次点击【添加】→【Web窗体】，将窗体命名为CarList，然后单击【确定】。
第二步，添加DataList控件：在默认打开的CarList.aspx文件中，从工具箱拖放一个DataList控件到适合的位置。
第三步，绑定数据源：打开CarList.aspx文件，切换到【拆分】视图。
①选中DataList控件后，点击右上角
，在弹出的【DataList任务】中，点击【选择数据源】，然后点击下拉箭头，点击【】
②在弹出的【数据源配制向导】窗体中，选择默认应用程序从哪里获取数据？【数据库】，为数据源指定ID，使用默认名称，然后点击【确定】
③在弹出的【配制数据源】窗口中，点击【新建连接】按钮
④在弹出的【添加连接】窗口中，输入服务器名，这个一般可以使用英文的点即可。如果无法使用英文点，则需要写数据库按照时的服务器名。然后再下面点选要连接的数据库名称，最后点击【确定】
⑤此时会自动填写一行代码，直接点击【下一步】
⑥单击【下一步】
⑦在【配置数据源】窗口中，设置想要查询的数据，我们这查询Scar表的所有列，然后点击【下一步】
⑧可以点击【测试查询】看一下结果，最后点击【完成】按钮。
⑨注意分析查看此时源代码文件
代码分析：DataList 的模板类型包括：ItemTemplate 用于显示项，AlternatingItemTemplate 用于显 示交替项，EditItemTemplate 用于显示编辑项，同时也支持 HeaderTemplate、FooterTemplate 等模板，这些模板的作用与 GridView 控件中模板列的模板相同。另外，DataList 还支持间隔项 模板 SeparatorTemplate，用于在两个项之间显示。
DataList—王迪
CarId:
CarName:
BrandId:
Picture:
OfficialPrice:
Click:
第四步，运行测试：在CarList.aspx页面单击鼠标右键，然后点击【在浏览器中查看】
我们看到数据源中的所有数据显示出来，但是一行只显示一列数据。
观察一下页面源代码：DataList控件默认输出是一个table表格。
第五步，设置列数：给DataList控件添加一个RepeatColumns属性。
第六步，设计样式：
①先制作一个样式出来，写div+css实现图中效果。
DataList—王迪
汽车名称
编号：
官方价格：
点击量：
CarId:
CarName:
BrandId:
Picture:
OfficialPrice:
Click:
②将写好的样式，套用到DataList控件中。
DataList—王迪
" />
编号：
官方价格：
点击量：
运行测试：
细节调整：如每个产品之间增加一些间隔，可以设置div的margin属性，如margin:0px 10px 20px 0px;
2、Repeater 控件
Repeater 控件专门用于精确内容的显示，它也是基于模板的方式，不过它不会自动生成任 何用于布局的代码。Repeater 控件甚至没有一个默认的外观，它完全是通过模板来控制。而且也只能通过源代码视图进行模板的编辑。
2.1 使用 Repeater 控件呈现数据
GridView 和 DataList 自动生成标签，但是 Repeater 控件不会自动生成任何 HTML 标签，所以带来了效率上的提升，也使精确展示内容成为可能。
示例练习2：使用 Repeater 控件呈现数据
要求：在当前项目中，新添加一个Web窗体，并使用 Repeater 控件呈现车型列数据。
第一步，添加Web窗体：右键单击项目名称【WebApplication7】，依次点击【添加】→【Web窗体】，将窗体命名为CarListRepeater，然后单击【确定】。
第二步，添加Repeater控件：在默认打开的CarListRepeater.aspx文件中，从工具箱拖放一个Repeater控件到适合的位置。
第三步，绑定数据源：在CarListRepeater.aspx文件中，单击鼠标右键，然后点击【查看代码】，打开后置代码文件CarListRepeater.aspx.cs
//声明一个方法，绑定数据源
public void BindRepeater()
{
this.Repeater1.DataSource = DBHelper.getDataSet("select * from Scar").Tables[0];
this.Repeater1.DataBind();
}
第四步，调用绑定方法：在“CarListRepeater.aspx.cs”文件的Page_Load方法里，调用刚才写的方法。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRepeater();
}
}
第五步，运行测试：直接将“CarListRepeater.aspx”文件在浏览器中运行测试
页面上似乎没有内容，因为Repeater控件不会自动生成任何用于布局的代码。想要将数据显示出来，我们需要继续操作。
第六步，编辑Repeater控件：回到CarListRepeater.aspx文件，将视图切换到【拆分】模式，选中Repeater控件，注意观察Repeater控件不同于DataList控件，没有编辑模板功能。只能在“源视图里编辑控件模板”。当我们在Repeater控件标签之间，输入尖括号
模板属性
说明
标签之间内容出现次数
AlternatingItemTemplate
包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。 通常，可以使用此模板为交替项创建不同的外观，例如指定一种与在ItemTemplate 中指定的颜色不同的背景色。
itemtemplate轮换出现
FooterTemplate
包含在列表的结束处呈现的文本和控件。
标签之间的内容只出现一次。
HeaderTemplate
包含在列表的开始处呈现的文本和控件。
标签之间的内容只出现一次。
ItemTemplate
包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。
标签之间的内容循环出现
SeparatorTemplate
包含在每项之间呈现的元素。典型的示例可能是一条直线(使用 hr 元素)。
间隔的内容
①简单编写模板：这里使用HeaderTemplate、ItemTemplate和FooterTemplate
运行测试：注意观察页面，总结规律。Repeater控件默认一行展示，除了用户自定义的模板，不会自动生成任何用于布局 的代码。
②优化模板：比如增加换行标签
③呈现数据：如呈现数据源里的车型名称，使用 获取
④编写完整样式：呈现数据、美化样式
完整代码：
Repeater—王迪
车型展示——头部
--%>
展示完毕——尾部--%>
示例练习3：在页面增加搜索功能
要求：在当前页面中，增加一个搜索功能，允许通过汽车名称搜索
第一步，设计搜索框：在CarListRepeater.aspx文件，设计搜索框，调用控件
请输入：
第二步，给按钮添加事件：双击【搜索】按钮，进入事件编写
protected void Button1_Click(object sender, EventArgs e)
{
//获取用户输入的内容
string name = this.TextBox1.Text;
//声明查询语句，这里使用like进行模糊查询
string sql = "select * from Scar where CarName like '%"+name+"%'";
this.Repeater1.DataSource = DBHelper.getDataSet(sql).Tables[0];
this.Repeater1.DataBind();
}
第三步，允许测试：
案例思考：如果用户在搜索框里，什么都没有输入，搜索结果会是什么？为什么会是这样的结果？
2.2 在 Repeater 控件中删除数据
Repeater 控件不支持编辑、删除、排序等功能，所有的事件必须自行编写代码处理。当点 击 Repeater 中的按钮控件时会触发 Repeater 控件的 ItemCommand 事件。为了标识单击的按钮， 可以设置按钮的 CommandName 属性。在进行删除或者编辑操作时，都需要本行车型的编号，可以 设置按钮的 CommandArgument 属性来保存本行的车型编号。
示例练习4：在 Repeater 控件中删除数据
版权所有 IT知识库 CopyRight © 2000-2050 IT知识库 , All Rights Reserved.
京ICP备09083238号
