知识点:掌握 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号