静态网页设计实用教程课件

静态网页设计实用教程静态网页设计实用教程1教学内容学习情境一：搭建开发环境学习情境二：系统对象与状态管理学习情境三：站点导航控件与母版页学习情境四：搭建系统框架学习情境五：数据绑定与显示学习情境六：数据录入与验证学习情境七：数据更新于编辑学习情境八：常用第三方工具与控件学习情境九：用户控件与HTTPHANDLER学习情境十：网站部署与定制教学内容学习情境一：搭建开发环境2学习情境一搭建开发环境学习情境一搭建开发环境3课程地位PrevHTMLSQLBaseLogicJavaC#/WinFormsSTBProject1:ADO.Net+WinFormsC/SADO.Net/ThreeTierJavaScriptSQLAdvanceJavaOOPProject2:B/S.Net/OOPJSPAjax/WebServiceJSP/Servlet/JavaBean/WebServiceStruts/Hibernate/Spring/AjaxASP.NetNTCProject3:Net/JavaHR/CRM/OA/B2CB/S行业手册课程地位PrevHTMLSQLBaseLogicJava4就业技能结构图就业技能结构图5本门课程目标学完本门课程后，你能够：熟练使用VisualStudio开发环境开发ASP.NET应用程序完成常见的数据操作任务运用ASP.NET开发商业站点本门课程目标学完本门课程后，你能够：6课程项目展示网上书店演示图书列表数字水印课程项目展示网上书店演示图书列表数字7课程项目展示RSS发布新书列表课程项目展示RSS发布新书列表8预习检查创建ASP.NET页面时，自动生成了哪几个文件？使用ASP.NET做开发，是否一定要安装IIS？预习检查创建ASP.NET页面时，自动生成了哪几个文件？9本章任务初识ASP.NET制作第一个ASP.NET页面显示学员信息列表本章任务初识ASP.NET10本章目标掌握简单ASP.NET程序的开发步骤掌握ASP.NET控件+事件的开发方式会使用Label、TextBox、Button等简单的控件本章目标掌握简单ASP.NET程序的开发步骤11B/S概念回顾B/S与C/S相比各有何优缺点？B/S的典型应用场景有哪些？B/S概念回顾B/S与C/S相比各有何优缺点？12ASP.NET的特色与优势4-1与浏览器无关方便设置断点，易于调试编译后执行，运行效率高丰富的控件库代码后置，逻辑分明ASP.NET的特色与优势4-1与浏览器无关13ASP.NET的特色与优势4-2编译后执行，运行效率高___________________________代码编译

Microsoft中间语言（MSIL或IL）JIT编译器

机器语言分别编译IL的每一部分ASP.NET的特色与优势4-2编译后执行，运行效率高___14ASP.NET的特色与优势4-3丰富的控件库内置80多种控件统计表明，采用新控件方式的编码，至少比早期减少70%的代码量使用纯JavaScript脚本方式编写树形目录需要大量编码而使用TreeView导航控件，无需编写一行代码即可完成ASP.NET的特色与优势4-3丰富的控件库使用纯Java15ASP.NET的特色与优势4-4代码后置，将业务逻辑代码与显示逻辑分开ASPX页面页面显示.aspx页面业务逻辑.cs文件程序员页面设计人员ASP.NET的特色与优势4-4代码后置，将业务逻辑代码与显16成功案例5-1因为ASP.NET具有诸多优势，越来越多的企业开始采用ASP.NET技术构建它们的网络应用系统。戴尔电脑当当书店中华英才网微软官方网站......成功案例5-1因为ASP.NET具有诸多优势，越来越多的17ASP.NET成功案例5-2/content/default.aspx戴尔公司官方网站网站是戴尔电脑直销的最主要渠道之一每天有上千订单通过戴尔网站提交和处理ASP.NET成功案例5-2http://www1.ap.d18ASP.NET成功案例5-3/mallhome/home/default.aspx当当网全球最大的中文网上书店提供近百万种商品的在线销售ASP.NET成功案例5-3http://mall.dang19ASP.NET成功案例5-4/index.aspx中华英才网网站日均浏览量超过1900万拥有超过1360万个人注册用户拥有超过1250万份有效简历累计超过140万家企业注册会员每天提供超过160万个有效职位ASP.NET成功案例5-4http://searchjob20ASP.NET成功案例5-5/en/us/default.aspx微软公司官方网站ASP.NET成功案例5-5http://www.micro21小结列举2-3条ASP.NET的特色和优势。为什么说ASP.NET应用程序运行效率高？小结列举2-3条ASP.NET的特色和优势。22搭建开发环境安装IIS并配置虚拟目录IIS是基于Windows系统的Web服务器的ASP.NET应用程序的发布是基于IIS服务器的IIS类似JSP中使用的Tomcat，提供了更为强大的功能视频：IIS安装和配置视频搭建开发环境安装IIS并配置虚拟目录视频：IIS安装和配置视23注意事项单击“添加/删除Windows组件”确保“应用程序服务器”处于选中状态注意事项单击“添加/删除Windows组件”确保“应用程序服24开发服务器在VS中，内置了轻量级的Web服务器Cassini无须配置IIS、设置相应权限Cassini运行时在状态栏的显示可以查看开发服务器的状态信息开发服务器在VS中，内置了轻量级的Web服务器Cassini25第一个ASP.NET应用程序时间提示页面在VisualStudio中新建一个网站设置站点位置拖入相关控件编写事件处理方法查看运行效果演示示例：第一个ASP.NET应用程序

第一个ASP.NET应用程序时间提示页面26项目位置设置新建网站时，可选择项目的位置，有多种选择点击浏览可以更改项目位置项目位置设置新建网站时，可选择项目的位置，有多种选择点击浏览27可视化的设计双击Botton控件，到代码页，可以编写代码，与WinForms编程类似点击“源”可看到HTML视图与WinForms一样简单的控件+事件方式可视化的设计双击Botton控件，到代码页，可以编写代码，与28基于控件+事件的编程protectedvoidbtnOK_Click(objectsender,EventArgse){stringgreeting;switch(DateTime.Now.Hour){ ...... case12: greeting="嘿，{0}同学，吃中午饭了！"; break; ......}stringmessage=string.Format(greeting,txtName.Text.Trim());lblMessage.Text=message;}Botton单击事件方法通过Text属性直接获取控件值，无须像jsp中使用Get、Post等方式基于控件+事件的编程protectedvoidbtnOK29查看解决方案组成这是我们刚才页面的解决方案组成存放数据的文件夹自动创建的窗体文件代码后置文件站点配置文件ASP.NET中，HTML代码和C#代码分别存储于不同的文件中，称作代码后置查看解决方案组成这是我们刚才页面的解决方案组成存放数据的文件30编码方式ASP.NET有两种编码方式：代码内嵌和代码后置代码内嵌，HTML代码和C#代码交叉使用。演示示例：代码内嵌展示内嵌方式只有.aspx文件编码方式ASP.NET有两种编码方式：代码内嵌和代码后置演示31体会ASP.NET的开发过程显示学员信息创建ShowStudents.aspx页面。将学员信息表拖入页面设置显示字段和标头设置自动套用格式添加分页功能，设置每页显示10条信息演示示例2：学员信息列表体会ASP.NET的开发过程显示学员信息演示示例2：学员信息32关键步骤：将表拖入页面拖入表时，自动出现相关信息使用服务器资源管理器，打开学员信息数据库将Student表拖入页面的设计窗口内关键步骤：将表拖入页面拖入表时，自动出现相关信息使用服务器资33关键步骤：设置字段和标题设置Columns，可编辑显示字段HeaderText设置列标题显示的内容关键步骤：设置字段和标题设置Columns，可编辑显示字段H34关键步骤：套用风格选择自动套用格式多种格式可选关键步骤：套用风格选择自动套用格式35关键步骤：设置分页AllowPaging置为True打开分页功能PageSize属性设置每页的显示数目关键步骤：设置分页AllowPaging置为True打开分页36小结在后置代码中获取用户在TextBox中输入的内容，使用的是哪个属性？什么是代码后置？设置每页显示的条数，使用了哪个属性？小结在后置代码中获取用户在TextBox中输入的内容，使用的37总结ASP.NET的优势有哪些？画图描述ASP.NET工作原理。建立一个ASP.NET工程有哪些步骤？ASP.NET代码开发有哪两种模式？总结ASP.NET的优势有哪些？38学习情境二系统对象与状态管理学习情境二系统对象与状态管理39回顾什么是代码后置？JSP中状态保持有哪几种方式？JSP中Session的写法回顾什么是代码后置？40预习检查Session有什么用处？.aspx页面继承自哪个类？预习检查Session有什么用处？41本章任务实现用户登录功能实现对用户浏览器的判断实现页面数据的传递本章任务实现用户登录功能42本章目标掌握页面间的数据传递技术能用Session对象记录用户登录状态等信息能使用Server对象查看客户端浏览器类型会使用Response对象和Request对象控制页面的输入输出本章目标掌握页面间的数据传递技术43运行机制回顾JSP的运行机制客户端请求后台处理（类Servlet）返回客户端（HTML）ASP.NET的运行机制是什么呢？运行机制回顾JSP的运行机制44ASP.NET运行机制.aspx文件第一次请求解析后台编码类生成生成的页面类编译第二次请求第二个请求实例化响应ASP.NET引擎页面类实例化，处理和显示现象：第一次获取网页较慢，第二次获取较快ASP.NET运行机制.aspx第一次请求解析后台编码类生成45系统对象JSP和ASP.NET中的常见系统对象对比。系统对象JSPASP.NETPage对象指向页面自身的方式。作用域为页面执行期。Request对象读取客户端在Web请求期间发送的值Response对象封装了页面执行期返回到HTTP客户端的输出Application对象作用于整个程序运行期的状态对象Session对象会话期状态保持对象，用于跟踪单一用户的会话。Cookie对象客户端保持会话信息的一种方式Server对象无，但其他对象提供了相应方法提供对服务器上的方法和属性的访问注意：JSP和ASP.NET中对象的大小写不同系统对象JSP和ASP.NET中的常见系统对象对比。系统对象46Page对象每个.aspx文件对应一个Page对象.aspx与后台代码类（局部类）合并生成页面类Page对象是页面类的实例所有的.aspx文件（Web窗体页）都继承自System.Web.UI.Page类演示：新建页面Page对象每个.aspx文件对应一个Page对象47查看源视图@Page指令<%@Page

Language="C#"

AutoEventWireup="true"

CodeFile=“Default.aspx.cs"

Inherits="_Default"%>指明页面代码和后置代码所使用的脚本语言设置是否自动调用网页事件，默认为true指定代码后置文件，该文件包含此页面的局部类代码后置的类，局部类@Page指令定义了ASP.NET页用于编译和解析的属性。每个aspx页面只能有一个@Page指令查看源视图@Page指令<%@Page指明页面代码和后置48页面输入输出控制Request对象获得页面输入URL传参Form表单提交Response对象在页面输出要显示的内容重定向页面输入输出控制Request对象49Request对象结合JSP，列举页面间传递数据的几种方式？如何获取传递过来的数据呢？Request对象ServerVariables属性Form属性Params属性QueryString属性获取通过URL路径传来的数据获取通过表单提交传输的数据获取Web服务器变量的集合以上三种方式传输的内容都可以使用该属性获取Request对象结合JSP，列举页面间传递数据的几种方式？50Response对象Response对象允许开发人员对当前页面的输出流进行操作Response.对象Redirect方法Write方法Response.Write("Hello，ACCP");直接在页面上输出内容重定向到另外一个页面Response.Redirect("");Response对象Response对象允许开发人员对当51综合示例获取并打印浏览器的信息输出浏览器类型（IE/FireFox）输出相关版本信息输出客户端语言信息Request.ServerVariables["HTTP_USER_AGENT"];//获取浏览器及版本Request.ServerVariables["HTTP_ACCEPT_LANGUAGE"];//获取浏览器语言演示示例5：获取并打印浏览器信息综合示例获取并打印浏览器的信息Request.ServerV52数据传递JSP页面中，如何获取用户输入的信息？分两个页面进行处理，用户输入页面是一页，处理用户输入的又是另一个页面。提交给同一页面，通过特殊参数判断是回传的数据通过Get、Post方式或者URL传递需要发送服务器的数据数据传递JSP页面中，如何获取用户输入的信息？53页内数据传递回发ASP.NETWeb页面控件1控件1…用户页面操作Page.IsPostBack属性回传首次加载truefalse如何判断回发和首次加载？演示示例1：查询演示页内数据传递回发ASP.NET控件1控件1…用户页面Pa54关键代码：验证回传IsPostBack常放置于Page_Load方法中用于首次加载页面时的初始化

protectedvoidPage_Load(objectsender,EventArgse){if(Page.IsPostBack){......}}关键代码：验证回传protectedvoidPa55跨页数据传递ASP.NETWeb页面1ASP.NETWeb页面2控件1控件2…跨页传递如何知道跨页发送并获取传过来的数据？跨页数据传递ASP.NETASP.NET控件1控件2…跨如56跨页数据传递IsCrossPagePostBack，指示跨页回发是否包含该页PreviousPage，获取向当前页面传输数据的页面

PreviousPage属性页面2FindControl方法找到页面1的对象根据控件名，获得控件对象演示示例2：跨页数据传递跨页数据传递IsCrossPagePostBack，指示跨页57关键代码发出提交的页面获取内容的页面if(Page.PreviousPage!=null){ if(PreviousPage.IsCrossPagePostBack==true) { this.lblShowURL.Text="您的查询条件为："+

((TextBox)this.PreviousPage.FindControl("txtKeyWord")).Text; }}<asp:ButtonID="btnOk"runat="server"

PostBackUrl="~/PostBack.aspx"Text="查询"/>通过PostBackUrl指定获取页获取控件值判断该页面的是否为其他页回传关键代码发出提交的页面if(Page.PreviousPa58小结绘图描述ASP.NET中页面的编译过程。.aspx文件都继承自哪个类？ASP.NET2.0中，.aspx的类与对应的代码后置的类是什么关系？ASP.NET中，页内数据传递使用哪个属性判断回传或者首次加载？小结绘图描述ASP.NET中页面的编译过程。59状态管理JSP中状态保持有哪几种方式？session、cookie等ASP.NET中状态保持ASP.NET状态保持SessionCookieApplication存储于服务器存储于客户端应用程序级别的状态保持状态管理JSP中状态保持有哪几种方式？ASP.NETSess60SessionSession用于什么场合？结合JSP中学过的知识，我们知道Session保持当前用户状态信息常用于用户登录、购物车等SessionSession用于什么场合？61Session示例第三波网上书店用户登录。用户输入用户名和密码检测用户名和密码是否输入合法登录成功时，在Session中保存用户对象。演示示例3：第三波网上书店的登录Session示例第三波网上书店用户登录。演示示例3：第三波62关键代码登录代码索引器使用索引器[]，可以像数组一样处理Session对象Useruser=newUser();user.Id=0;user.UserName=txtloginId.Text;user.PassWord=txtLoginPwd.Text;Session["User"]=user;Session的名称要存储的对象JSP中session.setAttribute("username",username)关键代码登录代码Useruser=newUser()63Cookie演示Cookie方式记录用户最后登录时间当用户登录时，记录用户的登录时间用户下次登录时，显示用户上次登录时间演示示例4：增加Cookie的书店登录Cookie演示Cookie方式记录用户最后登录时间演示示例64关键代码写入Cookie代码读取Cookie代码HttpCookiehcCookie=new

HttpCookie("UserName",“张三");Response.Cookies.Add(hcCookie);stringUserName=Request.Cookies["UserName"].Value;添加新的Cookie关键代码写入Cookie代码HttpCookiehcCoo65Application对象Application对象可以存储应用程序级的数据。“Application”：应用程序第一个用户访问站点时，应用程序启动，并创建一个Application对象。创建成功后，整个应用程序中都可以使用该对象。除非应用程序关闭，否则对象一直存储在内存中。Application对象对应HttpApplication类，它定义ASP.NET应用程序中的所有应用程序对象通用的方法、属性和事件。Application对象Application对象可以存储66小结请分别书写Session方式和Cookie方式保存用户登录状态的代码。保存当前用户登录时间保存登录用户名编写读取Cookie中内容的代码小结请分别书写Session方式和Cookie方式保存用户登67Server对象Server对象是HttpServerUtility的一个实例，它提供对服务器上的方法和属性的访问。Server对象HtmlEncode方法和HtmlDecode方法Execute方法和Transfer方法UrlEncode方法和UrlDecode方法MapPath方法取得文件的物理路径执行另一个页面的脚本将文本编码成可以在浏览器中可正确浏览的格式URL编码和解码，类似与JSP中的URLEncoder.encodeServer对象Server对象是HttpServerUt68综合示例修改欢迎页当用户未登录时转到登录页面登录成功后转回欢迎页在欢迎页面显示用户的信息根据用户浏览器的语言，给予不同语言的欢迎辞（如：中文用“您好，…！”，其他用“HELLO,...！”。）演示示例6：新的欢迎页面综合示例修改欢迎页演示示例6：新的欢迎页面69总结如果要显示在线人数，想想怎么做？提示：在每次用户请求时记录人数，保存在什么位置比较合适？简述ASP.NET中状态保持的三种方式，并说明适用范围？总结70学习情境四搭建系统框架学习情境四搭建系统框架71回顾2-1三层结构都有哪三层？上一章里我们学习了哪三种导航控件？回顾2-1三层结构都有哪三层？72回顾2-2stringsql="SELECTSubjectNameFROMSubject";SqlCommandcommand=newSqlCommand(sql,DBHelper.connection);DBHelper.connection.Open();SqlDataReaderdataReader=command.ExecuteReader();while(dataReader.Read()){cboSubject.Items.Add(dataReader["SubjectName"].ToString());}未关闭ReaderdataReader.Close();未关闭连接DBHelper.connection.Close();DBHelper.connection.Dispose();回顾2-2stringsql="SELECTSubj73预习检查模型层有哪些内容？数据访问层一般写哪些方法？预习检查模型层有哪些内容？74本章任务搭建网上书店的架构实现书店的用户登录本章任务搭建网上书店的架构75本章目标会在ASP.NET中使用三层结构。能够实现三层结构下的用户注册和登录。本章目标会在ASP.NET中使用三层结构。76系统架构三层结构表示层业务逻辑层数据访问层分层的理念：将相似的内容放到一起去处理，开发人员可以只关注整个结构中的其中某一层，可以很容易的用新的实现来替换原有层次的实现三层结构的经典案例：PetShop系统架构三层结构分层的理念：将相似的内容放到一起去处理，开发77PetShop4.0宠物商店微软展示.NET企业开发的范例。与Sun的PetStore的商业竞争。一个小型的电子商务案例。体现了微软推广的开发思想和设计理念。分22个项目，经典的系统，从设计的思想到最好的编码，学习参考价值很高。演示：PetShop4.0PetShop4.0宠物商店演示：PetShop4.078PetShop4.0架构简介ASP.NETWebBLLDALFactoryOracleDALSQLServerDALIDALModel表示层业务层数据层典型的三层结构PetShop4.0架构简介ASP.NETWebBLLDA79搭建第三波网络书店的模型层模型层表示层需要访问实体对象的属性值。业务层需要通过实体对象处理业务逻辑。数据层也需要通过实体对象读写数据库。模型是数据载体。命名项目名：MyBookShopModels命名空间：MyBookShop.Models类名：图书表Books图书类Book实体类通常冠以[Serializable]特性，以保证实体传输的可靠性搭建第三波网络书店的模型层模型层80外键的处理数据库中有主外键关系，模型层怎么表示？比如用户表和状态表。状态字段是用户表的外键。两种方式：为实体类添加状态id属性，存储状态id。为实体类添加状态属性，存储状态对象。外键的处理数据库中有主外键关系，模型层怎么表示？81示例用户类的模型用户需要有登录名、密码、状态等属性状态表存储状态名称用户的状态属性使用状态对象publicUserStateUserState{ get{ returnthis.userState; } set{ this.userState=value; }} 示例用户类的模型publicUserStateUserS82处理外键的代码[Serializable()]publicclassUser{ ……//字段 publicUser(){}//构造函数 ……//常见属性 publicUserStateUserState//用户状态外键 { get{returnthis.userState;} set{this.userState=value;} } }处理外键的代码[Serializable()]83小结编写实体类UserRole并更新User类相关属性类关系图如下答案：UserRole类小结编写实体类UserRole并更新User类相关属性答案：84数据访问层数据访问层所有与数据库交互的操作数据表的增、删、查、改操作数据访问层不做逻辑判断命名项目名：MyBookShopDAL命名空间：MyBookShop.DAL类名：图书表Books图书数据访问类BookService数据访问层数据访问层85代码比较比较两段代码代码1

代码2在每一个对象的数据库访问类中：数据库连接反复出现数据库连接打开和关闭反复出现执行Sql语句的方法相似返回记录集的方法相似根据面向对象思想，是否可以减少这些重复劳动？代码比较比较两段代码代码1代码2根据面86DBHelper类我们将常用方法提取出来，作为DBHelper类该类包含了：建立数据库连接执行Sql的方法（存储过程sql语句）返回记录集返回Reader返回结果DBHelper类我们将常用方法提取出来，作为DBHelpe87创建数据访问层的类创建UserService类Create方法Retrieve方法Update方法Delete方法boolAddUser(Useruser)IList<User>GetAllUsers()UserGetUserById(intid)IList<User>GetUsersBySql(stringsql)boolDeleteUserById(intid)boolUpdateUser(Useruser)创建数据访问层的类创建UserService类boolAd88增加一个用户的方法publicstaticboolAddUser(Useruser){stringsql="INSERTUSERS(loginid,loginpwd,name,address,phone,mail, userroleId,UserStateId)"+"VALUES(@LoginId,@LoginPwd,@Name,@Address,@Phone,@Mail, @RoleId,@UserStateId)";SqlParameter[]para=newSqlParameter[]{newSqlParameter("@LoginId",user.LoginId),……};DBHelper.ExecuteCommand(sql,para);returntrue;}组合SQL语句参数赋值调用DBHelper类中的方法进行处理增加一个用户的方法publicstaticboolAd89小结模型层为什么要标记为可序列化？模型层的作用？数据访问层的功能？编写User的数据访问类的查、改、删方法。示例：User的数据库访问类小结模型层为什么要标记为可序列化？示例：User的数据库访问90业务逻辑层业务逻辑层是表示层与数据访问层的桥梁，负责逻辑的判断，业务处理、数据传递。不在表示层访问数据库，数据更加安全。命名项目名：MyBookShopBLL命名空间：MyBookShop.BLL类名：图书表Books图书业务逻辑层类BookManager业务逻辑层业务逻辑层91用户登录的业务逻辑方法publicstaticboolLogin(stringloginId,stringloginPwd,outUservalidUser){ Useruser=UserService.GetUserByLoginId(loginId); if(user==null) { validUser=null; returnfalse; } if(user.LoginPwd==loginPwd) { validUser=user; returntrue; } else { validUser=null; //密码错误 returnfalse; }}用户登录的业务逻辑方法publicstaticbool92表示层表示层的设计给客户最直接的体验。页面风格和布局，美观大方。页面操作符合逻辑，讲究用户体验。注意风格统一。表示层负责内容的展现和与用户的交互。可以进行变量范围的验证。不做业务逻辑判断。不做与数据库交互的处理。表示层表示层的设计给客户最直接的体验。表示层负责内容的展现和93用户管理模块首先根据数据库创建模型层。包括用户的实体类以及相关联的类。创建数据访问层用户管理类。包括增删查改方法。设计相关页面，并编写事件代码。新用户注册。用户登录。用户信息修改。创建业务逻辑层处理类。根据需要，添加相关方法。用户管理模块首先根据数据库创建模型层。94示例1用户登录创建页面。编写事件处理代码，包括验证输入。创建业务逻辑层方法，调用数据访问层相关方法处理。演示示例：用户登录示例1用户登录演示示例：用户登录95用户注册的确认事件代码……Useruser=newUser();user.LoginId=this.txtLoginId.Text;……user.UserState=newUserState();user.UserState.Id=1;if(UserManager.AddUser(user)){ this.ltMain.Text="<script>alert('注册成功！请继续购物');

window.location='../default.aspx'</script>";}else{ this.ltMain.Text="<script>alert('用户名已使用！请重新选择！') </script>";}实例化User类对类相关属性进行赋值默认值，硬编码业务层进行相关判断和处理弹出脚本提示小技巧：在控件上输出脚本用户注册的确认事件代码……实例化User类对类相关属性进行赋96小结编写图书模块相关实体类和数据层、业务层的类。图书有id、作者、标题、分类、出版社、描述、ISBN（简化）。出版社有id、名称。分类有id、名称。编写图书、出版社、分类的实体类。编写图书的数据层增删查改方法。编写图书业务层的查询所有的方法。演示示例：图书模块相关类小结编写图书模块相关实体类和数据层、业务层的类。演示示例：图97总结数据访问层常见的方法有哪几种？页面要显示一个表的内容，可否直接使用ADO.NET连接数据库，为什么？业务逻辑层的方法来自哪部分的需求？总结数据访问层常见的方法有哪几种？98学习情境五数据绑定与显示学习情境五数据绑定与显示99回顾2-1TreeView控件绑定数据的方式是什么？指定DataSourceID

数据访问层有哪四类常见方法？C、R、U、D在ASP.NET中调用客户端脚本，有哪几种方法？注册客户端脚本页面输出脚本控件的Text中输出脚本回顾2-1TreeView控件绑定数据的方式是什么？100下面是注册用户的部分代码，检查有什么问题。回顾2-2Useruser=newUser();user.LoginId=this.txtLoginId.Text;user.LoginPwd=this.txtLoginPwd.Text;……if(UserManager.LoginIdExists(user.LoginId)){this.Page.ClientScript.RegisterStartupScript(this.GetType(),"", "<script>alert("用户名或者密码错误！");</script>");}UserManager.AddUser(user);此处应该使用单引号下面是注册用户的部分代码，检查有什么问题。回顾2-2User101预习检查GridView控件有哪两种数据绑定方式？有哪几种数据源控件？预习检查GridView控件有哪两种数据绑定方式？102本章任务完成书籍分类维护模块图书列表分页可多选，实现多个图书分类的调整高亮显示鼠标所在行（光棒效果）图书详细显示页面本章任务完成书籍分类维护模块103本章目标能熟练使用GridView进行数据的查询与展示熟练使用ObjectDataSource控件绑定业务逻辑层返回的对象本章目标能熟练使用GridView进行数据的查询与展示104数据展示数据展示的两种实现方法使用数据源控件，可以实现快速开发手写代码实现简单设置实现ADO.NET数据源控件Web服务器数据库展示数据什么是数据源控件？数据展示数据展示的两种实现方法使用数据源控件，可以实现快速开105数据源控件快速实现多种常用的数据源进行展示和交互快速完成对数据表增删改查操作是ASP.NET2.0引入的一个新的数据抽象层学习过的数据源控件“面包屑”导航控件使用的SiteMapDataSourceTreeView导航控件使用的XmlDataSource数据源控件快速实现多种常用的数据源进行展示和交互学习过的“面106数据源控件VS2005内置的五种数据源控件SqlDataSourceAccessDataSourceObjectDataSourceXmlDataSourceSiteMapDataSourceSqlDataSource允许访问支持ADO.NET数据提供程序的所有数据源。可访问ODBC、SQLServer等ObjectDataSource可以对业务对象或其他返回数据的类执行特定的数据访问XmlDataSource可以对XML文档执行特定访问，包括物理访问和内存访问。SiteMapDataSource可以对站点地图提供程序所存储的Web站点执行特定的站点地图数据访问数据源控件VS2005内置的五种数据源控件SqlDataSo107数据源控件数据源控件类的层次结构图：Control类普通数据源控件层次化数据源控件ObjectDataSourceSqlDataSourceSiteMapDataSourceXMLDataSourceAccessDataSource所有数据源控件都派生于Control类数据源控件数据源控件类的层次结构图：Control类普通数据108ObjectDataSource重要属性属性名称说明SelectMethod获取或设置由检索数据的方法或函数的名称。InsertMethod获取或设置插入数据的方法或函数的名称。UpdateMethod获取或设置由更新数据的方法或函数的名称。DeleteMethod获取或设置删除数据的方法或函数的名称。TypeName获取或设置ObjectDataSource对象表示的类的名称，即业务对象的类名。ObjectDataSource重要属性属性名称说明Sele109手写代码方式this.gvMain.DataSource=UserManager.GetAllUsers();this.gvMain.DataBind();获取数据的方法展示数据的控件指定数据集合数据绑定方法注意：数据源控件方式只要指定数据源id即可；DataSource方式在指定完数据源后必须使用绑定方法。手写代码方式this.gvMain.DataSource=110数据绑定控件数据绑定控件可以用来展示和绑定数据数据源控件不提供展示，数据绑定控件提供展示数据绑定控件可以通过数据源控件绑定数据数据绑定控件的层次结构数据绑定控件数据绑定控件可以用来展示和绑定数据111小结三层结构下，采用哪个数据源控件比较合适？说明五种数据源控件各自的作用。小结三层结构下，采用哪个数据源控件比较合适？112图书分类管理第三波网络书店的图书分类管理图书列表显示，显示标题和分类分页详情多选效果光棒效果分类修改功能图书分类管理第三波网络书店的图书分类管理图书列表显示，显示标113数据展示JSP中如何显示列表信息？读取数据循环记录集，组合HTML代码（使用标签库或者硬编码）.NET中的数据绑定控件能够将控件绑定到一个数据结果集能够使用模板自定义控件的布局和样式提供用于处理和取消事件的方便模型数据展示JSP中如何显示列表信息？114GridView控件使用GridView显示图书信息列表1、将GridView控件拖入页面。2、添加并指定ObjectDataSource数据源。3、编辑列，选择需要显示的字段，并可设置表头等。4、设置分页。5、运行，查看效果。演示示例：图书列表

GridView控件使用GridView显示图书信息列表演示115绑定列BoundField字段表示数据绑定控件中作为文本显示的字段。可设置表头、样式等信息。

DataFormatString，可设置显示字段的格式。注：当HtmlCode属性设置为false，DataFormatString才有效{0:C}0代表对应后面的第一个参数，这里就是绑定的字段所对应的值；C是格式化标记，它可以将数字型的字段格式化为货币类型。绑定列BoundField字段注：当HtmlCode属性设116绑定列TemplateField字段绑定中显示自定义内容的字段有五种模板（标头、脚注、普通项、交替项、编辑模式）<asp:TemplateFieldHeaderText="书名"><EditItemTemplate><asp:TextBoxID="TextBox1"runat="server" Text='<%#Bind("Title")%>'></asp:TextBox></EditItemTemplate><ItemTemplate><asp:LabelID="Label1"runat="server" Text='<%#Bind("Title")%>'></asp:Label></ItemTemplate></asp:TemplateField>绑定字段的方法，还可以使用Eval注意单引号的使用绑定列TemplateField字段<asp:Templat117Eval和BindEval

方法是只读方法该方法采用数据字段的值作为参数并将其作为字符串返回。当对表达式操作时候，必须用Eval如格式化Bind

方法支持读/写功能可以检索数据绑定控件的值并将任何更改提交回数据库。<%#Eval("字段名").ToString().Trim()%><%#Eval("PublishDate","{0:dd/MM/yyyy}")%>d：日期；m：月份；y：年份。可能格式化为“17/05/2008”。Eval和BindEval

方法是只读方法<%#Eval(118绑定列ButtonField字段显示为数据绑定控件中的按钮CommandName设置自定义命令（RowCommand）protectedvoidgvBooks_RowCommand(…){if(e.CommandName=="Select"){intindex=Convert.ToInt32(e.CommandArgument);GridViewRowselectedRow=gvUser.Rows[index];TableCellcontactName=selectedRow.Cells[1];}}绑定列ButtonField字段protectedvoid119绑定列CommandField一个特殊字段，显示了用于在数据绑定控件中执行选择、编辑、插入或删除操作的命令按钮自动生成命令，无须手写对应数据源的增改查删方法HyperLinkField显示为超链接的字段比如链接到详细页面<asp:HyperLinkField

DataNavigateUrlFormatString='DetailsView.aspx?id={0}

DataNavigateUrlFields="Id“ Text="详细"/>设置链接的路径格式设定绑定的参数集合绑定列CommandField<asp:HyperLinkF120绑定列ImageField字段为图像的字段绑定到包含图像URL的数据源中的字段指定DataImageUrlFieldCheckBoxField字段以复选框显示的布尔型字段仅当数据源字段中有布尔型字段时使用此字段绑定列ImageField字段121光棒效果protectedvoidgvDemo_RowDataBound(objectsender, GridViewRowEventArgse){if(e.Row.RowType==DataControlRowType.DataRow){ e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.bac kgroundColor='#6699ff'");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor");}}GridView数据行绑定事件判断数据行类型当鼠标离开时数据行背景色还原添加属性（客户端）：当鼠标移过的时，数据行背景色变成蓝色光棒效果protectedvoidgvDemo_RowD122多选效果functionGetAllCheckBox(CheckAll){ varitems=document.getElementsByTagName("input"); for(i=0;i<items.length;i++) { if(items[i].type=="checkbox") { items[i].checked=CheckAll.checked; } }}获得页面上标签为Input的控件元素判断控件元素类型是否为复选框多选效果functionGetAllCheckBox(Ch123图书分类管理完成图书分类管理模块的功能在页面相应位置放置下拉单（DropDownList）设置下拉单的数据源，并配置相关属性绑定数据源，使用ObjectDataSource控件设置需要显示的字段（DataTextField属性）设置值字段（DataValueField属性）放置“修改”按钮，并编写单击事件的代码参考答案：图书分类管理

图书分类管理完成图书分类管理模块的功能参考答案：图书分类管124关键代码stringsb=String.Empty;for(inti=0;i<this.gvBooks.Rows.Count;i++){CheckBoxcb=(gvBooks.Rows[i].FindControl("chbSelect"))as CheckBox;if(cb.Checked==true){sb+=(gvBooks.Rows[i].FindControl("lblId")asLabel).Text+",";}}stringcatagory=this.ddlCatagory.SelectedItem.Value;ChangeCatagory(sb,catagory); //实现更新图书分类的方法遍历行，找到选中的项获得下拉单选中行的值关键代码stringsb=String.Empty;遍历125详细页面配合图书列表中的链接项，完成图书的详细页面显示几个常用的字段详细页面配合图书列表中的链接项，完成图书的详细页面显示几个常126DetailsView控件使用DetailsView控件完成图书详细信息的显示配置数据源定义数据方法GetBookById(Int32id)设置参数获取方法，通过参数获取指定DetailsView的数据源为该数据源演示示例：图书的详细页面

DetailsView控件使用DetailsView控件完成127小结默写实现全选效果的javascript脚本思路：获得参数（多选框对象）得到页面上所有的INPUT标签的集合遍历该集合并将符合条件的对象选中状态改为参数的选中状态小结默写实现全选效果的javascript脚本128总结数据源控件有哪几个？可否使用ObjectDataSource绑定数据访问层返回的DataSet？为什么？为绑定的行添加脚本事件的方法是什么？DropDownList控件的哪个属性可获取当前选择的项？总结数据源控件有哪几个？129学习情境六数据录入与验证学习情境六数据录入与验证130回顾2-1数据展示有哪两种方式？手写绑定绑定数据源控件Eval和Bind的区别？Eval

方法是静态（只读）方法，格式化显示，计算列等。Bind

方法支持读/写功能，可修改回传服务器。回顾2-1数据展示有哪两种方式？131下面是改变图书分类的部分代码，有什么问题？回顾2-2

stringsb=String.Empty;for(inti=0;i<this.gvBooks.Rows.Count;i++){CheckBoxcb=(gvBooks.Rows(i).FindControl("chbSelect“))as CheckBox;if(cb.Checked==true){sb+=(gvBooks.Rows[i].FindControl("lblId")asLabel).Text+",";}}stringcatagory=this.ddlCatagory.SelectedItem;ChangeCatagory(sb,catagory);Rows[i]SelectedValue或SelectedItem.Value下面是改变图书分类的部分代码，有什么问题？回顾2-2132预习检查可使用哪个控件完成文件上传？有哪几种数据验证控件？预习检查可使用哪个控件完成文件上传？133本章任务完善用户注册完善图书管理模块中的图书信息修改验证控件可上传图片可选择日期本章任务完善用户注册验证控件可上传134本章目标能熟练使用验证控件熟练使用ObjectDataSource更新数据会手工编写更新事件的方法本章目标能熟练使用验证控件135有效性验证用户注册时，输入了不合标准的信息，怎么办？后台手写验证代码使用javascript脚本进行验证ASP.NET提供了验证控件轻松实现用户输入的验证，且与用户浏览器无关由在客户端或服务器中运行的验证代码执行多种验证控件，验证数据更加简单方便页面回传，用户体验不好

不安全，与浏览器相关

有效性验证用户注册时，输入了不合标准的信息，怎么办？页面回传136验证控件的层次结构BaseValidator基础验证类RequiredFieldValidatorCompareValidatorRegularExpressionValidatorRangeValidatorCustomValidatorBaseCompareValidatorLabelWebControl抽象类具体类ValidationSummary验证控件的层次结构BaseValidatorRequired137RequiredFieldValidator非空验证用于验证用户输入是否为空常与其他控件一起使用常用属性属性名称说明ControlToValidate验证的控件idText出错时的提示ErrorMessage提交给ValidationSummary的错误提示，当Text为空时，也会显示该错误信息RequiredFieldValidator非空验证属性名称138RequiredFieldValidator演示演示输入验证如上页拖入并设置控件属性按钮事件：在页面显示"信息已提交！“在Page_Load及按钮事件中设置断点以调试模式运行，体会页面验证顺序将IE设置为禁用脚本，继续验证this.lblMessage.Text="信息已提交！";页面并未提交到服务器执行，验证在客户端进行

演示示例：验证控件的执行

当IE设置为禁用脚本时，页面发生回传，验证没有发生

RequiredFieldValidator演示演示输入验证139Page.IsValid修改按钮事件：Page.IsValid指示页面验证是否成功用于客户端验证失败情况下更加安全if(Page.IsValid){this.lblMessage.Text="信息已提交！";}判断页面是否经过验证Page.IsValid修改按钮事件：if(Page.Is140CompareValidatorCompareValidator用于比较控件的值注册时，密码需要输入两次，并且一致付款时，金额需大于0……常用属性属性名称说明ControlToCompare要进行对比的控件Type比较类型设置，不同类型的比较可能会出错Operator比较运算符，默认为等于CompareValidatorCompareValidat141RangeValidatorRangeValidator用于范围的验证验证生日（小于当前日期）预定卡拉OK（一周内）……常用属性属性名称说明MaximumValue范围的上界（最大值）MinimumValue范围的下界（最小值）Type验证类型（字符串、整型、双精度、日期、货币五种）RangeValidatorRangeValidator用于142电子邮件的验证电子邮件怎么验证？没有大小可比没有范围之分电子邮件的规则是：必须包含一个并且只有一个符号“@”第一个字符不得是“@”或者“.”不允许出现“@.”或者.@结尾不得是字符“@”或者“.”zhangsan@163.com可使用正则表达式电子邮件的验证电子邮件怎么验证？zhangsan@163.c143正则表达式用某种模式去匹配一类字符串的一个公式一类字符串：电话号码、电子邮件地址…...模式：规则公式：表示规则的一段文字匹配：根据表达式去对比验证规则例子：“^”可匹配字符串开始。那么表达式：“^正则”可匹配的下列字符串中的那一种？√×正则表达式名不正则言不顺正则表达式用某种模式去匹配一类字符串的一个公式例子：“^”144RegularExpressionValidator应用正则表达式作为进行验证的控件。电子邮件身份证号......常用属性ValidationExpression属性:设置要匹配的正则表达式RegularExpressionValidator应用正则145CustomValidator自定义验证可以手写js脚本进行客户端验证脚本也可以编写服务器端的验证事件或者联合两种方式验证，更安全常用属性属性名称说明ClientValidationFunction用于客户端验证的函数OnServerValidate服务器端验证的事件方法CustomValidator自定义验证属性名称说明Clie146ValidationSummary验证报告控件该控件并不对窗体的输入进行验证它可以将验证错误汇总在一处统一显示显示的内容是其他控件的ErrorMessage常用属性ShowMessageBox，指示是否显示弹出的提示消息ShowSummary，指示是否显示该报告内容，用于显示提示消息的时候为避免多处提示验证错误信息，可将验证控件的Text属性设置为“*”号ValidationSummary验证报告控件147现场编程完善用户注册功能使用验证控件的验证方式所有输入都不可为空两次输入密码一致Email需要格式正确使用弹出窗口的提示方式演示示例：采用验证控件的用户注册

现场编程完善用户注册功能演示示例：采用验证控件的用户注册148Calendar日历控件在Web页面上放置的一个可选日期的日历控件方便了用户对于日期的输入日历控件的使用将控件拖入页面设置控件相关属性设置事件，并添加代码运行检查效果演示示例：日历控件的使用

Calendar日历控件演示示例：日历控件的使用149Calendar日历控件的常用属性和事件属性方法名称说明SelectedDate属性设置或获取选择的日期VisibleDate属性当前可见的日期（默认显示的月份）TitleFormat属性标题格式（“某月”或“某年某月”）SelectionChanged事件选择某日期后的事件Calendar日历控件的常用属性和事件属性方法名称说明Se150Calendar(JS版)能否在用户选择日期时，不刷新页面？JS版的日历控件美观页面无刷新网上可免费下载一般都提供使用教程My97DatePicker日历控件Calendar(JS版)能否在用户选择日期时，不刷新页面151My97DatePicker比较不错的js版日历控件同时支持IE和Firefox界面美观功能强大，设置方便目录结构存放语言的文件夹

存放皮肤相关文件

日期库主文件

主配置文件，修改默认风格等

导入文件,在调用的页面需要引入该文件

My97DatePicker比较不错的js版日历控件存放语152使用方式使用方式：将整个文件夹放置于网站跟目录页面中添加WdatePicker.js的引用在设置日期的控件上添加样式和事件<scriptlanguage="javascript"type="text/javascript"src="My97DatePicker/WdatePicker.js"></script>class="Wdate"onFocus="newWdatePicker(this,'%Y-%M-%D%h:%m',true,'default')"指定js文件路径

演示示例：My97DatePicker的使用

使用方式使用方式：<scriptlanguage="jav153FileUpload文件上传控件可将图片等文件上传到服务器演示使用方法如图设置控件添加事件方法运行演示示例：文件上传控件的使用

FileUpload文件上传控件演示示例：文件上传控件的使154部分代码fulFile.SaveAs("C:\\"+fulFile.FileName);lblFile.Text="上传的文件名为："+fulFile.FileName+"<br>"+"文件大小："+fulFile.PostedFile.ContentLength+"kb<br>"+"文件类型："+fulFile.PostedFile.ContentType;保存文件到指定位置

获取上传的文件名

获取上传的文件类型

获取上传的文件大小

注意：读写硬盘需要设置足够的访问权限，需要将文件夹的权限分配给ASP.NET的运行帐户部分代码fulFile.SaveAs("C:\\"+fu155上传内容控制在web.config中设置上传大小控制上传的文件格式（JS脚本方式）<httpRuntimemaxRequestLength="4096"/>varmime=FileUpload.value;mime=mime.toLowerCase().substr(mime.lastIndexOf("."));if(mime!=“.jpg"){ FileUpload.value=""; alert("仅支持JPG格式");}maxRequestLength为可上传的大小（kb）

其实就是判断上传文件的后缀名

上传内容控制在web.config中设置上传大小<httpR156图书基本信息的修改修改图书基本信息在图书详细页增加添加和修改将项转换为模板项添加相关验证日期输入使用JS版的日历控件封面图片可上传更新演示示例：修改图书信息

图书基本信息的修改修改图书基本信息演示示