第2章ASPNET网站及jQuery.ppt

Web程序设计 ASP NET实用网站开发 网络开发技术 吴冬芹yzwudongqin 2 第2章ASP NET4 5网站文件及jQuery 3 本章要点 了解ASP NET4 5网站组成 熟悉 html文件及XHTML5常用元素 理解Web窗体页的两种模型 单文件模型和代码隐藏页模型熟悉CSS3样式定义 存放位置 了解JavaScript常识 熟悉代码存放位置 了解jQuery 熟悉jQuery的功能和使用方法 了解XML常识 熟悉XML文件结构 熟悉Web config配置文件结构和Global asax文件 4 目录 2 1 htm文件和XHTML52 2 aspx文件2 3 CSS文件和CSS常识2 4 js文件和JavaScript常识2 5jQuery2 6 XML文件和XML常识2 7web config2 8Global asax2 7小结 5 2 1 htm文件和XHTML5 htm文件是一种静态网页文件 不包含任何服务器控件 由HTML元素组成 客户端浏览器访问 htm文件时 IIS不经过任何处理就直接送往浏览器 由浏览器解释执行 XHTML eXtensibleHyperTextMarkupLanguage 可扩展超文本标记语言是被国际标准化组织机构W3C认定 用于替代HTML的标记语言 能被所有浏览器识别 是网页生成的基础 6 拓展 W3C 万维网联盟 WorldWideWebConsortium 又称W3C理事会 1994年10月在麻省理工学院计算机科学实验室成立 建立者是万维网的发明者蒂姆 伯纳斯 李 W3C制定了包括Html XML和CSS等的众多影响深远的标准规范 但是 W3C制定的web标准似乎并非强制而只是推荐标准 2011年1月 腾讯签约加入W3C 共同参与包括webApp HTML5等新互联网技术标准的研究和制定 2011年9月 百度加入 加入后 将能够与全球500家IT和互联网企业联手 共同研究互联网开放平台及无线互联网技术等相关标准 2013年1月21日 W3C宣布将北京航空航天大学 BUAA 加入其主机构列表中 使其成为全球第四所具备该机构主机资格的高校以及近15年来的首个全新加入的主要机构 北航成为继麻省理工学院 法国INRIA 日本庆应义塾大学之后的第四所高校主机机构 7 拓展 html xhtml html5 WHATWG WebHypertextApplicationTechnologyWorkingGroup 网页超文本应用技术工作小组一个以推动网络HTML5标准为目的而成立的组织 在2004年 由Opera Mozilla基金会和苹果这些浏览器厂商组成 WHATWG成立的原因是W3C意图放弃HTML 而力图发展XML 2007 7 10 MozillaFoundation Apple OperaSoftware建议W3C跟随WHATWG 的HTML5 将新的HTML 标准通用标记语言下的一个应用 命名为 HTML5 2007 4 7 新的HTML工作组采纳了他们的建议 8 2 1 htm文件和XHTML5 在VSEW2012中默认使用XHTML5文件类型 XHTML5与HTML5使用相同的元素 但XHTML5具有更严格的规则 XHTML5是标记语言的顶峰 所有包含ASP NET元素的动态页面最终都要转化为包含相应XHTML元素的静态页面才能被浏览器识别 9 2 1 1 htm文件结构 表示注释 表示文档类型为HTML5 表示这是一个HTML文档 表示文档头部信息 表示文档的元信息 表示浏览器标题栏中显示的信息 应包含于 中 表示CSS样式信息 应包含于 中 10 2 1 2常用XHTML5元素 表示文档主体部分 表示整个显示页面的标题信息 表示与旁边内容相关的标题信息 表示显示页面的内容区域 表示显示页面中与上下文不相关的独立内容 表示显示页面中的脚注信息 表示显示页面中的导航链接区域 表示一级标题 共六级标题 表示显示页面中的一块内容 俗称 层 常用CSS样式表统一其中的显示格式 表示一个段落 11 2 1 2常用XHTML5元素 表示换行 表示水平线 表示一个表格 其中表示一行 表示一个单元格 我的简介表示在浏览器上显示超链接 我的简介 点击后链接到intro htm 我的邮箱表示浏览器上显示超链接 我的邮箱 单击链接后给kxsg 发邮件 12 常用的实体符号表 13 实例2 1认识常用XHTML5元素 注意 单击浏览器 查看 源文件 可看到 htm文件的源代码 将浏览看到的效果与源代码中的XHTML元素对比 从而了解XHTML元素的作用 源程序 HTML5 html 14 实例2 1认识常用XHTML元素 认识常用XHTML5元素aside float left width 15 section float right width 85 footer clear both 网站Logo介绍数据库设计 MyPetShopMyPetShop是本书提供的一个综合实例 用来展示ASP NET4 5网站开发技术 功能模块MyPetShop包括前台商品浏览 用户管理 购物车 订单结算 后台管理等模块 Copyright2014MyPetShop 元素可提供有关页面的元信息 meta information 比如针对搜索引擎和更新频度的描述和关键词 标签位于文档的头部 不包含任何内容 标签的属性定义了与文档相关联的名称 值对 15 程序说明 表示页面每隔3秒自动刷新一次 xmlns是xmlnamespace的缩写 也就是XML命名空间 xmlns属性可以在文档中定义一个或多个可供选择的命名空间 该属性可以放置在文档内任何元素的开始标签中 该属性的值类似于URL 它定义了一个命名空间 浏览器会将此命名空间用于该属性所在元素内的所有内容 16 拓展阅读 为什么需要xmlns 在xhtml5中 允许使用各个不同的DTD文件 有可能不同的DTD文件中包含了相同的标识 这样就会出现标志冲突 如在a dtd中和b dtd中都包含 如果一个xhtml5文件同时包含了这两个dtd文件 而且使用了标志 就会出现标志冲突问题 为了解决冲突 就可以使用xmlns区分使用的是哪个dtd文件中的标志 17 2 2 aspx文件 aspx文件 Web窗体 在ASP NET4 5网站中占据主体部分 直接或间接地继承自System Web UI Page类 每个Web窗体中的代码包括两部分 一部分是处于元素之间的用于界面显示的代码 另一部分是包含事件处理等的C 代码 C 代码存储时有两种模型 1 单文件页模型2 代码隐藏页模型 18 1 单文件页模型 显示界面代码和逻辑处理代码 事件 函数处理等 都放在同一个 aspx文件中 逻辑处理代码包含于元素中 元素位于位于元素之上 且包含runat server 属性 实例2 2单文件页模型本实例包含TextBox Label Button控件各一个 当在TextBox1中输入内容后再单击Button1 则在Label1中显示 不管您输什么 我都喜欢ASP NET 源程序 SimplePage aspx runat server 表示这是服务器端控件 在服务器端运行 然后生成相应的客户端代码 可以在服务器端的后台代码文件 cs文件中 例如C VB 中访问这个控件 普通的HTML控件 如果不加这个的话 直接在客户端运行 19 说明 protectedvoidButton1 Click objectsender EventArgse Label1 Text 不管您输什么 我都喜欢ASP NET objectsender指的是事件监视的对象 EventArgs就是事件所需要的数据 而e是EventArgs类型的参数 它包含了事件所携带的信息 在运行时由系统调用的 比如说一个按钮控件 当它的单击事件被引发时 系统会自动把这个按钮对象作一个类型强制转换然后赋值给Sender 然后传递e 20 2 代码隐藏页模型 适用于多个开发人员共同创建网站的情形 显示界面的代码包含于 aspx文件逻辑处理代码包含于对应的 aspx cs文件 包含事件处理方法和自定义方法等 aspx文件不包含元素 但在 page指令中需包含引用的外部文件 当用户请求页面时 通过页面的Page指令 Web服务器自动将逻辑代码文件和布局代码结合到一起 形成组合代码 21 2 代码隐藏页模型 AutoEventWireup true 指定页面事件自动绑定到指定的方法 CodeFile CodeBehind aspx cs 指定后台编码文件 Inherits Chap2 CodeBehind 指定继承的类名 22 2 代码隐藏页模型 实例2 3代码隐藏页模型源程序 CodeBehind aspx 23 2 3 CSS文件和CSS常识 为什么需要CSS XHTML5能限定浏览器中网页元素的显示格式 但可控性不强 如统一网站风格需要逐个网页去修改 CSS CascadingStyleSheet 级联样式表应用于网页中元素的样式规则 为各类浏览器所接受 在XHTML基础上 CSS提供了精确定位和重新定义XHTML元素属性的功能 一个CSS文件可以作用到多个XHTML文件 要同时改变多个XHTML网页风格时 只要修改CSS样式文件即可 版本 CSS1 CSS2 CSS3 24 2 3 1定义CSS3样式 每个CSS3样式有两个主要部分 选择器 如h1 p 选择器适用于页面中的所有元素 常用于全局设置 例如 将页面中所有元素的字体设为Arial的CSS3样式为 font family Arial 声明 声明由属性和值组成 如 如color blue 25 2 3 1定义CSS3样式 根据定义的不同用途 CSS样式包括1 基于元素的样式2 基于类的样式3 基于ID的样式 注意 当这三种样式运用于同个XHTML元素时 基于ID的样式优先级最高 其次是基于类的样式 最后是基于元素的样式 26 2 3 1定义CSS样式 1 基于元素的样式元素选择器的取名即为XHTML元素名 用于重新定义指定的XHTML元素的属性 例如 对所有和之间的段落设置文本对齐格式为居中的CSS3样式为 p background color 99FF99 属性选择器 27 28 2 3 1定义CSS3样式 2 基于类的样式类选择器可以应用于不同的XHTML元素或某个XHTML元素的子集 定义时 要在选择器名前加 如对类名intro定义为红色的样式规则为 intro color ff0000 在页面中 用class 类名 的方法调用 如 29 2 3 1定义CSS3样式 3 基于ID的样式应用于由ID值确定的XHTML元素的属性 且常用于单个XHTML元素的属性设置 定义时 需在选择器 ID名 前加 在网页CSS布局中主要靠层 div 实现 而 div 的样式常采用基于ID的样式 如要对定义的层 设置背景色为绿色的样式规则为 menubar background color 008000 30 2 3 2CSS3样式位置 CSS样式规则可以放在不同的位置包括 与XHTML元素的内联 位于页面的元素中和外部样式表 css文件 中 不同位置CSS样式规则的优先级是1 内联样式最高 可通过style属性设置 2 其次是页面中的CSS样式 3 最后是外部样式表 31 2 3 2CSS3样式位置 1 创建内联样式当要为单个元素定义属性而不想重用该样式时 可以使用内联样式 内联样式规则在XHTML元素的style属性中定义 如 直接在相应元素属性窗口的style属性中设置 设置完成后自动生成样式规则 32 2 3 2CSS3样式位置 2 创建特定页的CSS样式当要为特定页中的元素设置样式规则时 可以在元素中的元素内定义 定义时可采用 基于元素的样式 基于类的样式或基于ID的样式 实例2 4运用页面样式源程序 Interior aspx 33 补充说明 Font styleitalic和oblique都是向右倾斜的文字 但区别在于Italic是指斜体字 而Oblique是倾斜的文字 对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果 inherit是继承父类的属性 一般用于字体 颜色 背景text transformcapitalize 首字大写 uppercase 英文大写 lowercase 英文小写 34 补充说明 font variant small caps 针对英文字母的 意思是小型大写 大小跟小写字母一样 样式是大写text decorationBlink属性 很多浏览器不支持blink属性 所以建议不要使用text decoration的blink 如果实在是想要blink 那么可以使用js实现 35 2 3 2CSS3样式位置 3 创建外部样式表外部样式表中的样式规则常应用于整个网站 这些规则包含于独立的 css文件中 在调用时 使用元素可以将样式表链接到网页 如将 1 3 css 文件中的样式规则应用于当前页的代码为 实例2 5运用外部样式表源程序 Exterior css源程序 Exterior aspx 36 2 4 js文件和JavaScript常识 JavaScript是由NetScape公司开发的基于对象和事件驱动的解释型语言 作为一种脚本语言可以直接嵌入到XHTML页面中 不需要Web服务器端的解释执行即可由浏览器实现动态网页处理 目前的浏览器均支持JavaScript 37 典型的JavaScript用途 在XHTML中创建动态文本 响应客户端事件 可以读取并改变XHTML元素的内容 在数据提交到服务器之前 验证这些数据 可检测访问者的浏览器 并根据检测到的浏览器类型载入相应的页面 用来创建cookies 关闭窗口 页面上显示时间 38 2 4 1JavaScript代码位置 1 在元素中2 在元素中3 独立的 js文件中 39 1 在元素中 元素中的JavaScript代码包含于 元素之间 只有在被调用或当事件被触发时才会执行 实例2 6 元素中的JavaScript代码源程序 HeadJS aspx 40 源程序 headJS aspx 熟悉 当网页执行到元素时 触发load事件 调用message 函数 注意 JavaScript中采用首字符为小写字母的方式命名对象 函数等 41 2 在元素中 元素中的JavaScript代码要包含于 之间 实例2 7元素中的JavaScript代码源程序 BodyJS aspx程序说明 页面载入时执行docment write方法输出XHTML文本 在 ltbody gt元素中 浏览器上显示效果是 在元素中 42 源程序 BodyJS aspx 熟悉 包含于元素中的JavaScript肯定会执行 而元素中的JavaScript只有被调用才执行 注意 用 gt 表示 43 3 在独立的 js文件中 独立的 js文件常用于多个页面需要调用相同JavaScript代码的情形 把所有 js文件放在同一个脚本文件夹中 易于管理 调用外部JavaScript文件时 需在元素中加入src属性值 源程序 FileJS aspx 44 源程序 FileJS aspx 运用独立的 js文件 functionmessage alert JavaScript代码在FileJS js文件中 当网页执行到元素时 触发load事件并调用FileJS js中的message 函数 注意 js文件中不要包含元素 实例2 9实现图片动态变化效果 45 源程序 ChangeImg aspx程序说明 页面载入后显示mouseOut jpg getElementById 返回指定id的XHTML元素 当鼠标指针指向图片时触发mouseover事件后调用mouseOver 函数显示mouseOver jpg 移开时触发mouseout事件后调用mouseOut 函数显示mouseOut jpg 单击后链接到 46 源程序 ChangeImg aspx 实现图片动态变化效果functionmouseOver document getElementById mouse src Images mouseOver jpg functionmouseOut document getElementById mouse src Images mouseOut jpg 当网页执行到元素时 触发load事件并调用FileJS js中的message 函数 注意 js文件中不要包含元素 实例2 10实现一个简易时钟 47 源程序 Timer aspx程序说明 当页面载入时 触发元素的load事件 执行自定义的startTimer 函数 该函数过1秒后重复调用自身 连续地在div层divTimer上显示当前系统时间 其中 时间数据来源于客户端 48 源程序 Timer aspx functionstartTimer vartoday newDate 获取客户端当前系统日期varh today getHours varm today getMinutes vars today getSeconds m checkTime m s checkTime s document getElementById divTimer innerHTML h m s setTimeout startTimer 1000 过1秒后重复调用自定义的startTimer 函数 checkTime i 检查i参数值 如果i 2 5jQuery 49 jQuery由JohnResig于2006年初创建 一个优秀的JavaScript框架 提供JavaScript库 访问和管理 包括插入 修改 删除等操作 XHTML元素 设置XHTML元素的CSS样式 处理XHTML元素的事件 实现XHTML元素的动画特效 为网站提供Ajax交互 支持XHTML5和CSS3 提供的jQueryMobile可以方便地用于智能手机和平板电脑的Web应用程序开发 绝大多数浏览器均支持jQuery 2 5jQuery 50 在VSEW2012中 通过NuGet程序包管理器安装jQuery安装完成后 在网站根文件夹下的Scripts文件夹中会自动添加最新的由jQuery提供的JavaScript库 在VSEW2012中 要使用jQuery提供的JavaScript库 需要在页面的元素中添加相应的引用 示例代码如下 2 5 1jQuery基础语法 51 格式 selector action Selector用于选择浏览器对象 如表示浏览器窗口的window对象 表示XHTML文档的document对象等 也可以用于选择XHTML元素 action 通过调用jQuery已定义的方法或编写自定义方法 对选择的对象执行具体的操作 常用的jQuery选择器 52 常用的jQuery方法 53 实例2 11利用jQuery管理XHTML元素 54 运行效果 单击 隐藏 区域 将隐藏阴影部分内容 单击 显示 区域 将显示阴影部分内容 单击 淡入或淡出 区域 将淡入或淡出阴影部分内容 单击 更改内容 区域 将阴影部分内容改为 我的内容被更改了 单击 更改样式 区域 将页面中所有元素的背景色改为黄色 字体改为隶书 源程序 ManageXhtml aspx 实例2 12利用jQuery实现一个时间数据来源于服务器端的时钟 55 利用jQuery和JavaScript实现一个时钟 其中时间数据来源于服务器端 源程序 Ajax aspx 56 2 5 XML文件和XML常识 XML文件常用于解决跨平台交换数据的问题 这种格式实际上已成为Internet数据交换标准格式 XML eXtensibleMarkupLanguage 一种可以扩展的标记语言 可以根据实际需要 定义相应的语义标记 与XHTML相比XHTML被设计用来显示数据 而XML旨在传输和存储数据 57 实例2 12XML格式早餐菜单 本实例描述一个早餐菜单 其中包括食物名称 价格 描述 热量等 源程序 Breakfast xml程序说明表示XML声明 其