表示层的设计与实现演示文档

能力目标：能够在VS.NET环境中使用工具箱中的标准控件制作一个信息显示界面；能够在VS.NET环境中使用工具箱中的标准控件制作一个接受用户输入的界面；能够在VS.NET环境中使用工具箱中的验证控件对用户的输入进行验证；能够在VS.NET环境中使用工具箱中的数据控件对数据进行显示和处理。 知识目标：了解表示层的含义、作用及与业务逻辑层的关系；掌握各标准控件的作用和各属性作用；了解输入验证的含义；掌握各验证控件的作用和验证方法；了解数据绑定的基本概念、数据绑定表达式和数据绑定方法；掌握各数据控件的应用及设置方法。,教学目标：,在项目六中完成了对衣购网电子商务网站相关的业务逻辑规范以及数据规范的定义和程序实现。本项目的工作任务是设计和实现衣购网电子商务网站的表示层。表示层位于三层结构的最外层，离用户最近，用于显示数据和接受用户输入的数据，为用户提供一种交互式操作界面。本项目的各个任务就是使用服务器控件对各功能模块的界面进行设计和实现。,项目简介：,任务一 用户中心模块的设计与实现,用户中心模块为用户自己的信息管理中心。用户可以通过该模块注册、登录网站，并在登录后可以对自己的资料进行修改，修改密码，查看订单，查看购物车，及退出登录。与用户中心模块相关的数据访问和业务类都已在前几个项目任务中完成，本任务主要在VS.NET2005中用Web控件实现用户中心模块的界面设计。该模块的界面效果如图7.1、图7.2和图7.3所示。 本项目包括四个工作任务，即任务1用户中心模块的设计与实现、任务2添加商品子模块的设计与实现、任务3商品显示及交易模块的设计与实现和任务4后台管理模块的设计与实现。,一、任务引导,任务一 用户中心模块的设计与实现,图7.1 新用户注册界面效果,任务一 用户中心模块的设计与实现,图7.2 用户登录界面效果,任务一 用户中心模块的设计与实现,图7.3 用户中心界面效果,任务一 用户中心模块的设计与实现,二、任务实施,1、登录窗体的设计与实现； （1）在网站中添加一个套用母版页的新窗体，名为login.aspx； （2）在窗体login.aspx中添加表格进行布局并输入文字； （3）在窗体login.aspx中添加注册链接图片； （4）在窗体login.aspx中添加HTML服务器控件 （5）在窗体login.aspx中添加密码文本框； （6）在窗体login.aspx中添加验证码文本框； （7）在窗体login.aspx中添加验证码图片； （8）在窗体login.aspx中添加登录按钮图片； （9）在窗体login.aspx中添加输入验证； （10）添加事件处理程序。,任务一 用户中心模块的设计与实现,二、任务实施,2、注册窗体的设计与实现； （1）在网站中添加一个套用母版页的新窗体，名为regist.aspx； （2）在窗体regist.aspx中添加表格进行布局并输入文字； （3）在注册窗体中添加服务器控件； （4）编写事件处理程序；3、修改个人资料窗体的设计与实现 （1）在网站中添加一个套用母版页的新窗体，名为user.aspx； （2）在窗体user.aspx中添加表格和进行布局并输入文字、添加控件，并设置控件的相应属性； （3）切换到user.aspx.cs文件的编辑状态，设置事件处理程序。,任务一 用户中心模块的设计与实现,三、相关知识,1、HTTP通信协议的特性 （1）不会持续保持连接：当浏览器提出请求时，建立连接，请求后就断开等待响应，每一次请求和响应都需要先建立连接； （2）不会保留状态：连接时，浏览器和服务器互相知道对方，一旦请求结束就互不相干。2、ASP.NET的Page对象 Page 对象充当页中所有服务器控件的命名容器。Page 类是一个用作 Web 应用程序的用户界面的控件。 （1）Page对象的常用事件 PreInit、Load、PreRender、Unload,任务一 用户中心模块的设计与实现,三、相关知识,（2）Page对象的常用属性 Buffer、ClientQueryString、ClientScript、ErrorPage、Header、IsPostBack、IsValid。 （3）Page对象的常用方法 FindControl、ParseControl。 3、Server对象 （1）Server对象的属性 MachineName、ScriptTimeout （2）Server对象的常用方法 CreateObject、HtmlEncode、MapPath、URLDecode、URLEncode。,任务一 用户中心模块的设计与实现,三、相关知识,（3）用代码控制从一个页面导航到另一个页面的方法 调用Response对象的Redirect方法； 调用Server对象的Transfer； 调用Server对象的Execute方法4、Response对象和Request对象 （1） Response对象的常用属性和方法 BufferOutput属性、ContentEncoding属性、 ContentType 属性、 IsClientConnected属性、Charset 属性 End方法、Write方法、Redirect方法,任务一 用户中心模块的设计与实现,三、相关知识,（3）Cookies的处理 Cookie就是服务器暂存放在客户端，以便辩识的资料（.txt格式的文本文件）； 在HTTP协议下，Cookie只不过是一个文本文件，是服务器或者脚本用以维护用户信息的一种方式。 Cookie可以用来记录用户的相关信息，例如身份标识、密码、访问站点次数等。 如：Request.Form“username”。 Response、Request对象有一个共同属性Cookies，它是存放cookies对象的集合，使用Response对象Cookies属性设置Cookies信息，使用Request对象Cookies属性读取Cookies信息,任务一 用户中心模块的设计与实现,三、相关知识,5、Application对象和Session对象 （1）Application对象 Application对象是运行在Web应用服务器上的虚拟目录及其子目录下所有文件、页面、模块和可执行代码的总和。 Application对象的属性 Allkeys、Contents、Count、StaticObjectsItem Application对象的方法 Add、Clear、Get、GetKey、Lock、Remove、RemoveAll、Set、UnLock。,任务一 用户中心模块的设计与实现,三、相关知识,（2）Session对象 Session对象是用来存储跨网页程序的变量或者对象，但Session对象只针对单一访问者，不同的客户端无法互相存取。 Session对象的属性 CodePage、 Contents、Count、IsCookieless、 IsNewSession、IsReadOnly、Keys、 SessionID 、Mode、 StaticObjects、Timeout。 Session对象的方法 Abandon、Add、 Clear、 CopyTo、 Remove 、 RemoveAll。,任务一 用户中心模块的设计与实现,三、相关知识,6、ASP.NET的HTML控件 HTML控件比HTML标记多两个属性：runat和id。当runat属性值设为server时，用来告诉ASP.NET这是个服务器端执行的控件，否则是在客户端执行；属性id用来指定控件的名称，控制控件时要用这个id号。 （1）HTML控件常用属性 visible、Style、InnerHtml、InnerText。 （2）常用Html控件 HtmlInput控件、InputRadio控件、InputText控件、InputPassword控件、HtmlTextArea控件、HtmlSelect控件、HtmlImage控件、HtmlTable控件。,任务一 用户中心模块的设计与实现,四、任务拓展, 设计和实现后台管理登录入口的功能 新建logins.aspx窗体，添加表格布局，添加HTML控件和编写事件代码，如图7.26所示。,任务二 添加商品子模块的设计与实现,添加商品子模块是后台管理中的商品管理模块的一部分，是典型的以不同方式收集用户数据的实例。商品数据如何经过怎样的业务处理，如何放入数据库的问题在数据访问层和业务逻辑层中解决，本任务主要实现在开发环境中用Web标准控件采集商品信息的数据，传送给业务层处理。该模块的界面效果如图7.27所示。,一、任务引导,任务二 添加商品子模块的设计与实现,图7.27 添加新商品界面,1、添加新商品的界面设计 （1）在网站的admin文件夹中添加一个新窗体，名为“addproduct.aspx”； （2）在窗体addproduct.aspx中添加表格进行布局并输入文字； （3）在窗体中添加服务器控件，并为其设置相关属性； （4）编写事件处理程序。,二、任务实施,任务二 添加商品子模块的设计与实现,1、ASP.NET的Web 标准控件 在网页中使用Web控件时，具有统一语法，如下所示： Web控件通常以开始，后面是Web控件属性。 （1）ASP.NET执行Script的控件； ASP.NET提供了3种不同的按钮控件，都会产生Postback动作，但外观不太一样。 设置按钮的外观 按钮的Click事件 按钮的OnClientClick事件,三、相关知识,任务二 添加商品子模块的设计与实现,（2）ASP.NET的输出控件 ASP.NET提供输出数据的控件，可用于显示文本、图片、表格、列表等网页元素。 Label控件 Image控件 Panel控件 BulletedList控件 Table控件 （3）ASP.NET的输入控件 TextBox控件 CheckBox控件和RadioButton控件 列表类选择控件,三、相关知识,任务二 添加商品子模块的设计与实现,2、ASP.NET的验证控件 （1）RequiredFieldValidator 控件 该控件用于确保用户不会跳过某个必填字段。 （2）CompareValidator控件 该控件为比较验证控件，主要用来比较两个TextBox控件的内容或者某个控件与某个固定表达式值是否相等。如果比较结果不相等时，显示出错信息。 （3）RangeValidator控件 该控件为范围验证控件，如果用户输入不在验证范围内时将引发页面错误。控件提供了Integer、String、Date、Double和Currency五种验证类型，要正确选择。,三、相关知识,任务二 添加商品子模块的设计与实现,（4）RegluarExpressionValidator控件 该控件又称为正则表达式验证控件，该控件功能非常强大，用于确定输入控件的值是否与某个正则表达式所定义模式匹配。 （5）ValidationSummary控件 该控件又称错误总结控件，用于集中显示所有的报错信息。与其他控件相比，该控件还具有一些特殊属性，即HeaderText、EnableClientScript、ShowMessageBox、ShowSummary、 DisplayMode,三、相关知识,任务二 添加商品子模块的设计与实现, 设计和实现订单结算功能 新建一个窗体，添加文本、输入控件和验证控件，并为其添加事件代码，效果如图7.47所示。,四、任务拓展,任务二 添加商品子模块的设计与实现,商品显示及交易模块为电子商务网站的核心模块。本任务中的商品显示模块以新品上架，特价商品，推荐商品三个小模块分别显示最新发布的商品，打折后价格优惠的特价商品和经过网站推荐并且价格合理的商品，将这些商品的缩略图、名称、市场价和会员价以表格形式罗列出来。 与商品显示及交易模块相关的数据访问和业务类都已在前几个项目任务中完成，本任务主要在VS.NET2005中用Web控件实现商品显示及交易模块的界面设计。该模块的界面效果如图7.48、图7.49、图7.50所示。,一、任务引导,任务三 商品显示及交易模块的设计与实现,任务三 商品显示及交易模块的设计与实现,图7.48 商品列表界面效果,任务三 商品显示及交易模块的设计与实现,图7.49 商品详细信息显示界面效果,任务三 商品显示及交易模块的设计与实现,图7.50 购物车的界面效果,1、商品列表显示的设计与实现（1）在网站中添加一个套用母版页的新窗体用于显示新上架的商品，名为newproductlist.aspx。（2）拖放一个DataList控件到newproductlist.aspx窗体中，并为其设置相应的属性；（3）为该页面再添加其他控件；（4）编写事件处理程序。（5）按以上步骤1-4再建两个新窗体，分别名为specialproductlist.aspx用于列表显示特价商品，recommendedproductlist.aspx用于列表显示热销商品，并为其设置属性，编写事件代码。,二、任务实施,任务三 商品显示及交易模块的设计与实现,2、商品详细信息显示的设计与实现（1）在网站中添加一个套用母版页的新窗体，名为productinfo.aspx。（2）在窗体中用表格布局，输入提示文本，拖放控件，并为其设置相应的控件属性；（3）编写事件处理程序；3、查看购物车的设计与实现（1）在网站中添加一个套用母版页的新窗体，名为cart.aspx。（2）在窗体中用表格布局，拖放一个Repeater控件，ID为cartrepeater，。,二、任务实施,任务三 商品显示及交易模块的设计与实现,（3）输入文字，拖放其它控件。（4）切换到cart.aspx.cs文件，输入事件处理程序。4、查看订单的设计与实现（1）新建窗体，命名为orderlist.aspx，拖放Repeater控件，并Repeater控件中添加相应的程序代码。（2）拖放其他控件，进行订单页面布局。（3）设置事件处理程序。（4）订单详细信息的显示是通过数据绑定到显示控件来实现的。新建窗体，名为orderdetail.aspx，拖放控件进行页面布局和设置。（5）在事件处理程序中编写数据绑定的代码。,二、任务实施,任务三 商品显示及交易模块的设计与实现,1、数据绑定 数据绑定就是从一个固定的数据源检索数据，并将它们与服务器控件上的属性动态关联，以控件的形式呈现给请求数据的浏览器。（1）列表控件 列表控件是一种特殊的输入收集控件，向用户提供一个选项列表。列表控件包括BulletedList、CheckBoxList、DropDownList、ListBox和 RadioButtonList控件。（2）数据Web控件 在ASP.NET中提供了一组用于显示数据的控件，包括GridView、DataList、DetailsView、FormView件和Repeater控件。,三、相关知识,任务三 商品显示及交易模块的设计与实现,2、数据绑定的语法和步骤 ASP.NET 引入了一种新的声明语法 。该语法是在ASP.NET网页中使用数据绑定的基础。所有数据绑定表达式都必须包含在这些字符中。使用进行绑定，对Html标记和Web服务器控件都可以使用。3、DataList控件 使用DataList控件可以显示模板定义的数据绑定列表，其内容和布局是使用模板定义的，可以为项、交替项、选定项和编辑项创建模板；也可以使用标题、脚注和分隔符模板自定义DataList的整体外观。,三、相关知识,任务三 商品显示及交易模块的设计与实现,（1）DataList控件的属性 DataSource、DataKeyField、DataKeys、Items、EditItemIndex和SelectedItem属性。 （2）DataList控件的方法 FindControl方法、CancelCommand事件、 DeleteCommand事件、EditCommand事件、 UpdateCommand事件和ItemCommand事件。4、Repeater控件 Repeater控件也用于在重复列表中显示数据项。Repeater中列表项的内容和布局是使用“模板”定义的,自动用模板标记的项目，像循环那样重复编排数据源的数据。,三、相关知识,任务三 商品显示及交易模块的设计与实现,四、任务拓展, 设计和实现高级查询功能 新建窗体Search.aspx，添加图片、文本、控件，并为其设置控件属性和事件代码。,任务三 商品显示及交易模块的设计与实现,图7.63 订单结算界面,后台管理模块主要包括留言管理、订单管理、会员管理、商品类别管理和商品管理五部分。管理员通过留言管理子模块可以查看用户的留言，对用户的问题和建议进行回复解答。对留言也可以修改和删除。通过订单管理子模块，管理员可以查看用户的所有订单，了解用户订单的详细情况并且审核订单，可以按用户名和订单状态来查询订单，并对某张订单进行操作。通过会员管理子模块，管理员可以查看所有用户，了解用户,一、任务引导,任务四 后台管理模块的设计与实现,的基本资料，可以修改用户的资料，密码并且可以删除用户，添加用户。通过商品类别管理子模块，管理员可以对商品的一级类别，二级类别进行管理，可以添加，修改，删除商品的一级类别和商品二级类别。通过商品管理模块，管理员可以编辑商品，填写商品的详细资料后发布商品，也可以删除商品。其中新增商品在任务二中已经完成。本任务主要在VS.NET2005中用Web控件实现后台管理模块的界面设计。该模块的界面效果如图7.65、图7.66、图7.67所示。,一、任务引导,任务四 后台管理模块的设计与实现,任务四 后台管理模块的设计与实现,图7.65 留言管理界面效果,任务四 后台管理模块的设计与实现,图7.66 订单管理界面效果,任务四 后台管理模块的设计与实现,图7.67 商品管理界面效果,1、留言管理子模块的设计与实现 （1）在网站的admin文件夹中添加一个新窗体用于管理留言，名为messagelist.aspx； （2）拖放一个GridView控件到messagelist.aspx窗体，并选择编辑列； （3）在字段对话框中将复选框“自动生成字段”取消选中，再添加三个BoundField、DataField和emplateField。 （4）在属性窗口中设置GridView控件ID属性。 （5）切换到“源视图”，设置GridView代码。 （6）编写事件处理程序。,二、任务实施,任务四 后台管理模块的设计与实现,1、留言管理子模块的设计与实现 （7）切换回设计视图，选中GridView控件，在属性窗口中设置相关事件处理程序。 （8）新建窗体，名为relay.aspx，用于回复留言，然后在窗体中拖放控件并设置属性。2、订单管理的设计与实现 （1）添加一个新窗体，名为orderlist.aspx。 （2）在窗体中拖放控件。 （3）编写事件处理程序。3、商品管理的设计与实现 （1）添加一个新窗体，名为productlist.aspx。 （2）在窗体中拖放控件。 （3）设置各控件名称、属性。 （4）设置事件处理程序。,二、任务实施,任务四 后台管理模块的设计与实现,三、相关知识,1、GridView控件（1）GridView控件的主要功能（2）GridView字段的用途与使用（3）GridView定制窗体外观2、DetailsView控件（1）DetailsView控件的主要功能（2）DetailsView字段的用途与使用（3）DetailsView定制窗体外观3、FormView控件（1）FormView控件的主要功能（2）FormView字段的用途与使用（3）FormView定制窗体外观（4）使用SqlDataSource和FormView进行数据绑定,任务四 后台管理模块的设计与实现,三、相关知识,4、数据控件小结（1）GridView控件绑定数据源之后，自动提供常用的功能诸如分页、排序、编辑或删除数据。（2）DetailsView控件呈现一条记录。 GridView/ DetailsView结合，可以实现主/详细信息方案。（3）DataList控件用于在重复的列表中显示数据项，并且支持对这些项进行选择和编辑的功能。 DataList中列表项的内容和布局是使用模板定义的。（4）Repeater控件用于在重复列表中显示数据项。Repeater没有内置的布局和样式，必须在控件模板中显式声明所有HTML布局、格式设置和样式标记。（5）FormView控件用于一次从其关联数据源呈现一条记录。FormView控件使用模板定义每项呈现。,任务四 后台管理模块的设计与实现,四、任务拓展, 设计和实现类别管理功能1、新建窗体type_1list.aspx和type_2list.aspx。2、添加相应的控件到新建窗体中，其中数据列表都是用GridView控件。3、编写一级类别管理的处理程序代码。4、编写二级分类管理的事件处理程序代码,任务四 后台管理模块的设计与实现,课后习题见教材第311页,