作者：张趁香,陈俊贤
出版社：中国铁道出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
ASP.NET动态网站设计任务教程试读：
前言
随着科技的进步，工业与信息化融合的加速推进，社会对实用技能型人才的需求也越来越大，企业对人才的需求是高职教育人才培养的风向标，软件企业普遍欢迎的是有一定理论基础，具备项目开发整体思路，动手能力强，具备团队协作意识，学习能力强的人才，如何突出这一点？本书秉承“合理确定教学内容，精彩展现教学内容”的理念，从思考模拟工作情景，到提出工作任务（含知识点和技能点），做到实用、够用、能学、会用，重在培养学生的职业岗位能力，突出岗位操作技能。本书采用“大案例贯穿——做中学”课程设计，用一个较综合的案例贯穿整本书知识点，每一单元以任务的方式提出需求，然后分析所用到的知识点，最后使用知识点实现所提出的任务。
本书的开发和实施以教学作为基础，作者来自教育第一线和企业，有丰富的教学经验和项目开发经验。
本书以培养岗位职业能力为主线，全书分为八个单元，对应.NET开发工程师的岗位需求，以程序员的成长过程来重组任务、知识点和技能点，并使用案例贯穿知识点，在帮助学生掌握并应用基础知识的同时，为项目开发做准备。单元1和单元2主要介绍静态网页中用到的知识点：单元1先介绍B/S结构中开发前端界面所用到的知识点，具体有DIV、框架、超链接、样式等相关知识，先提出任务需求，然后对需求用到的知识点进行分析和分解，接下来完成具体实现步骤，在说明中总结所用到的知识点；单元2介绍了前端界面开发的交互性设置，使用JavaScript知识点，通过相关案例来介绍和加强Javascript的用法；单元3到单元5主要介绍了ASP.NET中数据绑定的相关知识，数据绑定控件的具体用法，代码的实现等，是整本书的核心，同样也是使用ASP.NET开发B/S项目的核心单元，需要和SQL Server数据库相结合，案例知识丰富，学生可以通过查看操作步骤完成一个项目，提高自己项目开发的能力；单元6介绍了数据输入及有效性验证的相关知识，在项目开发中，表单验证也是一个非常重要的工作，本单元中详细给出了开发网站的常用任务，贯穿相关知识点，让学生灵活运用知识点；单元7属于提高的内容，主要介绍了网站上数据的导出与打印；单元8介绍了ASP.NET内部对象与网站的部署。
在本书的编写过程中，苏州工业园区服务外包职业学院张趁香负责全书的架构设计、部分章节的编写及全书审稿、统稿，陈俊贤参与了部分章节的编写。本书的编写得到了陆正、陈栋良的帮助，也得到了许多学生的支持，在此感谢他们在本书形成过程中提供的各种贡献。
本书体现了高职教育的发展规律，内容适应软件技术等专业教学改革需要，适合在平时的教学中使用本书的课程设计方式和案例。编者2017年12月绪论ASP.NET的工作原理
ASP.NET是建立在.NET基础之上的，在运行ASP.NET的服务器上必须安装了.NET，要理解ASP.NET的工作原理就必须理解.NET、.NET Framework、公共中间语言。
1..NET
对于.NET，微软公司也没有一个详细确切的定义。但是可以这样认为：.NET是微软公司要提供的一系列产品的总称。具体说来，.NET由下面的几个部分组成：.NET战略、.NET Framework、.NET企业服务器和.NET开发工具。
.NET战略是指把所有的设备通过Internet连接在一起并把所有的软件作为这个网络所提供的服务的想法。
.NET Framework是一个程序设计环境，它提供了具体的服务和技术，方便开发人员建立相应的应用程序。
.NET企业服务器是指SQL Server 2013之类由.NET Framework应用程序使用的服务器端产品。它们虽然不是由.NET Framework编写成的，但是它们都支持.NET。
为了能够在.NET Framework上进行程序开发，微软把Visual Studio进行升级，并把升级后的产品命名为Visual Studio.NET。这就是.NET开发工具。
2..NET Framework
.NET Framework是.NET战略的核心。.NET Framework分为以下几个部分：MS中间语言、CLR、.NET Framework类库、.NET语言、ASP.NET和Web服务。
MS中间语言是.NET的通用语言。无论使用哪一种.NET语言编写的程序代码，在执行之前，都会把它编译成为MS中间语言。
CLR（Common Language Runtime，公共语言运行库）用于执行MS中间语言。
.NET Framework类库中包含了大量可以实现重要功能的代码库。用户在编写程序的时候可以很方便地把这些库调用到应用程序中，实现更加复杂的功能。由于这 些类库的存在，使得编写功能强大的程序更加容易。
.NET语言是指可以将使用其编写的代码编译成为MS中间语言的编程语言。常见的语言有VB.NET和C#等。
Web服务是指可以通过Web访问的组件。
3.公共中间语言
在.NET Framework中使用高级语言（如VB.NET、C#等）编写的程序，需要在运行前将其编译成为中间语言（如MS中间语言）。需要注意的是，中间语言并不是一种可以直接执行的机器代码。与高级语言编写的代码相比，它的可读性很差，但是进行了一系列的优化。
为了执行中间语言，需要一个执行环境CLR。CLR在.NET Framework中的位置十分重要，可以说是.NET Framework的基础。CLR用JIT（Just-In-Time）编译器把中间语言代码编译成可以执行的代码，并对程序进行最后的、与机器相匹配的优化，使得程序可以在所在计算机上尽可能高效地运行。
采用这种方式的原因是，早期的编译方式是把程序源代码直接编译成机器代码。这时编译好的程序虽然也进行了与机器相匹配的优化，但是这些优化都是针对编译源代码的机器进行的。如果把编译好的程序放到其他类型的机器上，那么所进行的优化就有可能没有任何意义，并且如果机器的硬件发生变化，那么还有编译后的程序无法执行的可能，因为新的机器可能没有原来机器所拥有的某种资源。而如果采用了公共中间语言的方式，就可以很好地解决这个问题。由于中间语言与机器无关，所以它可以在任何一个可以运行CLR的机器上运行。并且由于所有的关于机器的优化都是由CLR进行的，所以不存在早期编译所产生的由于机器不同而导致不兼容的问题。
4.ASP.NET的工作原理
首先，有一个HTTP请求发送到Web服务器要求访问一个Web网页。Web服务器通过析客户的HTTP请求来定位所请求网页的位置。如果所请求的网页的文件扩展名是.aspx，么就把这个文件传送到aspnet_isapi.dll进行处理，由aspnet_isapi.dll把ASP.NET代码提交CLR。如果以前没有执行过这个程序，那么就由CLR编译并执行，得到纯HTML结果；如已经执行过这个程序，那么就直接执行编译好的程序并得到纯HTML结果。最后把这些HTML结果传回浏览器作为HTTP响应。浏览器收到这个响应之后，就可以显示Web网页工作原理及流程如图0-1所示。图0-1 ASP.NET工作原理单元1网页布局与样式设置
本单元要点
● DIV标签属性与网页布局
● 仿Windows界面设计
● 使用框架集进行页面布局
● 设置超链接的显示样式
● 样式引用方式
● 建立一个滚动区域
● 建立图形化的水平菜单任务1-1使用DIV布局网页需求：
按图1-1所示的样式进行页面布局的设计。图1-1 页面布局分析：
整体部分分为上中下三部分，中间部分又分为左中右三个子部分，这里包含了DIV的嵌套结构。这个任务基本上包括了页面布局中所有可能的需求。
这一任务虽然可以通过＜table＞标签实现，这里我们采用DIV+CSS完成所给任务的设计。
DIV作为网页中的HTML标签，主要作用是作为容器，容纳文字、图像、子DIV和其他HTML标签。
CSS（Cascading Style Sheets，层叠样式表）。在页面设计中采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS中的样式可以被同一页的多个标签或不同页面的多个标签所引用，在统一界面的风格上有着不可或缺的重要作用。
在实现这一任务时，可以采用自顶向下、由简到繁的方法完成设计，在讲述中逐渐引出必要的知识点和操作方法。实现：
第一步，新建一个网站（即项目），并添加新项“HTML页面”。打开页面的“源”选项卡，将“＜title＞无标题页＜/title＞”改为“＜title＞网页布局＜/title＞”，在原有的body内，添加三个并列的DIV，并在第一个DIV中添加文字“我的LOGO”，在第二个DIV中添加文字“主体部分”，在第三个DIV中添加文字“版权信息：苏州工业园区服务外包职业学院信息技术系”，所产生的源代码如图1-2所示。图1-2 三个DIV源代码
从图1-3中可以看出，并列的三个DIV在没有设置任何样式的情况下，空间是垂直排列的，这是DIV默认的布局方式。
方法提示：VS 2013中添加标签时有自动完成结束标签的功能。
第二步，按图1-4设置三个DIV的背景色，从上到下分别为：“#EEE”“#CCC”“#AAA”它们是深浅不同的三种灰色，目的在于看出三个DIV不同区域。图1-3 三个DIV呈上中下排列图1-4 设置三个DIV的不同背景
设置方法：在VS 2013中的“源”中按下列格式，直接输入style样式设置，所产生的代码和静态页面如清单1-1所示。
清单1-1 上中下三个不同背景DIV层
方法提示：VS 2013中设置样式时有智能提示（Ctrl+J）。
第三步，设置上中下三个DIV之间的边距为5px。
只需设置第二个DIV的style样式的上边距属性和下边距属性为5px，如清单1-2所示。
清单1-2 设置第二个DIV层的外间距
界面效果如图1-5所示。
第四步，将第一个DIV和第三个DIV的文本居中显示。
只需在它们的style中设置属性text-align： center。
界面效果如图1-6所示。图1-5 设置上中下三部分的间隔图1-6 设置文本水平居中
第五步，改变第一个DIV和第三个DIV的区域高度，使之分别为120px和50px。
只需在样式中设置属性height：120px和height：50px，产生的界面效果如图1-7所示。
第六步，改变第一个DIV和第三个DIV中文本的字体相关样式属性。
第一个DIV设置大小为36px并加粗，第三个DIV设置大小为12px。
只需在第一个DIV中设置font-size：36px和font-weight：bold，第三个DIV中设置font-size：12px，产生的界面效果如图1-8所示。图1-7 设置DIV的高度图1-8 设置第三个DIV的字体大小
第七步，将以上三个DIV宽度都设置为800px；并要求它们相对IE浏览器窗口水平居中，方法有两种：
方法一：设置每个DIV样式属性；
方法二：添加一个父DIV以包容这三个DIV，只要设置父DIV样式属性就能控制内层的DIV。
后一种方法显然不仅减少了代码量，同时也提高了可维护性，建议读者在今后的界面布局或程序设计中尽量减少代码重复量，提高代码可重用性和可维护性。CSS主要意义也就在于此，外层定义过的部分样式会自动被内层所继承。
如果按照清单1-3的方法，则产生图1-9所示的界面效果。
清单1-3 使内部居中的DIV层图1-9 外层水平居中对内层的影响
图1-9的水平居中不符合任务的要求，它只是将内层文本居中，并未让内层DIV居中，这是因为内层DIV文本继承使用了“text-align：center”样式属性的设置，将上中下DIV内的文本居中。如果将三个DIV看作文本就能实现这一要求，实现办法按清单1-4，在此DIV外层再加一个更外一层的DIV将“text-align：center”样式属性的设置移入其中。
清单1-4 设定内部DIV层缺省宽度
产生的界面效果如图1-10所示。图1-10 使内层DIV居中
第八步，去除主体部分中文字，添加三个水平排列的DIV将其高度设为400px（也可以设置其上层的高度为400px，本层高度设置为100％），改变默认的垂直排列方式，使得下一个DIV出现在前一个DIV的右边，除了设置前一个DIV的宽度之外，重要的还要设置其float属性为left，最右边DIV可以不设置。为使左中右留有间隙，在主体中部DIV上设置相关的margin属性。清单1-5是主体部分源代码。
清单1-5 建立左中右排列的三个DIV层
产生的效果如图1-11所示。图1-11 主体部分添加了三个水平排列的DIV
说明
外层DIV标签的样式属性设置：“text-align：center”，不能使自身居中，只能使其开始标记＜div＞和结束标记＜/div＞之间的内容居中，这样作为内部三个DIV的容器，它被居中放置了，同时这些设置一直被传入最内层；如果想让“主体部分”文本左对齐（见图1-11），只需在其DIV标签中添加样式属性设置：“text-align：left”，以覆盖外层的相同样式属性设置即可。
对position：fixed属性的设置IE 7.0是支持的，而IE 6.0却不支持。如何使用某一个DIV位置固定，将在下一单元中通过JavaScript解决。
左中右间隙的颜色是由主体中间DIV的背景色决定，将#CCC改为#FFF，就能实现白色间隙任务1-2使用DIV实现仿Windows窗口的设计需求：
完成特殊方框输出界面的设计使用。画出图1-12所示的圆角方框，并在框内相应位置实现文本的显示。分析：
假定方框的大小固定为410px*240px，一种比较简单的办法是将上图作DIV背景图像，在其内部添加两个子DIV，在子DIV中区分标题和内容文本。
技术关键是子DIV的定位。实现：图1-12 仿Windows窗口
第一步，添加DIV以背景方式显示方框图像，代码如清单1-6所示。
清单1-6 建立显示方框图像DIV层
第二步，在其中添加两个DIV，定位方式为绝对定位（absolute），并设置其内部文本。代码如清单1-7所示。
绝对定位其实也不是真正相对于窗口用户区的左上角，而是相对于其容器的左上角确定横坐标与纵坐标。
清单1-7 建立标题DIV层和内容DIV层
标题栏图像的高度是28px（可通过Windows附件—画图软件实现），DIV默认字体的大小为16px，绝对定位情况下DIV的top的取值为（28-16）/2=6px。当然也可以在设置了绝对定位后用拖放的方法可视化定位。
如果将标题文本的字体大小设为12px，则它的top应设为（28-12）/2=8px。
说明
当DIV采用了绝对定位后，可以选中该DIV，在其左上方出现一个图标，拖动该图标就可以将对应DIV安放在某个位置。但这种定位只能在设计时使用，如果要精确控制或动态代码控制就需要设置其top属性和left属性。
用整幅图像作为圆角方框的背景图，虽然实现起来比较简单，但其代价是花较长时间传输一幅图。下个任务将介绍使用DIV实现大小可变的仿Windows窗口。
如何实现圆角方框相对于浏览器内容区域水平居中，读者可以参照任务1-1。任务1-3使用DIV实现大小可变仿Window窗口的设计需求：
实现指定长宽尺寸（600px*400px）的圆角方框。分析：
用特定长宽尺寸的图像实现指定长宽尺寸的圆角方框，图形所占空间太大，影响下载速度，这种做法不可取。利用背景图像填充的原理，将背景图像中重复部分（四条边和一个中心）尽可能去除，再将图像切割成9块，分别保存到文件中作为填充图像。实现：
第一步，将图分成9块不重复的区域，分别按图1-13所示进行编号。得到9个图像文件。用Windows附件—画图分别从大图中截取这9个图，保存到某个文件夹中。图1-13 9个图像切片与页面结构
第二步，用9个DIV绝对定位组成这样的矩形。假定要实现600px*400px的方框，除去图像5四周的像素点，中间部分为（600-4-4）px*（400-28-4）px=592px*368px。其页面的源代码为清单1-8。
清单1-8 整体定位DIV层和内部9个DIV层
图1-14所示为清单1-8产生的600px*400px的圆角方框。
说明
以上的坐标定位都采用绝对定位position：absolute，它不是相对于整个浏览器定位，而是相对于其容器左上角定位。
下一个DIV的z-index大于前一个DIV的z-index，其层高于前一个。所以图标、标题和内容的DIV必须添加在背景DIV的后面。
如果要使用指定颜色作为是中间背景色，应如何实现，请读者思考实现。
使用TABLE能较好地实现大小可变仿Windows窗口的设计，这里只是为了加深读者对DIV的绝对定位深刻理解与熟练使用。下一个任务将介绍使用TABLE实现大小可变仿Window窗口的设计。图1-14 600px*400px的圆角方框任务1-4使用TABLE实现大小可变仿Windows窗口的设计需求：
同任务1-3，实现指定长宽尺寸（600px*400px）的圆角方框。分析：
利用TABLE行列对齐的特点，将DIV换成TABLE中的TD，首行TD控制宽度，每行TR控件高度。实现：
第一步，添加新项“HTML页”，从工具箱的HTML选择卡中拖入TABLE。
第二步，指定＜table＞标签的属性cellspacing="0"和cellpadding="0"，使得每一个相邻图像无缝相连。
第三步，分别设置3个tr的高度height样式属性为27px、369px和4px。
第四步，分别设置首行3个td的宽度样式属性为4px、592px和4px。
第五步，分别设置9个td的背景图像background-image样式属性。
第六步，在table标签之外添加一个DIV以控制TABLE位置。整个代码如清单1-9所示。
清单1-9 整体定位DIV层和3*3表格
说明
TABLE使用在数据传输量不大的场合，如果需要将多幅较大图片拼接在一起，则不太适宜，在显示时它要将整个图形全部下载到客户端才能显示出图像。本任务中9个图形都很小，因此可以使用此种方法。
TABLE定位规范，但又失去灵活。而DIV作为容器独立使用，定位很灵活，使用很方便，所以很多人喜欢在DIV标签中通过设置样式完成许多意想不到的功能。任务1-5使用frameset实现页面布局
使用框架集不仅可以布局页面，同时还可以在一个页面内打开另一个页面。需求：
按图1-15所示的样式进行页面布局，将整个显示区域划分成三个区域，即三个框架，其关系为整个页分为上下结构的框架集，下面结构又是由一个左右结构的框架集。上框架区域高度为50px，不可改变，剩余空间给下框架集，下框架集内包含左框架和右框架，左框架区域的宽度为199px，可以改变，剩余空间给右框架，左右框架之间留10px的间距。分析：
由于右框架区域是主要显示区域，显示内容的数量不定，因此，这部分应带有滚动条，而其他框架不带滚动条。图1-15 使用frameset实现页面布局运行界面实现：
为测试框架集，建立五个文件。
1.“框架集.aspx”文件，文件代码见清单1-10
清单1-10含有三个框架的框架集文件
框架集垂直分割用rows属性，水平分割用cols属性，如rows="50，*"和cols="199，*"。
试读结束[说明：试读内容隐藏了图片]