《第3章 网页设计(web控件).ppt》由会员分享，可在线阅读，更多相关《第3章 网页设计(web控件).ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、ASP.NET Web程序设计与应用程序设计与应用第第3章章网网页设计页设计第第3 3章章 网网页页设设计计第第3章章网页设计网页设计u3.1静态网页设计静态网页设计u3.2动态网页设计动态网页设计u3.3HTML控件控件u3.4Web服务器控件服务器控件u3.5Web表单验证控件表单验证控件u3.6用户控件用户控件2第第3 3章章 网网页页设设计计3.1静态网页设计静态网页设计u静态网页特点如下：静态网页特点如下：u1）静态网页每个网页都有一个固定的）静态网页每个网页都有一个固定的URL，且网页，且网页URL以以.htm、.html、.shtml等常见形式为后缀，等常见形式为后缀，而不含有而
2、不含有“？”；u2）网页内容一经发布到网站服务器上，无论是否有用）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；文件，每个网页都是一个独立的文件；u3）静态网页的内容相对稳定，因此容易被搜索引擎检）静态网页的内容相对稳定，因此容易被搜索引擎检索；索；u4）静态网页没有数据库的支持，在网站制作和维护方）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量
3、很大时完全依靠静态面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；网页制作方式比较困难；u5）静态网页的交互性较差，在功能方面有较大的限制。）静态网页的交互性较差，在功能方面有较大的限制。3第第3 3章章 网网页页设设计计3.2动态网页设计动态网页设计u动态网页是在被请求时才能生成页面所需动态网页是在被请求时才能生成页面所需内容。内容。u当浏览器请求这类当浏览器请求这类URL时，服务器首先运时，服务器首先运行对应的程序，然后将生成的输出结果返行对应的程序，然后将生成的输出结果返回给浏览器。回给浏览器。4第第3 3章章 网网页页设设计计5第第3 3章章 网网页页设设计计u控
4、制网页格局的控制网页格局的2种方式：种方式：n表格（表格（table）+css样式样式n层（层（div）+css样式样式6第第3 3章章 网网页页设设计计u创建层方法创建层方法n直接从控件面板拖入。直接从控件面板拖入。n使用使用.标签标签u设置层显示样式设置层显示样式n在设计界面的属性窗口，使用所见即所得的在设计界面的属性窗口，使用所见即所得的style属性窗口设置。属性窗口设置。n修改代码修改代码n使用使用css样式样式7第第3 3章章 网网页页设设计计uCss样式使用方法：样式使用方法：body#menu.abc#menua8第第3 3章章 网网页页设设计计控控件件uHtml标注（标注（h
5、tml控件）控件）:不能在服务器端控制的。不能在服务器端控制的。uhtml控件（控件（html服务器端控件）服务器端控件）:其实就是其实就是html控件的基础控件的基础上加上上加上runat=server所构成的控件所构成的控件.它们的注意区别是运它们的注意区别是运行方式不同，行方式不同，html控件运行在客户端，而控件运行在客户端，而html服务器控件是服务器控件是运行在服务器端的。当运行在服务器端的。当ASP.NET网页执行时，会检查标注网页执行时，会检查标注有无有无runat属性，如果标注没有设定，那么属性，如果标注没有设定，那么Html标注就会被标注就会被视为符串，并被送到字符串流等待
6、送到客户端，客户端的浏览视为符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果器会对其进行解释；如果Html标注有设定标注有设定runat=server属性，属性，Page对象会将该控件放入控制器，对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成服务器控件的执行结果转换成Html标注，然后当成字标注，然后当成字符串流发送到客户端进行解释符串流发送到客户端进行解释9第第3 3章章 网网页页设设计计uweb服务器控件（服务器控件（服务器控件）服务器控件）:也
7、也称称服务器控件，是服务器控件，是WebForm编程编程的基本元素，也是的基本元素，也是所特有的。它会按所特有的。它会按照客户端的情况产生一个或者多个照客户端的情况产生一个或者多个html控件，控件，而不是直接描述而不是直接描述html元素。如：元素。如：10第第3 3章章 网网页页设设计计3.4Web服务器控件服务器控件u服务器端控件是服务器端控件是ASP.NET框架的基础部分框架的基础部分之一。作为之一。作为ASP.NET框架的核心，服务器框架的核心，服务器端控件是端控件是.NET框架中的一些表示框架中的一些表示WebForm上可视化元素的类。一些服务器端控上可视化元素的类。一些服务器端控
8、件几乎就是某些标准件几乎就是某些标准HTML标签的简单映射，标签的简单映射，并提供一些服务器端的高效实现。而另外一并提供一些服务器端的高效实现。而另外一些服务器端控件则是更大规模的抽象，封装些服务器端控件则是更大规模的抽象，封装了复杂的了复杂的GUI（图形用户界面）任务，例如（图形用户界面）任务，例如页面中显示数据的网格等，并最终输出成页面中显示数据的网格等，并最终输出成HTML表示。表示。11第第3 3章章 网网页页设设计计uWeb服务器控件最终会被解释为服务器控件最终会被解释为html控控件。件。uWeb服务器控件必须包含在服务器控件必须包含在web窗体中。窗体中。即即u具体的具体的Web
9、服务器控件可以看做是类的服务器控件可以看做是类的实例。都有属性、方法、事件。实例。都有属性、方法、事件。Web编编程实际是对对象修改属性、使用方法、触程实际是对对象修改属性、使用方法、触发事件。发事件。12第第3 3章章 网网页页设设计计Style属性属性u通过设置控件的通过设置控件的style属性设置控件的样式。属性设置控件的样式。uu优点：简单方便优点：简单方便u缺点：不能通用缺点：不能通用13第第3 3章章 网网页页设设计计CssClass属性属性u使用使用CssClass属性设置样式方法属性设置样式方法n创建创建Css样式表样式表n设置设置CssClass属性属性u.cssstyleb
10、ackground-Color:yellow;font:14px黑体黑体;Border-bottom-style:dashed;/asp:TextBox14第第3 3章章 网网页页设设计计Style类类u声明声明Style类的步骤类的步骤n声明声明Style对象对象n设置设置Style对象的属性对象的属性n将将Style对象应用到对象应用到Web服务器控件服务器控件uStyletextboxstyle=newStyle();textboxstyle.BackColor=System.Drawing.Color.Blue;textboxstyle.BorderStyle=BorderStyle.
11、Double;TextBox2.ApplyStyle(textboxstyle);15第第3 3章章 网网页页设设计计3.4.1ASP.NETLabel控件控件uLabel控件必须放在移动控件必须放在移动ASP.NET网页上网页上的的Form或或Panel控件中，或者放在移动控件中，或者放在移动ASP.NET网页上的控件的模板中。也可以将网页上的控件的模板中。也可以将它拖动到移动用户控件页上。使用它拖动到移动用户控件页上。使用Text属性属性设置设置Label控件要显示的文本。控件要显示的文本。u通过设置通过设置ForeColor、Font、BackColor等属性可以在设计时更改等属性可以在
12、设计时更改Label控件的外观。控件的外观。应用程序可以通过编程方式在运行时更改属性。应用程序可以通过编程方式在运行时更改属性。此外，应用程序还可以使用数据绑定动态设置此外，应用程序还可以使用数据绑定动态设置属性值。属性值。16第第3 3章章 网网页页设设计计3.4.2ASP.NETTextBox控件控件属性描述.NETAutoCompleteType规定TextBox控件的AutoComplete行为。2.0AutoPostBack布尔值，规定当内容改变时，是否回传到服务器。默认是false。1.0CausesValidation规定当Postback发生时，是否验证页面。2.0Column
13、stextbox的宽度。1.0MaxLength在textbox中所允许的最大字符数。1.0ReadOnly规定能否改变文本框中的文本。1.0Rowstextbox的高度（仅在TextMode=Multiline时使用）。1.0runat规定该控件是否是服务器控件。必须设置为server。TagKeyTexttextbox的内容。1.0TextMode规定TextBox的行为模式（单行、多行或密码）。1.0ValidationGroup当Postback发生时，被验证的控件组。Wrap布尔值，指示textbox的内容是否换行。1.0OnTextChanged当textbox中的文本被更改时，被
14、执行的函数的名称。17第第3 3章章 网网页页设设计计3.4.3Button控件控件uButton:执行任务执行任务uLinkButton:与与Button控件功能相同，但具控件功能相同，但具有超级链接的外观。有超级链接的外观。uImageButton:与与Button控件功能相同，但控件功能相同，但按钮上显示的是图像而不是文本按钮上显示的是图像而不是文本uHyperLink:创建创建Web导航链接导航链接18第第3 3章章 网网页页设设计计3.4.6列表选择框列表选择框uDropDownList(组合框组合框)n允许用户从列表中选择其中的项允许用户从列表中选择其中的项nItems属性。属性。
15、nSelectItem属性属性nSelectValue属性属性uListBox（列表框）（列表框）n显示选择列表。允许多项选择显示选择列表。允许多项选择nSelectionMode属性属性nItemsi.selected19第第3 3章章 网网页页设设计计3.4.7ASP.NETCheckBox控件控件属性描述.NETAutoPostBack规定在Checked属性已改变后，是否立即向服务器回传表单。默认是false。1.0CausesValidation规定点击Button控件时是否执行验证。2.0Checked规定是否已选中该复选框。1.0InputAttributes该CheckBox控
16、件的Input元素所用的属性名和值的集合。2.0LabelAttributes该CheckBox控件的Label元素所用的属性名和值的集合。2.0runat规定该控件是服务器控件。必须被设置为server。1.0Text与CheckBox关联的文本标签。1.0TextAlign与CheckBox控件关联的文本标签的对齐方式。(right或left)1.0ValidationGroup在CheckBox控件回发到服务器时要进行验证的控件组。2.0OnCheckedChanged当Checked属性被改变时，被执行函数的名称。20第第3 3章章 网网页页设设计计3.4.8ASP.NETRadioB
17、utton控件控件属性描述AutoPostBack布尔值，规定在Checked属性被改变后，是否立即回传表单。默认是false。Checked布尔值，规定是否选定单选按钮。id控件的唯一id。GroupName该单选按钮所属控件组的名称。OnCheckedChanged当Checked被改变时，被执行的函数的名称。runat规定该控件是服务器控件。必须设置为server。Text单选按钮旁边的文本。TextAlign文本应出现在单选按钮的哪一侧（左侧还是右侧）。21第第3 3章章 网网页页设设计计3.5Web表单验证控件表单验证控件控件描述RequiredFieldValidator使用户在输
18、入时，不是使这一项为空CompareValidator对两个控件的值进行比较RangeValidator对输入的值进行控制，使其值界定在一定范围内RegularExpressionValidator把用户输入的字符和自定义的表达式进行比较CustomValidator自定义验证方式ValidationSummary在一个页面中显示总的验证错误22第第3 3章章 网网页页设设计计3.5.1RequiredFieldValidator控件控件属性描述BackColorRangeValidator控件的背景颜色ControlToValidate要验证的控件的idDisplay验证控件的显示行为。合法
19、的值有：None-验证消息从不内联显示。Static-在页面布局中分配用于显示验证消息的空间。Dynamic-如果验证失败，将用于显示验证消息的空间动态添加到页面。EnableClientScript布尔值，规定是否启用客户端验证。Enabled布尔值，规定是否启用验证控件。ErrorMessage当验证失败时，在ValidationSummary控件中显示的文本。注释：如果未设置Text属性，文本也会显示在该验证控件中。ForeColor该控件的前景色。id控件的唯一id。InitialValue规定输入控件的初始值（开始值）。默认是。IsValid布尔值，指示关联的输入控件是否通过验证。r
20、unat规定该控件是一个服务器控件。必须设置为server。Text当验证失败时显示的消息。23第第3 3章章 网网页页设设计计3.5.2RangeValidator控件控件属性描述BackColorRangeValidator控件的背景颜色ControlToValidate要验证的控件的idDisplay验证控件的显示行为。合法的值有：None-验证消息从不内联显示；Static-在页面布局中分配用于显示验证消息的空间。；Dynamic-如果验证失败，将用于显示验证消息的空间动态添加到页面。EnableClientScript布尔值，规定是否启用客户端验证。Enabled布尔值，规定是否启用
21、验证控件。ErrorMessage当验证失败时，在ValidationSummary控件中显示的文本。注释：如果未设置Text属性，文本也会显示在该验证控件中。ForeColor该控件的前景色。id控件的唯一id。IsValid布尔值，指示关联的输入控件是否通过验证。MaximumValue规定输入控件的最大值。MinimumValue规定输入控件的最小值。runat规定该控件是一个服务器控件。必须设置为server。Type规定要检测的值的数据类型。类型有：Currency、Date、DoubleInteger、StringText当验证失败时显示的消息。24第第3 3章章 网网页页设设计计
22、3.5.3ValidationSummary控控件件属性描述DisplayMode如何显示摘要。合法值有：BulletList、List、SingleParagraphEnableClientScript布尔值，规定是否启用客户端验证。Enabled布尔值，规定是否启用验证控件。ForeColor该控件的前景色。HeaderTextValidationSummary控件中的标题文本。id控件的唯一id。runat规定该控件是一个服务器控件。必须设置为server。ShowMessageBox布尔值，指示是否在消息框中显示验证摘要。ShowSummary布尔值，规定是否显示验证摘要。25第第3
23、3章章 网网页页设设计计3.5.4CompareValidator控件控件属性描述BackColorCompareValidator控件的背景颜色。ControlToCompare要与所验证的输入控件进行比较的输入控件。ControlToValidate要验证的输入控件的ID。Display验证控件中错误信息的显示行为。合法值是：None验证消息从不内联显示。Static在页面布局中分配用于显示验证消息的空间。Dynamic如果验证失败，将用于显示验证消息的空间动态添加到页面。EnableClientScript布尔值，规定是否启用客户端验证。Enabled布尔值，规定是否启用验证控件。Err
24、orMessage当验证失败时在ValidationSummary控件中显示的文本。注释：如果未设置Text属性，此文本将显示在验证控件中。ForeColor控件的前景颜色。id控件的唯一ID。IsValid布尔值，指示由ControlToValidate指定的输入控件是否通过验证。Operator要执行的比较操作的类型。运算符是：Equal、GreaterThan、GreaterThanEqual、LessThan、LessThanEqual、NotEqual、DataTypeCheckrunat规定控件是服务器控件。必须设置为server。Text当验证失败时显示的消息。Type规定要对比
25、的值的数据类型。类型有：Currency、Date、Double、Integer、StringValueToCompare一个常数值，该值要与由用户输入到所验证的输入控件中的值进行比较。26第第3 3章章 网网页页设设计计3.5.5RegularExpressionValidator控件控件属性描述BackColorRangeValidator控件的背景颜色ControlToValidate要验证的控件的idDisplay验证控件的显示行为。合法的值有：None-验证消息从不内联显示；Static-在页面布局中分配用于显示验证消息的空间；Dynamic-如果验证失败，将用于显示验证消息的空间动
26、态添加到页面。EnableClientScript布尔值，规定是否启用客户端验证。Enabled布尔值，规定是否启用验证控件。ErrorMessage当验证失败时，在ValidationSummary控件中显示的文本。注释：如果未设置Text属性，文本也会显示在该验证控件中。ForeColor该控件的前景色。id控件的唯一id。IsValid布尔值，指示关联的输入控件是否通过验证。runat规定该控件是一个服务器控件。必须设置为server。Text当验证失败时显示的消息。ValidationExpression规定验证输入控件的正则表达式。在客户端和服务器上，表达式的语法是不同的。27第第3
27、 3章章 网网页页设设计计3.5.6CustomValidator控件控件属性描述BackColorCustomValidator控件的背景颜色。ClientValidationFunction规定用于验证的自定义客户端脚本函数的名称。注释：脚本必须用浏览器支持的语言编写，比如VBScript或JScript使用VBScript的话，函数必须位于表单中：SubFunctionName(source,arguments)使用JScript的话，函数必须位于表单中：FunctionFunctionName(source,arguments)ControlToValidate要验证的输入控件的id。
28、Display验证控件中错误信息的显示行为。合法的值有：None-验证消息从不内联显示。Static-在页面布局中分配用于显示验证消息的空间。Dynamic-如果验证失败，将用于显示验证消息的空间动态添加到页面。EnableClientScript布尔值，该值指示是否启用客户端验证。Enabled布尔值，该值指示是否启用验证控件。ErrorMessage验证失败时ValidationSummary控件中显示的错误信息的文本。注释：如果设置了ErrorMessage属性但没有设置Text属性，则验证控件中也将显示ErrorMessage属性的值。ForeColor控件的前景色。id控件的唯一id。IsValid布尔值，该值指示关联的输入控件是否通过验证。OnServerValidate规定被执行的服务器端验证脚本函数的名称。runat规定该控件是服务器控件。必须设置为server。Text当验证失败时显示的文本。28