第11周
教学目标
通过本周的学习使学生熟练掌握在不使用数据源控件的前提下GridView、DetailsView、FromView、DataList、Repeater和ListView这几种数据绑定控件的用法,能够根据页面操作的要求正确选择有关控件。
教学重点
掌握各种数据绑定控件GridView、DetailsView、FormView、ListView、Repeater、DataList的用法。
教学难点
在不使用数据源控件的情况下使用各种数据绑定控件展示及更新数据。GridView、DetailsView控件的模板列的定制及ListView、Repeater、DataList 控件各种模板的定义。
教学过程
各种数据绑定控件的常用用法:
1、GridView控件是以网格的形式显示多条记录,可实现分页、排序,并可对记
录进行选择、编辑、删除操作。(但不能进行插入)
(1) GridView控件提供了多种列类型,默认是BoundField类型,这种类型的列在显示态时是以Label的形式显示数据,在编辑态时用
TextBox来接受用户输入。如果BoundField列不能满足用户要求,
可以使用其他类型的列来绑定数据,或者使用TemplateField列定
制在不同模板下的列的显示情况。
(2) GridView的模板列主要有以下几种:ItemTemplate、AlternatingItemTemplate、EditItemTemplate、HeaderTemplate、
FooterTemplate。
(3) GridView提供了三种操作的命令按钮列CommandField,分别是“选择”、“编辑”和“删除”,要设置对应的ShowSelectButton、
ShowEditButton、ShowDeleteButton属性为“T rue”。
●当单击“选择”按钮时会触发SelectedIndexChanging事件,
之后触发SelectedIndexChanged事件。
●当单击“删除”按钮时会触发RowDeleting事件,删除后触发
RowDeleted事件。
●当单击“编辑”按钮时,触发RowEditing事件,GridView中其
他CommandField列会消失,并显示“更新”和“取消”按钮,
单击“更新”时会触发RowUpdating事件,更新后触发RowUpdated
事件。单击“取消”时会触发RowCancelingEdit事件。在相应
事件中写代码实现相应功能。
(4)启用“分页”功能后,点击分页编号会触发PageIndexChanging事件,分页后触发PageIndexChanged事件。
(5)启用“排序”功能后,点击列标题,触发Sorting事件,排序后触发Sorted事件。
(6)可以在GridView的RowDataBound事件中写代码,用来实现在每行绑定数据后要执行的操作,比如给每行的“删除”按钮添加一个客
户端单击事件,用以确认删除。
(7)如果在GridView中添加了ButtonField类型的列,单击它们时将触发RowCommand事件,可以通过判断CommandName属性值确定单击的
是哪一个按钮,以决定做何具体操作。
具体示例见第9章示例中的GridView_withDBHelper页面。
2、DetailsView是以表格形式显示和处理来自数据源的单条数据记录,它提供
了与GridView相同的许多数据操作和显示功能,可以对数据进行分页、更新、插入和删除。
3、FormView控件与DetailsView功能相同,也是显示数据源中的一个数据项,
并可以添加、编辑和删除数据。与DetailsView控件不同之处是,FormView 控件完全基于模板,提供了更多的布局控制选项。
(1) FormView控件常用的模板有:ItemTemplate、EditItemTemplate、InsertItemTemplate、HeaderTemplate、FooterTemplate、
EmptyDataTemplate、PagerTemplate。
(2) FormView控件不提供自动生成命令按钮以执行更新、删除或插入操作的方法。必须手动将这些按钮添加在不同的模板中。FormView控
件通过识别按钮的CommandName属性,来执行不同的操作。
(3)如果要用FormView控件实现数据的显示、编辑、插入、删除操作,
“New”
则在ItemTemplate模板中要添加CommandName分别为“Edit”,
和“Delete”的按钮。在EditItemTemplate模板中要添加
CommandName分别为“Update”和“Cancel”的按钮。在
InsertItemTemplate模板中要添加CommandName分别为“Insert”
和“Cancel”的按钮。单击这些按钮会触发相应的事件。
4、DataList可以通过使用不同的模板显示、选择、编辑数据源中的多个数据。
(1) DataList具有ItemTemplate、EditItemTemplate、AlternatingItemTemplate、FooterTemplate、HeaderTemplate、
SelectedItemTemplate、SeparatorTemplate这七种模板。它不能
插入数据。
(2)把DataList控件的属性RepeatDirection设置为"Horizontal",它呈现为水平平铺的效果,设置RepeatColumns的值,则决定每行显
示的数据个数。常用于电子商务网站多种商品的展示效果。当
RepeatDirection设置为"Vertical"且RepeatColumns="1"时,呈现
的是一种流的形式。常用于新闻列表或评论等的显示效果。
(3)点击DataList控件中的按钮,会触发ItemCommand事件,如果该按钮的CommandName为“Delete”时,也会触发DeleteCommand事件,
顺序是先触发ItemCommand事件,再触发DeleteCommand事件。同
理,如果该按钮的CommandName为“Edit”时,也会触发EditCommand
事件,顺序是先触发ItemCommand事件,再触发EditCommand事件。
如果该按钮的CommandName为“Update”时,也会触发UpdateCommand
事件,顺序是先触发ItemCommand事件,再触发UpdateCommand事
件。如果该按钮的CommandName为“Cancel”时,也会触发
CancelCommand事件,顺序是先触发ItemCommand事件,再触发
CancelCommand事件。
具体示例见第9章示例中的DataListDemor页面。
5、Repeater控件主要是通过模板以流的形式来显示数据源中的多条数据,它不
能编辑数据。Repeater提供了ItemTemplate、AlternatingItemTemplate、FooterTemplate、HeaderTemplate、SeparatorTemplate这五种模板。点击Repeater控件中的按钮,会触发ItemCommand事件。可以通过判断CommandName属性值确定单击的是哪一个按钮,以决定做何具体操作。像新闻列表、评论等信息的展示可以使用Repeater控件。
具体示例见第9章示例中的RepeaterDemo页面。
6、ListView控件是一个相当灵活的数据绑定控件,该控件不具有默认的格式呈
现,所有格式需要进行模板设计实现。它集成了GridView、DataList、Repeater、DetailsView和FormView控件的所有功能,可以在页面上自定义多条记录的显示布局。ListView控件允许用户编辑、插入和删除数据,以及对数据进行排序和分页。
(1) ListView控件包含LayoutTemplate、ItemTemplate、
ItemSeparatorTemplate、GroupTemplate、GroupSeparatorTemplate、EmptyItemTemplate、EmptyDataTemplate、SelectedItemTemplate、AlternatingItemTemplate、EditItemTemplate和InsertItemTemplate这11个模板。在使用时ListView中至少必需包含LayoutTemplate和ItemTemplate这两个模板。LayoutTemplate模板是ListView用来显示数据的布局模板,ItemTemplate则是每一条数据的显示模板,将ItemTemplate模板放置在LayoutTemplate模板中可以实现定制的布局。
(2)ListView控件的模板布局通常需要手工定义,但ListView控件也提供了5种预定义的布局:网格、平铺、流、单行、项目符号列表。在不使用数据源控件的前提下,该控件的模板布局要我们手工定义,如果初学者不熟练,也可以先选择某种预定义的布局(要用数据源控件才能使用),然后在此基础上进行修改以符合我们的要求。这里要强调的一点是当需要使用平铺的效果时,除了要用LayoutTemplate 和ItemTemplate这两个模板外,还要用到GroupTemplate模板。熟练掌握ListView的用法,基本可以做到用这一个控件就能完成所有页面的数据操作任务。当然有时其他控件可能用起来会更简单些。(3)如果要用ListView控件实现编辑、插入和删除数据时,则要在ItemTemplate模板中添加CommandName分别为“Edit”和“Delete”
的按钮。在EditItemTemplate模板中添加CommandName分别为“Update”和“Cancel”的按钮。在InsertItemTemplate模板中添加CommandName分别为“Insert”和“Cancel”的按钮。可以设置InsertItemPosition属性的值为"LastItem"或"FirstItem"来指定InsertItemTemplate模板的显现位置。
●单击“Edit”按钮,会触发ItemEditing事件。
●单击“Delete”按钮,会触发ItemDeleting和ItemDeleted事
件。
●单击“Update”按钮,会触发ItemUpdating和ItemUpdated事
件。
●单击“Cancel”按钮,会触发ItemCanceling事件。
●单击“Insert”按钮,会触发ItemInserting和ItemInserted
事件。
(4)如果ListView控件的ItemTemplate模板中有CommandName值为其他
值的按钮(如示例中的“查看详情”),单击它们时会触发ItemCommand
事件,可以通过判断按钮的CommandName属性,来执行不同的操作。
当然单击以上几种CommandName为指定值的按钮,也会触发
ItemCommand事件,而且是先触发ItemCommand事件,再触发它对
应的操作事件(如单击“Delete”按钮,先触发ItemCommand事件,
再触发ItemDeleting和ItemDeleted事件)。建议大家对于这几种
特殊操作,就在相应的操作事件中写代码实现有关操作,对于其他
的按钮,就在ItemCommand事件中写代码实现相应功能。
(5)在ListView控件中若要分页,则在LayoutTemplate模板中添加DataPager控件,数据绑定的代码要写在Page_PreRender事件中,
而不能写在Page_Load事件中。第二种用法是把DataPager控件放
在ListView控件之外,使用PagedControlID属性指定要分页的ListView
控件,除了要在Page_Load事件中绑定数据之外,还要在DataPager
控件的PreRender事件中把数据源绑定到该ListView控件上。
具体示例见第9章示例中的ListView_withDBHelper页面。
7、几种控件的使用总结:
(1)要显示或处理数据源中的多种记录,可以用GridView、DataList、Repeater、ListView控件,若是显示或处理数据源中的一条记录,则
使用DetailsView和FromView控件。
(2)若要用网格的形式显示或处理数据,可以用GridView和ListView控件。
(3)若要用平铺的效果显示或编辑数据,可以用DataList和ListView控件。
(4)若要用流的形式显示数据,可以用DataList、Repeater和ListView 控件。
(5)注意DataList、Repeater和ListView控件的ItemDataBound事件,这个事件是在项被数据绑定后触发,可以在该事件中加入确定删除的
代码。
8、有的网页为了呈现某种显示效果,可能要用到数据绑定控件的嵌套使用,如
显示某活动的评论及每条评论的所有回复,这里评论的展示及每条评论的回复的显示就用到了数据绑定控件的嵌套,可以在外层使用DataList、Repeater或ListView来显示评论,在它的ItemTemplate模板中除了定义要显示的评论信息外,还嵌套了一个DataList、Repeater或ListView控件来
展示某评论的所有的回复。要实现该功能,要在Page_Load事件中为外层控件绑定所有的评论,并在外层控件的ItemDataBound事件中为内层控件绑定该评论的所有回复。效果如下图所示:
具体示例见+社团项目中的ActivityDetail页面。
课后任务
1、各小组继续完善项目需求文档,完成数据库设计,在SQL SERVER中建库
建表,建好相应的约束并录入一定的数据。
2、熟练使用各种数据绑定控件来完成页面的显示及操作效果。完成项目首
页的功能。首页中显示的数据不能再是静态数据,要从数据库中读取并显示。
3、针对给定的数据库,新建网站,实现首页Default.aspx及News.aspx的效
果。
首页Default.aspx效果如下:(该页面显示了前6条学生信息和前5条新闻
信息。
点击新闻公告右边的“更多”,进入News.aspx页面,效果如下:分页显示所有新闻列表。
页面样式大家可以自行定义。
https://www.doczj.com/doc/955629752.html, 八爪鱼验证码登陆-控件识别方法(7.0版本) 本文给大家演示登陆界面有验证码或者其他验证(如滑块验证)的网站通过八爪鱼控件识别进行数据采集的方式。 所讲示例采集数据网址为/login.aspx 小贴士:通过八爪鱼的控件进行识别,这种方式如果需要自动识别,就需要购买验证码套餐,如果不购买也只能进行单机采集然后手动输入,注意这种方法只能是输入验证码的框才可以用这种方式。 步骤1 登陆八爪鱼7.0采集器→点击新建任务→自定义采集,进入到任务配置页面:然后输入网址→保存网址,系统会进入到流程设计页面并自动打开前面输入的网址。 验证码登陆-控件识别方法-图1:输入网址
https://www.doczj.com/doc/955629752.html, 接下来步骤是输入用户名密码了,八爪鱼模拟的是人的操作行为,所以这一步过程也很简单 步骤2 在浏览器中鼠标点击用户名输入框→在右边弹出的提示里面选择“输入文字”→输入自己的用户名→选择“确定”。 同样的方式输入密码,这样输入用户名密码的步骤就完成了。 验证码登陆-控件识别方法-图2:输入密码
https://www.doczj.com/doc/955629752.html, 验证码登陆-控件识别方法-图3:输入密码 这里八爪鱼采集器需要知道 1.验证码图片在哪里 2.输入框验证码的框在哪里 步骤3 点击下方浏览器中验证码图片的位置→按照提示框中的提示选择浏览器中的验证码框→再按照提示框中的提示点击浏览器中的登陆按钮
https://www.doczj.com/doc/955629752.html, 验证码登陆-控件识别方法-图4:点击验证码输入框
https://www.doczj.com/doc/955629752.html, 验证码登陆-控件识别方法-图5:点击验证码图片位置、登录按钮 接下来需要配置验证码输入失败和成功的两种场景 步骤4 点击提示框中的确认按钮,系统会自动提交一个错误的验证码→然后点击浏览器中的“验证码不正确”提示→再点击提示框中的确认按钮→选择提示框中的“开始配置识别成功场景”→在提示框中输入显示出来的验证码→选择提示框中的“应用到网页并完成配置”选项
实验编号:02 四川师大Web程序设计实验报告 2015年12月26日 计算机科学学院级 4 班实验名称https://www.doczj.com/doc/955629752.html,验证控件 姓名:沙夫都学号:2013110431 指导老师:徐勇实验成绩: 97 实验二https://www.doczj.com/doc/955629752.html,验证控件 一.实验目的及要求 使用https://www.doczj.com/doc/955629752.html,验证控件制作一个简单的用户注册页面。 二.实验内容 1.使用https://www.doczj.com/doc/955629752.html,验证控件制作一个简单的用户注册页面。 2.注册页面中有用户名、密码、重复密码、年龄、电子邮件等必填项。其中密码需要二次 验证,年龄范围在1~100之间,电子邮件符合规范。 三.实验主要流程、基本操作或核心代码、算法片段(该部分如不够填写,请另加附页) <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
用户注册 | |
用户名: | |