国家科技创新平台规划Read课件.ppt

1、上海交通大学出版社上海交通大学出版社2内容 本章主要介绍了本章主要介绍了ASP.NET中几种基本中几种基本的的HTML控件和控件和Web 服务器控件服务器控件,详细介绍详细介绍了各控件的基本属性及使用方法了各控件的基本属性及使用方法.35.1 HTML控件 HTML控件由HTML标记衍生而来，HTML控件在外形上与普通的HTML标记很相似，几乎所有的HTML标记加上runat=“Server”这个Server控件的标识属性后，都可以变成HTML控件。它们之间最大的区别就是HTML可以通过服务器端的代码来控制。45.1.1 HTMLHTML控件的优点控件的优点 HTML控件将HTML标注对象化，

2、可以让程序直接控制并设定其属性，这样一来程序代码和HTML控件分开，程序的架构就不会显的杂乱无章而不好管理。55.1.1 HTMLHTML控件的优点控件的优点 HTML控件对事件的支持，以事件触发方式来编写程序，使得网页编程变得更加简单。65.1.2 HTML控件架构 HTML控件的执行过程：转换成HTML标注ASPX文件检查标注是否有runat=“server”字串流加载器公共类库HTML控制项执行是否75.1.2 HTML控件架构 所有的Html控件位于System.Web.UI.HtmlControls命名空间中，是从HtmlControl基类中直接或间接派生出来的。85.1.2 HTM

3、L控件架构95.1.3 HTML控件常用属性n Style属性n Attributes 属性n Visible 属性n Disabled 属性n InnerHtml属性及InnerText属性 105.1.3.1 Style属性 ASP.NET为每个Html控件提供了一个Sty1e的属性，Style属性实际上是一个样式表属性集合，通过设置Style中的属性，能通过程序代码在程序执行过程中改变Html控件的样式。115.1.3.1 Style属性Style属性可以设定的样式：样式名称 说 明 设 定 值 Background-Color背景色RGB 值或指定颜色 Color前景色RGB 值或指定

4、颜色 Font-Family字型标楷体 Font-Size字体大小20pt Font-Style斜体Italic(斜体)或Normal(一般)Font-Weight粗体Bold(粗体)或Normal(一般)Text-Decoration效果Underline(底线)、Strikethrough(穿越线)、Overline(顶线)或是None(无)Text-Transform转大小写Uppercase(全转大写)、Lowercase(全转小写)、Initial Cap(前缀大写)或是None(无)125.1.3.1 Style属性例：通过程序来控制Anchor1控件的Style属性：public

5、 class WebForm1:System.Web.UI.Pageprivate void Page_Load(object sender,System.EventArgs e)/在此处放置用户代码以初始化页面/指定超级链接的属性Anchor1.Stylecolor=#008000;Anchor1.Stylefont-size=10pt;Anchor1.Styletext-decoration=none;Anchor1.Stylefont-style=italic;135.1.3.2 Attributes属性 Attributes属性实质上是一个控件(包括Html控件、Web控件、用户控件)

6、的属性集合。控件的属性值与属性值可以通过Attributes任意指定，ASP.NET程序会将其原样发送到浏览器解释。145.1.3.2 Attributes属性Attributes属性使用时有两点需要注意：1.因为可以任意指定属性，所以对于控件来说，有些指定的属性是不合法的，那么这种属性是无效的。2.指定属性必须为控件对应的HTML标记所支持的属性，否则浏览器也会将会不能达到。155.1.3.2 Attributes属性例：使用Attributes属性确定HtmlSelect控件的特性：public class WebForm1:System.Web.UI.Pageprivate void P

7、age_Load(object sender,System.EventArgs e)Message.InnerHtml=选择框的属性集包括:;IEnumerator keys=Select.Attributes.Keys.GetEnumerator();while(keys.MoveNext()String key=(String)keys.Current;Message.InnerHtml+=key+=+Select.Attributeskey+;165.1.3.3 Visible属性 Visible属性可以让一个对象的视觉元素消失，换句话说就是将对象隐藏起来让使用者看不到。175.1.3.

8、3 Visible属性例：在Page_Load事件中将名为Anchor1的超级链接控件隐藏起来，待使用者按下Button1按钮后再将其Visible属性设为True：private void Page_Load(object sender,System.EventArgs e)/在此处放置用户代码以初始化页面 Anchor1.Visible=false;private void Button1_Click(object sender,System.EventArgs e)Anchor1.Visible=true;185.1.3.4 Disabled属性 Disabled属性被称为禁止功能。就是

9、将一个对象的功能关闭，让对象暂时无法执行工作。如果将对象的Disabled属性设为True时，该对象会显示为灰色并且停止工作。只有将Disabled属性设回False，该控件才可正常工作。195.1.3.5InnerHtml、InnerText属性 使用InnerHtml属性以编程方式修改HTML服务器控件的开始和结束标记中的内容。使用InnerText属性以编程方式修改HTML服务器控件的开始和结束标记之间的内容。205.1.3.5InnerHtml、InnerText属性例：两个控件的属性假设都为试验，对于InnerHtml属性而言会将其中的标注加以解译，所以显示出粗体的文字；而对于Inn

10、erText属性而言不会将其中的标注加以解译，所以会将试验一五一十的显示出来：215.1.3.5InnerHtml、InnerText属性private void Page_Load(object sender,System.EventArgs e)/在此处放置用户代码以初始化页面Sp1.InnerHtml=测试;Sp2.InnerText=测试;private void Button1_Click(object sender,System.EventArgs e)Sp1.InnerHtml=测试;Sp2.InnerText=测试;225.1.3.5InnerHtml、InnerText属性B

11、utton1按下后的效果图：235.1.4 基本的HTML控件n HtmlTextArea控件 n HtmlTable控件 n HtmlImage控件 n HtmlButton控件 n HtmlSelect控件 n HtmlForm控件 n HtmlInput控件 245.1.4.1 HtmlTextArea控件HtmlTextArea控件可以在Web页上创建多行文本框。1.可以通过分别设置Rows和Cols属性来控制多行文本框的高度和宽度。2.可以通过设置Name属性为该控件分配一个名称。3.若要确定或指定文本框中的文本，可使用Value属性。4.HtmlTextArea类提供一个Serve

12、rChange事件，可以在每次文本框的值在向服务器的各次发送过程之间更改时执行自定义指令集。255.1.4.1 HtmlTextArea控件例：使用HtmlTextArea控件创建多行文本框：Html代码：HtmlTextArea示例 请输入你的内容:265.1.4.1 HtmlTextArea控件C#代码：private void Submit1_ServerClick(object sender,System.EventArgs e)Span1.InnerHtml=您写的内容是:+TextArea1.Value;275.1.4.1 HtmlTextArea控件运行结果图：285.1.4.2

13、 HtmlTable控件 使用 HtmlTable 控件以编程方式控制服务器上的 HTML 元素。可以使用这个控件在 Web 页上创建表。通过设置 BgColor、Border、BorderColor、Height 和 Width 属性可以动态更改 元素的外观。还可以通过设置 Align、CellPadding 和 CellSpacing 属性来控制单元格内容的显示方 式。HtmlTable 控件的行存储在该控件的 Rows 属性中。这样可以以编程方式访问表中的各行。295.1.4.2 HtmlTable控件基本属性包括：n Border：获取或设置 HtmlTable 控件的边框宽度（以像素

14、为单位）。n Height：获取或设置 HtmlTable 控件的高度。n Rows：获取 HtmlTableRowCollection，它包含 HtmlTable 控件中的所有行。n Width：获取或设置 HtmlTable 控件的宽度。n CellPadding：获取或设置 HtmlTable 控件中单元格内容和单元格边框之间的空间量（以像素为单位）。n CellSpacing：获取或设置 HtmlTable 控件中相邻单元格之间的空间量（以像素为单位）。305.1.4.3 HtmlImage控件使用该控件可以在Web页上显示图像，可以用编程方式操作 HtmlImage 控件来更改显示的

15、图像、图像大小及图像相对于其他页元素的对齐方式。315.1.4.3 HtmlImage控件基本属性包括：n Src属性：设定需要显示的图像文件。n Align属性：图像在父容器中的显示位置。n Alt属性：当图像没有正确加载时，在图像位置显示的文字。n Border属性：设定图像边界宽度，当其值为0时，表示没有边界。n Height、Width出属性：设定图像的长、宽值。325.1.4.4 HtmlButton控件 可以使用 HtmlButton 控件对 HTML 元素进行编程。可以为 HtmlButton 控件的 ServerClick 事 件 提 供 自 定 义 代 码，以 指 定 在 单

16、 击 该 控件时执行的操作。335.1.4.4 HtmlButton控件将样式添加到将样式添加到 HtmlButton 控件控件：1.在 Web 窗体页上声明 HtmlButton 控件：2.在该控件的开始标记中，包含样式属性并声明希望该按钮显示的样式。style=font:8pt verdana;background-color:lightgreen;border-color:black;height=30;width:100345.1.4.4 HtmlButton控件 在 HtmlButton 控件中包含格式化的文本、图像或其他 Web 窗体控件：1.在 Web 窗体页上声明 HtmlBu

17、tton 控件。2.用控件的开始和结束标记之间的格式化标记声明文本。Click Me!3.在控件的开始和结束标记之间，包含希望显示的图像或控件的标记。355.1.4.5 HtmlSelect控件 使用 HtmlSelect 控件对 HTML 元素进行编程。默认情况下，此控件呈现为下拉列表框。但是，如果允许多重选择（通过指定 Multiple 属性）或为 Size 属性指定大于 1 的值，则该控件将显示为列表框。365.1.4.5 HtmlSelect控件n 若要确定单选 HtmlSelect 控件中的选定项，首先使用 SelectedItem 属性获取选定项的索引。然后，可以使用此索引从 It

18、ems 集合中检索选定项。n 若要确定允许同时进行多重选择的 HtmlSelect 控件中的选定项，则需要循环访问 Items 集合并测试每项的 Selected 属性。n 还可以将该控件绑定到数据源。设置 DataSource 属性以指定要将其绑定到该控件的数据源。然后可以通过设置 DataValueField 和DataTextField 属性，分别指定将哪个字段绑定到 Value 和 Text 属性。375.1.4.5 HtmlSelect控件常用属性包括：n Items：获取一个集合，该集合包含在 HtmlSelect 控件中列出的项。n SelectedIndex：获取或设置 Htm

19、lSelect 控件中的选定项的序号索引。n Value：获取 HtmlSelect 控件中选定项的值或将该控件的 SelectedIndex 属性设置为具有指定值的列表中的第一个项的索引。n Size：获取或设置 HtmlSelect 控件的高度（以行为单位）。385.1.4.5 HtmlSelect控件常用属性包括：n DataMember：要从具有多个数据集的 DataSource 获取或设置要绑定到 HtmlSelect 控件的数据集。n DataSource：获取或设置要绑定到 HtmlSelect 控件的信息源。n DataTextField：获取或设置 DataSource 中的

20、字段，该字段将绑定到 HtmlSelect 控件中各项的 ListItem.Text 属性。n DataValueField：获取或设置 DataSource 中的字段，该字段将绑定到 HtmlSelect 控件中各项的 ListItem.Value 属性。395.1.4.6 HtmlForm控件HtmlForm(窗体)控件是设计动态网页一个相当重要的组件，它可以将Client端的数据传送至Server端作处理。在窗体内的确认按钮被按下去后，只要被Form控件所包起来的数据输入控件都会被一并送到Server端，这时Server端收到这些数据及OnServerClick事件后会执行指定的事件程序

21、，并且将执行结果重新下载到Client端浏览器。405.1.4.6 HtmlForm控件常用属性包括：n Enctype：获取或设置将窗体的数据发送到服务器时浏览器使用的编码类型。n Method：获取或设置一个值，该值指示浏览器将窗体数据发送到服务器进行处理的方式。默认值是POST，而普通的默认请求方式是GET。如果Method 属性为Post(默认值)则表示由Server 端来抓取资料，如为Get 则表示由浏览器主动上传资料至Server端。415.1.4.7 HtmlInput控件HtmlInput控件会因为Type属性的设定而产生不同种类的控件Input type 主要的属性和事件主要

22、的属性和事件 button 事件onserverclick属性value：钮所显示的文字 submit reset checkbox 属性checked：是否被选取属性value：获取或设置与HtmlInputControl相关联的值 text 属性value：输入框内的文字属性maxlength：可输入的最大字符数 password radio 属性checked：是否被选取属性value：获取或设置与HtmlInputRadio相关联的值 hidden 属性value：获取或设置与HtmlInputHidden相关联的值 425.1.4.7 HtmlInput控件n HtmlInputBu

23、tton控件控件HtmlInputButton控件创建一个服务器端控件，该控件映射到、和HTML元素，并允许分别创建命令按钮、提交按钮或重置按钮。用户单击HtmlInputButton控件时，来自嵌有该控件的窗体的输入被发送到服务器并得到处理，然后，将响应发送回请求浏览器。435.1.4.7 HtmlInput控件n HtmlInputCheckBox控件控件 HtmlInputCheckBox控件创建服务器端控件，该控件映射到 HTML元素并允许创建使用户可以选择true或false状态的复选框控件，单击HtmlInputCheckBox控件时，该控件不会向服务器回送。当使用回送服务器的控件

24、(如HtmlInputButton控件)时，复选框的状态被发送到服务器进行处理。445.1.4.7 HtmlInput控件n HtmlInputText控件控件 HtmlInputText控件创建一个服务器端控件，该控件映射到和 HTML元素，并允许创建单行文本框以接收用户输入，与标准HTML一样，这些控件可用于在HTML窗体中输入用户名和密码。通过使用MaxLength、Size和Value属性，可以分别控制可输入的字符数、控件宽度和控件内容。455.1.4.7 HtmlInput控件n HtmlInputHidden控件控件 使用HtmlInputHidden控件对 HTML元素进行编程。

25、尽管此控件是窗体的一部分，但它永远不在窗体上显示。由于在 H T M L 中 不 保 持 状 态，此 控 件 通 常 与HtmlInputButton和HtmlInputText控件一起使用，以 在 对 服 务 器 的 发 送 之 间 存 储 信 息。465.1.4.7 HtmlInput控件n HtmlInputRadioButton控件 使用HtmlInputRadioButton控件对HTML 元素进行编程，通过将Name属性设置为组中所有元素所共有的值，可以将多个HtmlInputRadioButton控件组成一组。同组中的单选按钮互相排斥；一次只能选择该组中的一个单选按钮。HtmlR

26、adioButton控件不会自动向服务器回送。必须依赖于使用某个按钮控件来回送到服务器。可通过为ServerChange事件编写处理程序来对HtmlRadioButton控 件进行编程。475.2 WEB服务器控件可以使用ASP.NET服务器控件来取代使用代码块编写动态内容，实现Web页面编程。在.aspx文件中使用包含runat=”server”属性值的自定义标记来声明服务器控件。Web控件中包括传统的表单控件，如TextBox和Button，以及其他更高抽象级别的控件，如Calendar和DataGrid控件。485.2 WEB服务器控件它们提供了一些能够简化开发工作的特性，其中包括：n

27、丰富而一致的对象模型：WebControl基类实现了对所有控件通用的大量属性，包括ForeColor、BackColor、Font、Enabled等，有助于减少编程错误。n 对浏览器的自动检测：Web控件能够自动检测客户机浏览器的功能，并相应地调整它们所提交的HTML，从而充分发挥浏览器的功能。n 数据绑定：在Web窗体页面中，可以对控件的任何属性进行数据绑定。495.2 WEB服务器控件名称说明ClientIDASP.NET为control产生的ID。Controls传回一个ControlCollection对象，用来指示某一control内所包含的子controls(child contr

28、ols)。EnableViewState指示是否要维护此control的ViewState。IDControl的ID。NamingContainer用来找出某一control包含在何种对象之内。Page用来找出包含某一control的Page对象。Parent用来找出包含某一control的parent control。Site描述此control有关site的信息。TemplateSourceDirectory描述网页的virtual directory ToolTip当鼠标停留在该control时，所要显示的文字 UniqueID除了须列出该control的ID外，尚须列出所有包含该con

29、trol的objects名称。505.2 WEB服务器控件名称说明DataBind将资料安排进所指定的control，如DataGrid、DataList、Repeater等controls Dispose在control被毁之前做清除的工作。FindControl(string)在所为的container control中找出ID为string所描述的control。HasControls用来指示此control是否有child control。RenderControl(writer)将control的内容输出到HtmlTextWriter object中，HtmlTextWriter o

30、bject的类别用writer描述。515.2 WEB服务器控件名称说明DataBinding此事件被触发的时机为当有资料放入此 control时。Dispose当control从内存中移除时触发之。Init网页第一次被加载时触发之。Load网页每次被加载时触发之。PreRender每当信息写入客户端之前。Unload当网页结束执行时触发之。525.2.1 文本输入控件TextBox Web服务器控件为用户提供了一种向 Web 窗体页中键入信息（包括文本、数字和日期）的方法。535.2.1 文本输入控件常用基本属性：n Columns：获取或设置文本框的显示宽度（以字符为单位）。n MaxLe

31、ngth：获取或设置文本框中最多允许的字符数。n ReadOnly：获取或设置一个值，用于指示能否更改TextBox控件的内容。n TextMode：获取或设置TextBox控件的行为模式（单行、多行或密码）。545.2.2 选择控件n 复选控件n 单选控件555.2.2.1 复选控件CheckBox和CheckBoxList Web服务器控件为用户提供了一种在真/假、是/否或开/关选项之间切换的方法。当 CheckBox 控件的状态在向服务器的各次发送过程间更改时，将引发为 CheckedChanged 事件提供的事件处理程序，以便当 CheckBox 控件的状态在向服务器的各次发送过程间更

32、改时执行特定的任务。565.2.2.1 复选控件常用属性包括：n Checked：获取或设置一个值，该值指示是否已选中 CheckBox 控件。n Text：获取或设置与 CheckBox 关联的文本标签。n ID：获取或设置分配给服务器控件的编程标识符。n TextAlign：获取或设置与 CheckBox 控件关联的文本标签的对齐方式。575.2.2.2 单选控件RadioButton和RadioButtonList Web服务器控件允许用户从一个预定义的简短列表中选择一项。可以单独使用单选控件。通常是将两个或多个单独的按钮组合在一起。585.2.2.2 单选控件常用基本属性包括：n Ch

33、ecked：获取或设置一个值，该值指示是否已选中 CheckBox 控件。n GroupName：获取或设置单选按钮所属的组名。n ID：获取或设置分配给服务器控件的编程标识符。n Text：获取或设置与CheckBox关联的文本标签。595.2.2 列表控件列表框(ListBox)是在一个文本框内提供多个选项供用户选择的控件，它比较类似于下拉列表，但是没有显示结果的文本框。实际中列表框很少使用，大多数情况下都使用列表控件DropDownList来代替ListBox加文本框的情况。605.2.2 列表控件常用基本属性包括：n DataMember：获取或设置要绑定到控件的 DataSource

34、 中的特定表。n DataSource：获取或设置填充列表控件项的数据源。n DataTextField：获取或设置为列表项提供文本内容的数据源字段。n DataValueField：获取或设置为各列表项提供值的数据源字段。615.2.2 列表控件常用基本属性包括：n Items：获取列表控件项的集合。n Rows：获取或设置 ListBox 控件中显示的行数。n SelectedIndex：获取或设置列表中选定项的最低序号索引。n SelectedItem：获取列表控件中索引最小的选定项。n SelectedValue：获取列表控件中选定项的值，或选择列表控件中包含指定值的项。625.2.2

35、 列表控件 ListBox控件实际上是列表项的容器。每个列表项都是一个单独的对象，具有自己的属性：n Text：列表中显示的文本。n Value：与某个项关联的值。设置此属性将该值与特定的项关联而不显示该值。n Selected：布尔值，指示该项是否被选定。63总结本章首先介绍了服务器端的html控件，虽然它们的功能都可以以简单的html语言来实现，但是在ASP.NET中依然提供了对它们的实现。html文件依赖于服务器端对标识的解释执行，html控件却可以被编译执行，两者在效率上的差异不言而喻。第二节主要讲述了几个服务器端的控件、它们的校验、取值方法等，从中我们可以看到ASP.NET中各种控件功能是非常强大的。