1、第5章 服务器控件,5.1 实验一 HTML服务器控件练习 5.2 实验二 Web服务器控件练习,5.1 实验一 HTML服务器控件练习,实验目的1.了解HTML服务器控件的属性和方法。2.掌握HTML服务器控件的用法。,下一页,返回,5.1 实验一 HTML服务器控件练习,实验内容1.在Visual Studio.NET 2003中编辑HTML服务器控件在Visual Studio.NET 2003中编辑HTML控件非常方便，同样使用工具箱，选择HTML选项卡，双击控件或将控件拖曳到页面中，如图5-1所示。,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,将服务器控件设置为服务
2、器端控件，右击HTML控件，在弹出的快捷菜单中选择“作为服务器控件运行”命令即可，如图5-2所示。成为服务器控件后，后台代码会自动声明该控件，如“protected System.Web.UI.HtmlControls. HtmlInputCheckBox Checkboxl;”，在后台编程时可以通过Visual Studio.NET 2003代码提示功能获知控件属性，如图5-3所示。,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,2.填写个人注册信息，提交后显示录入的信息参考代码如下:,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1
3、 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,浏览网页，可以看到如图5-4所示的页面。注意以上代码中控件的属性取值，这些属性可以由Visual Studio.NET 2003的可视化编辑页面中的代码提示功能获知。3.实现图片的上传功能，上传
4、成功后在页面上显示图片参考代码如下:,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,成功运行此程序需要在c盘根日录下新建test文件。运行程序，选择本机中的图片，上传到服务器的指定位置，如图5-5所示。4.实现简单的试卷生成功能根据输入的试题的数目和每题的答案个数动态生成试卷的样式。参考代码如下:,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一
5、 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,下一页,返回,上一页,5.1 实验一 HTML服务器控件练习,可以根据自己的需求继续完善该试题生成页面，可以分为单选题、多选题、填空题，还可以结合以后要讲的数据库编程，做一个完整的在线考试系统。浏览网页，可以看到如图5-6所示的页面。,返回,上一页,5.2 实验二 Web服务器控件练习,实验目的1.了解Web服务器控件的属性和方法。2.掌握Web服务器控件的用法。,下一页,返回,5.2
6、 实验二 Web服务器控件练习,实验内容1.简单实现MIS系统中的用户信息编辑界面在MIS系统中用户除了有基本信息的升记外，还击要对其访问系统的权限进行设置，为了使编辑管理更加贴近现实，将一组相关的权限划分成一组，就是下面示例中所谓的角色。用户信息编辑界面的功能击求:添加用户的基本信息，然后赋予用户权限，提交后在页向底部显示这些信息。参考代码如下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,
7、返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,浏览页面，输入完用户的基本信息后，单击“角色管理”按钮，从“可选角色”列表框中选择角色项赋予用户，提交信息，可以看到如图5-7所示的页面。,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,2.简单实现MIS系统中的角色编辑界面角色是一组相关的权限，虽然有了访问系统功能资源的限制，但是无法满足同样功能页面根据不同角色显示不同数据范围的需求，如办事人员与负责
8、人同样可以查看信息列表，但负责人可以看到下属所有人登记的信息，而具体办事人员只能看到自己矜记过的。所以在下面的示例中添加了权限范围，可以根据自己需求或更好的解决方法来完善设计和程序。角色编辑界面的功能需求:添加角色的基本信息、赋予角色相应的菜单并提交显示这些信息。,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,参考代码如下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一
9、页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,浏览页面，输入完角色基本信息后，单击“权限信息”按钮，选中需要添加的菜单项，赋予用户，提交信息，可以看到如图5-8所示的页面。3.实现简单的在线投票功能参考代码如下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2
10、实验二 Web服务器控件练习,浏览网页，对3种态度进行投票可以看到如图5-9所示的页面。4.使用Calendar控件模拟显示备忘录参考代码如下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,在以上代码中的作用是将页面每隔10秒钟刷新一次，这时就会执行Page_ Load事件，告诉用户是否有待办的事项。以上代码能实现和数据库的连接，将待办事项存
11、储到数据库中即可实现真正的日历备忘录。浏览网页，选择相应的日期，可以看到如图5-10所示的页面。,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,5.验证用户输入信息的有效性首先添加联系人信息，包括姓名、年龄、住址、邮编、E-mail、电话，其中姓名为必输项，年龄要限制输入范围，邮编、E-mail、电话要对输入格式进行验证。参考代码如下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,浏览网
12、页，输入如图5-11所示的信息，单击“提交”按钮，提示输入错误。可以思考使用RegularExpressionValidator控件验证手机、日期和其他信息。下面是验证日期的正则表达式，包括闰年月份的验证，可以分析一下:,下一页,返回,上一页,5.2 实验二 Web服务器控件练习,var strRegular=/(?:(?:(?:19|2-9 d)(?:0 48|2468 048|1357926)|(?:2468048|357926)00)( /|-|.) (?:0?21(?:29)$)|(?:(?:19|2一9d)d(2( /|-|.) (?:(?:0?13578|102)2(?:31)|(
13、?:0?1,3-9|10-2)2(29|30)| (?:(?:0? 1-9)|(?:1 0-2 )2(?:0? 1-9|1dl20-8)$)| (?:(?:(?:19|2-9 d)(?:0 48|2468048|1357926)|(?:2468 048|357926)00)(年)(?:0?2(月)(?:29)(日?$)|(?:(?:19|2-9d)d2(年)(?:(?:0?13578|102)(月)(?:31)|(?:0?1,3-9|1 0-2 )(月)(29|30)(?:(?:0? 1-9)|(?:1 0-2)(月)(?:0? 1-9 |1d|20-8)(日)?s/;,返回,上一页,图5-1 Visual Studio.NET 2003 编辑页面,返回,图5-2 设置为服务器控件,返回,图5-3 HTML服务器控件属性提示,返回,图5-4 信息提交页面,返回,图5-5 图片上传页面,返回,图5-6 动态生成试卷,返回,图5-7 用户信息编辑界面,返回,图5-8 角色编辑界面,返回,图5-9 实现简单的在线投票功能,返回,图5-10 模似日历显示备忘录,返回,图5-11 验证联系人信息的有效性,返回,
