Web技术应用项目化教程项目4任务4.4.pptVIP

《Web技术应用项目化教程》 第*页 项目四 ADO.NET组件和Web数据控件 理解与掌握SqlDataSource数据源控件、 Web数据控件及其使用方法。 项目四目标 任务4.4使用DataList控件操作学生成绩表信息 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 【知识准备】 DataList控件简介 DataList控件也是以模板为基础的数据绑定控件，与Repeater控件 有许多相似之处。DataList除了可以定义Repeater控件所具有的5个 模板外，还增加了SelectedItemTemplate模板（定义选定项的内容和 布局）和EditItemTemplate模板（定义当前编辑项的内容和布局）。 与Repeater控件相比较，DataList控件最大的优势在于它有内容的样 式和属性，可以使用模板编辑器和属性生成器来设计模板和属性， 这无疑提高了用户的编程效率。 DataList控件的特有样式属性如表4.20所示。 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 【任务要求】 在记录数据较长的情况下，模拟DetailsView控件，用卡片形式显示部 分信息，单击后显示记录的详细信息，要求每行仅显示一个字段（ 可以显示多个字段）。 【任务分析】 （1）根据任务要求，需要一个SqlDataSource控件、一个DataList 控件，主要控件属性设置如表4.22所示。 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 图4.47任务4.4.1运行的结果 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 【操作步骤】 （1）创建一个网站，名称为“4_4_1”，同前面任务操作添加一个Web 窗体。在Default.aspx页面拖放一个SqlDataSource和DataList控件， 并根据表4.22设置控件属性（或同任务1.4一样配置SqlDataSource数据 源），需要设置DataList的DataSourceID=“SqlDataSource”， 并设置Default.aspx的标题为“4_4_1.aspx”。 （2）在head/head中加入如下代码，设置表格table样式。 style type=text/css table{font-size:12px;} td{padding-right:12px;} /style （3）页眉模板的设计，其代码如下。 HeaderTemplate 学生详细成绩信息 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 【操作步骤】 （1）创建一个网站，名称为“4_4_1”，同前面任务操作添加一个Web 窗体。在Default.aspx页面拖放一个SqlDataSource和DataList控件， 并根据表4.22设置控件属性（或同任务1.4一样配置SqlDataSource数据 源），需要设置DataList的DataSourceID=“SqlDataSource”， 并设置Default.aspx的标题为“4_4_1.aspx”。 （2）在head/head中加入如下代码，设置表格table样式。 style type=text/css table{font-size:12px;} td{padding-right:12px;} /style （3）页眉模板的设计，其代码如下。 HeaderTemplate 学生详细成绩信息 /HeaderTemplate 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 （4）单击DataList1控件右上角“智能标记”，选择“编辑模板”选项， 在“显示”列表框中选择“ItemTemplate”模板，拖放一个table，设 置成单行三列，并分别拖放两个Label、一个LinkButton到表格的 单元格中，如图4.48所示。 图4.48 选择和编辑DataList的“ItemTemplate”模板 任务4.4.1 使用DataList控件模拟DetailsView显示学生成绩表 （5）选中Label1标签，右击，在弹出的快捷菜单中选 择“编辑DataBindings”项，如图4.49所示。 图4.49 选择“编辑DataBindings”项 任务4.4.1 使用DataList控件模拟DetailsView