《ASP.NET应用开发与实践 教学课件 ppt 作者 刘乃琦 郭小芳 第20章 课程设计——AJAX许愿墙》由会员分享，可在线阅读，更多相关《ASP.NET应用开发与实践 教学课件 ppt 作者 刘乃琦 郭小芳 第20章 课程设计——AJAX许愿墙（24页珍藏版）》请在金锄头文库上搜索。
1、,本章要求：,第20章 课程设计AJAX许愿墙,AJAX许愿墙的设计目的 AJAX许愿墙的开发环境要求 AJAX许愿墙的功能结构及业务流程 AJAX许愿墙的数据库设计 主要功能模块的界面设计 主要功能模块的关键代码 AJAX许愿墙的调试运行,主要内容,1.课程设计目的 2.功能描述 3.总体设计 4.数据库设计 5.实现过程 6.调试运行 7.课程设计总结,第20章 课程设计AJAX许愿墙,20.1 课程设计目的,本章提供了“AJAX许愿墙”作为这一学期的课程设计之一，本次课程设计旨在提升学生的动手能力，加强大家对专业理论知识的理解和实际应用。本次课程设计的主要目的如下： 加深对面向对象程序设
2、计思想的理解，能对网站功能进行分析，并设计合理的类结构。 掌握ASP.NET网站的基本开发流程。 掌握AJAX技术在实际开发中的应用。 掌握ADO.NET技术在实际开发中的应用。 掌握用户控件的使用。 掌握主题的使用。 提高网站的开发能力，能够运用合理的控制流程编写高效的代码。 培养分析问题、解决实际问题的能力。,20.2 功能描述,许愿墙是指将愿望或祝福写成字条贴在许愿墙上，本章结合AJAX技术提供给用户更好的视觉体验（即页面的无刷新显示、友好信息提示、可以拖放和关闭字条等），通过该网站用户可以许下心中的愿望。AJAX许愿墙网站的主要功能如下： 美观友好的操作界面，能保证网站的易用性。 随机
3、显示用户许的愿望，并且可以拖放和关闭。 针对祝福对象发送祝福。 发送祝福时选择字条颜色。 发送祝福时选择心情图案。 发送祝福时实时预览字条的效果。,20.3.1 构建开发环境 20.3.2 网站功能结构 20.3.3 业务流程图,20.3 总体设计,AJAX许愿墙的开发环境具体要求如下： 开发平台：Microsoft Visual Studio 2010。 开发语言：ASP.NET+C#+HTML+JavaScript。 数据库：SQL Server 2008。 开发平台：Windows XP（SP2）/Windows Server 2003（SP2）/Windows 7。 系统框架：Micr
4、osoft .NET Framework 4.0。 IIS服务器：IIS 7.x版本。 浏览器：IE 8.0以上版本、Firefox等。 分辨率：最佳效果1024768像素。,20.3.1 构建开发环境,在AJAX许愿墙网站中，用户可以发送祝福（填写祝福对象、祝福者、字条内容等信息，还可以选择心情图案、字条颜色等）；而在许愿墙上可以浏览到发送祝福的字条，并且可以拖放和关闭字条。 AJAX许愿墙的功能结构图如图20-1所示。 图20-1 AJAX许愿墙的功能结构图,20.3.2 网站功能结构,AJAX许愿墙的业务流程图如图20-2所示。 图20-2 AJAX许愿墙网站的业务流程图,20.3.3
5、业务流程图,20.4 数据库设计,20.4.1 数据库实体图 20.4.2 数据表设计,根据实际调查对网站所做的需求分析，规划出本系统中使用的数据库实体主要是许愿信息实体，该实体用来保存AJAX许愿墙站中发送的祝福相关信息，主要包括编号、祝福者、祝福对象、祝福内容、祝福背景样式、心情图案和许愿时间等。许愿信息实体图如图20-3所示。 图20-3 许愿信息实体图,20.4.1 数据库实体图,结合实际情况及对用户需求的分析，AJAX许愿墙的db_AjaxWall数据库中需要创建一个保存许愿信息的数据表，该数据表命名为Wall，Wall数据表的结构及说明如表20-1所示。 表20-1 Wall数据表
6、的结构及说明,20.4.2 数据表设计,20.5 实现过程,20.5.1 页眉用户控件设计 20.5.2 页脚用户控件设计 20.5.3 生成验证码页设计 20.5.4 AJAX许愿墙首页设计 20.5.5 发送祝福页设计,AJAX许愿墙的页眉是使用用户控件实现的，该用户控件中，首先为div层设置一张背景图片，然后添加两个HyperLink控件，用来链接到指定的页面。页眉用户控件设计效果如图20-4所示。 图20-4 页眉用户控件设计效果,20.5.1 页眉用户控件设计,页眉用户控件的HTML代码如下： ,20.5.2 页脚用户控件设计,AJAX许愿墙的页脚是使用用户控件实现的，该用户控件主要
7、使用div层显示一张背景图片。页脚用户控件设计效果如图20-5所示。 图20-5 页脚用户控件设计效果 页脚用户控件的HTML代码如下： ,AJAX许愿墙中发送祝福时，需要使用验证码进行验证，本网站中生成验证码的功能是在ValidateCode.aspx页中实现的。 在ValidateCode.aspx页中实现生成验证码功能时，主要定义了两个自定义方法GenerateCheckCode和CreateCheckCodeImage，其中，GenerateCheckCode方法用来生成4位数字的验证码，关键代码如下： private string GenerateCheckCode() /创建整型型
8、变量 int number; /创建字符型变量 char code; /创建字符串变量并初始化为空 string checkCode = String.Empty; /创建Random对象 Random random = new Random(); /使用For循环生成4个数字 for (int i = 0; i 4; i+) /生成一个随机数 number = random.Next(); /将数字转换成为字符型 code = (char)(0 + (char)(number % 10); checkCode += code.ToString(); /将生成的随机数添加到Cookies中 R
9、esponse.Cookies.Add(new HttpCookie(“CheckCode“, checkCode); /返回字符串 return checkCode; ,20.5.3 生成验证码页设计,AJAX许愿墙首页主要用来以字条的形式随机显示数据库中存储的所有祝福信息，而且用户可以使用鼠标拖放和关闭字条。AJAX许愿墙首页如图20-6所示。 图20-6 AJAX许愿墙首页,20.5.4 AJAX许愿墙首页设计,1界面设计 AJAX许愿墙首页是在Default.aspx页中实现的，该页面设计时，首先使用创建的top.ascx用户控件和bottom.ascx用户控件作为AJAX许愿墙首页的
10、页眉和页脚，然后使用div层在该页的中间部分显示字条。Default.aspx设计页面的HTML代码如下： 说明： 上面的HTML代码中，用到了AllWishing变量，该变量是在Default.aspx.cs中声明的，用来存储所有的字条内容。,20.5.5 发送祝福页设计,发送祝福页用来对指定的祝福对象发送祝福，在该页的左侧输入祝福对象、祝福者和祝福内容，并选择字条颜色、心情图案后，在该页的右侧可以预览的字条最终效果。发送祝福页如图20-7所示。 图20-7 发送祝福页,1界面设计 发送祝福页是在Wish.aspx页中实现的，该页面中所涉及到的主要控件如表20-2所示。 表20-2 Wish
11、.aspx页中用到的控件及说明,由于AJAX许愿墙的实现比较简单，没有太多复杂的功能，因此，对于本程序的调试运行，总体上情况良好，在调试程序代码时，没有发现大问题，但在调试设计界面时，遇到了界面错位的情况。比如： 在设计发送祝福页（Wish.aspx）时，设计页面中的布局是整齐合理的，如图20-8所示。 图20-8 发送祝福页的设计效果,20.6 调试运行,但在IE浏览器中浏览发送祝福页时，页脚却发生了错位，如图20-9所示。 图20-9 浏览发送祝福页时页脚发生了错位,这时只需在发送祝福页的HTML代码中的UpdatePanel控件下方添加多个换行符（）即可，调整布局之后的发送祝福页运行效果如图20-10所示。 图20-10 发送祝福页运行效果,通过AJAX许愿墙这个课程设计实训，不仅能够让大家熟悉一个完整ASP.NET网站的基本开发流程，而且能够巩固ADO.NET技术的应用，并掌握AJAX异步刷新技术在实际开发中的应用。,20.7 课程设计总结,
