HTML和WEB控件区别.doc

155第5章 HTML控件和Web服务器控件第5章 HTML控件和Web服务器控件在ASP.NET中，一切都是对象。Web页面就是一个对象的容器。那么，这个容器可以装些什么东西呢？这一节我们学习HTML控件和Web服务器端控件，叫做Control。这是Web页面能够容纳的对象之一。Control是一个可重用的组件或者对象，这个组件不但有自己的外观，还有自己的数据和方法，大部分组件还可以响应事件。通过微软的集成开发环境(Visual Studio.NET 2003)，可以简单地把一个Control拖放到一个Form中。为什么会有HTML控件和Web服务器端控件之分呢？这是因为一些Control是在服务器端存在的。服务器端控件有自己的外观，在客户端浏览器中，Server Control的外观由HTML代码来表现。Server Control会在初始化时，根据客户的浏览器版本，自动生成适合浏览器的HTML代码。5.1 HTML控件HTML控件由HTML标记衍生而来，HTML控件在外形上与普通的HTML标记很相似，几乎所有的HTML标记加上runat=Server这个Server控件的标识属性后，都可以变成HTML控件。它们之间最大的区别就是HTML可以通过服务器端的代码来控制。下面以一个超级链接控件(HtmlAnchor)为例来看一下。可以在WebForm1.aspx上定义一个HtmlAnchor控件：欢迎来到微软中国上面的这段代码就是定义的一个HTML控件，它与普通的标记相比，区别仅仅是添加了runat=server属性。5.1.1 HTML控件的优点ASP允许我们在服务器上使用组件，这些组件能够产生反馈给用户的页面。ASP.NET通过控件扩展了这一概念。将任何HTML元素转换为服务器控件所需要的只是一个附加的属性：runat=Server。ASP.NET将在服务器上处理这些元素，并可以产生适合各种特定用户的输出。另外，我们可以通过HTML和表单控制元素做其他事情，如编写代码处理进出服务器期间的状态。这使得编写程序不再那么枯燥乏味，同时也提高了工作效率。总结起来，HTML控件主要优点有以下两个方面：1) HTML控件将HTML标注对象化，可以让程序直接控制并设定其属性，这样一来程序代码和HTML控件分开，程序的架构就不会显得杂乱无章而不好管理。2) HTML控件对事件的支持，以事件触发方式来编写程序，使得网页编程变得更加简单。例5.1 利用程序直接控制并设定HTML控件属性。首先定义一个普通的HTML标记： 这个标记不会产生任何有意义的显示结果。同样也建立一个不会有任何显示结果的HtmlAnchor控件： 这里需要注意：HTML控件比HTML标注多了ID以及runat这两种属性。ID属性表示程序是以本属性来控制对象的，所以任何对象的名称不可重复，不管它们是否为同一种类。而runat属性表示这个对象是在Server端执行，所有的HTML控件都必须加上这个属性设定值；倘若该对象在程序执行时不需要被程控，则可以忽略ID属性的设定。初始化时，两者处于同一状态，均不会输入任何显示结果。此时，普通的anchor标记是没有办法再让自身输出“可视”的显示，它在程序中作用为零。而HtmlAnchor控件则不同，它的作用并没有受到丝毫的影响。程序依然可以在Page_load事件中设置它的各种属性它依然可以展示它所有的功能。其HTML代码如下所示： public void Page_Load(object sender, System.EventArgs e) anchor1.HRef=/china; anchor1.Target=_blank; anchor1.InnerHtml=欢迎来到微软中国; 运行结果如图5.1所示。我们通过查看这个页面的源文件可以发现在客户端，HtmlAnchor控件生成的还是普通的HTML标记。欢迎来到微软中国图5.1 HtmlAnchor控件在Page_load事件中的运行结果这说明，HtmlAnchor控件是在服务器上执行后产生的标准HTML代码，然后再发送至客户端。了解HTML控件可以直接被程序所控制后，再来看看HTML控件对事件的支持。例5.2 以Button的OnServerClick为例：标记在服务器上执行显示与标记的显示相同，两者都生成标准的Button按钮。但是比标记的功能强大，它能够通过Javascript代码来控制Button按钮的显示。现在又在又在页：118改为“又在”标记中添加了id与runat=server属性使之成为Html控件，于是它的属性使页：118改为“便”由服务器来操纵了。注意，HtmlButton控件的触发事件不再是OnClick，而应当是OnServerClick。从字面上能看出，OnServerClick表示事件是发生在服务器端。 HtmlButton示例 public void button_click(object sender, EventArgs e) /定向到/china地址 Response.Redirect(/china); 欢迎来到微软中国 运行结果图5.2所示。图5.2 HtmlButton控件的运行界面当单击Button按钮时，将会触发OnServerClick事件，并且执行Button_Click事件处理，将页面转移至http//china。这里要注意：1) Button_Click这个事件程序中宣告了对象型态的变量Sender及事件参数e，分别表示是由哪个对象发出事件，以及发生事件时的相关信息；每个事件程序中都要加入(Object Sender, EventArgs e)这两个参数宣告。2) Button类控件必须放在HtmlForm控件( )之间，否则程序运行时会报错。如果没有这个HtmlForm控件，ASPNet页：119改为“ASP.NET”执行时不会产生，标记，那么程序不会产生请求过程。5.1.2 HTML控件架构当ASP.NET网页执行时，会检查标注有无Runat属性。如果标注没有设定这个属性，那么该标注就会被视为字符串，并被送到字符串流等待送到客户端的浏览器进行解译。如果标注有设定runat=Server属性，那么就会依照该标注所对应的HTML控件来产生对象，所以ASP.NET对象的产生是由runat属性值所决定的。当程序在执行时解析到有指定runat=Server属性的标注时，Page对象会将该控件从.NET共享类别库页：119改为“类库”加载，并列入控制架构中，表示这个控件可以被程序所控制。等到程序执行完毕后，再将HTML控件的执行结果转换成HTML标注，然后送到字符串流和一般标注一起下载至客户端的浏览器进行解译。所有的Html控件位于System.Web.UI.HtmlControls命名空间中，是从HtmlControl基类中直接或间接派生出来的。图5.3说明了HTML控件的类层次结构。表5.1中列出了HTML控件以及对应的HTML标记。表5.1 HTML控件以及对应的HTML标记控件对应的标记HtmlAnchoraHtmlButtonbuttonHtmlSelectselectHtmlTextAreatextareaHtmlInputButtoninput type=buttonHtmlInputCheckBoxinput type=checkHtmlInputRadioButtoninput type=radioHtmlInputTextinput type=text 和 input type=passwordHtmlInputHiddeninput type=hiddenHtmlInputImageinput type=imageHtmlInputFileinput type=fileHtmlFormformHtmlImageimgHtmlTabletableHtmlTableRowtrHtmlTableCelltdHtmlGenericControl任何其他没有对应控件的标记，如 span、div 等图5.3 HTML控件的类层次结构5.1.3 HTML控件常用属性 Sty1e属性由于Html控件均由普通HTML标记衍生面来页：121改为“衍生而来”，所以，定义HTML标记样式表的方法同样适用于Html控件： a style=Golor:#008000;font-size:10pt;text-decoration:none:font-style:italic href=http：//china runat=serverhttp:/ /china上面为HtmlAnchor控件定义的样式表与普通标记的样式定义是相同的。共显示结果也没有丝毫差别。ASP.NET为每个Html控件提供了一个Sty1e的属性，Style属性实际上是一个样式表属性集合，通过设置Style中的属性，能通过程序代码在程序执行过程中改变Html控件的样式。表5.2列出Style属性可以设定的样式。表5.2 Style属性可以设定的样式样式名称说 明设 定 值Background-Color背景色RGB 值或指定颜色Color前景色RGB 值或指定颜色Font-Family字型标楷体Font-Size字体大小20ptFont-Style斜体Italic(斜体)或Normal(一般)Font-Weight粗体Bold(粗体)或Normal(一般)Text-Decoration效果Underline(底线)、Strikethrough(穿越线)、Overline(顶线)或是None(无)Text-Transform转大小写Uppercase(全转大写)、Lowercase(全转小写)、Initial Cap(前缀大写)或是None(无)例5.3 通过程序来控制Html控件的Style属性： public void Page_Load(object src, EventArgs e) /指定超级链接的属性 Anchor1.Stylecolor= #008000; Anchor1.Stylefont-size=20pt; Anchor1.Styletext-decoration= none; Anchor1.Stylefont-style= italic; http:/ /china 它所显示的结果与直接定义Style是一样的。 Attributes属性Attributes属性实质上是一个Server控件(包括Html控件、Web控件、用户控件)的属性集合。控件的属性值与属性值可以通过Attributes任意指定，ASP.NET程序会将其原样发送到浏览器解释。这里有三点需要注意：1) 因为可以任意指定属性，所以对于控件来说，有些指定的属性是不合法的，那么这 种页：122去掉空格属性是无效的。如：假设当前操作的控件为HtmlImage，名为imagel。假设通过Attribute给其指定一个Text属性，属性值为“你好”。因为HtmlImage控件将会被转化为标记，而指定的Text属性将按原样发送，所以就会出现这种代码，显然，标记根本没有Text，所以这个属性将会被浏览器忽略，不予理睬。2) 指定属性必须为Server控件对应的HTML标记所支持的属性，否则浏览器也会将会不能达到。例如：HtmlImage控件有Title属性，它的作用是当图像没有正确加载时，显示在图像位置的文字，可以通过HtmtImage.Title描述文字设置。通常所犯的错误就是在Attributes设置时，直接使用Title，如：Htm1Image.Attributes“Title”= 描述文字 (这是错误的)3) 按照原样发送的规则，那么发送至浏览器的代码就会是而标记中没有Title属性，所以这个属性也是不合法的。正确的设置方法是：HtmlImage.Attributes“alt”= 描述文字 (正确)例5.4 使用Attributes属性确定HtmlSelect控件的特性。 public void Page_Load(object sender, EventArgs e) Message.InnerHtml = 选择框的属性集包括:; IEnumerator keys = Select.Attributes.Keys.GetEnumerator(); while (keys.MoveNext() String key = (String)keys.Current; Message.InnerHtml += key + = + Select.Attributeskey + ; Html控件Attribute集示例 请选择: 选项1 选项2 选项3 运行的结果如图5.4所示。图5.4 Html控件Attributes属性运行结果 Visible属性Visible属性可以让一个对象的视觉元素消失，换句话说就是将对象隐藏起来让使用者看不到。例5.5 在Page_Load事件中将名为Anchor1的超级链接控件隐藏起来，待使用者按下Button1按钮后再将其Visible属性设为True： public void Page_Load(Object src, EventArgs e) Anchor1.Visible=false; public void Button1_Click(Object Sender, EventArgs e) Anchor1.Visible=true; 出现的Anchor控件 开始的界面如图5.5所示。图5.5 Html控件Visible属性运行开始界面点击Click按钮后的界面如图5.6所示。图5.6 Html控件Visible属性运行结果 Disabled属性Disabled属性被称为禁止功能。禁止功能就是将一个对象的功能关闭，让对象暂时无法执行工作。所以，如果将对象的Disabled属性设为True时，该对象会显示为灰色并且停止工作。只有将Disabled属性设回False，该控件即才页：124改为“才”可正常工作。以Button对象为例，若该对象的Disabled属性被设定为True，则按钮无法被按下。例5.6 public void Page_Load(object sender, EventArgs e) Button1.Disabled=true; 程序执行结果如图5.7所示。图5.7 Html控件Disabled属性运行界面 InnerHtml属性及InnerText属性使用InnerHtml属性以编程方式修改HTML服务器控件的开始和结束标记中的内容。InnerHtml属性不自动对进出HTML实体的特殊字符进行编码。HTML实体允许显示特殊字符(如字符)，浏览器通常会将这些字符解释为具有特殊含义。字符会被解释为标志的开头，并且不会在页面上显示。若要显示字符，将需要使用实体<。使用InnerText属性以编程方式修改HTML服务器控件的开始和结束标记之间的内容。与InnerHtml属性不同，InnerText属性自动对进出HTML实体的特殊字符进行编码。例5.7 两个控件的属性假设都为试验，对于InnerHtml属性而言会将其中的标注加以解译，所以显示出粗体的文字；而对于InnerText属性而言不会将其中的标注加以解译，所以会将试验一五一十的显示出来： public void Page_Load(object sender, EventArgs e) Sp1.InnerHtml=InnerHtml 测试; Sp2.InnerText=InnerText 测试; public void Button1_Click(object sender,EventArgs e) Sp1.InnerHtml=测试; Sp2.InnerText=测试; 程序执行结果如图5.8所示。图5.8 Html控件InnerHtml、InnerText属性运行开始界面点击按钮后的运行结果如图5.9所示。图5.9 Html控件InnerHtml、InnerText属性运行结果5.1.4 基本HTML控件HTML控件在集成开发环境Visual Studio.NET的控件工具箱中有对应图标，如图5.10所示。使用时可直接拖放到Web页面上。页面中已经拖放了几个HTML控件。图5.10 Visual Studio.NET控件工具箱中对应的Html控件 HtmlTextArea控件 HtmlTextArea控件在控件工具箱中图标为：，该控件可以在Web页上创建多行文本框。使用此控件以编程方式操作HTML元素。此类可以通过分别设置Rows和Cols属性来控制多行文本框的高度和宽度。还可以通过设置Name属性为该控件分配一个名称。若要确定或指定文本框中的文本，请使用Value属性。HtmlTextArea类提供一个ServerChange事件，可以在每次文本框的值在向服务器的各次发送过程之间更改时执行自定义指令集。此事件通常用于数据验证。如果要创建单行文本框，即可使用HtmlInputText控件。例5.8 使用HtmlTextArea控件创建多行文本框。 void SubmitBtn_Click(Object sender, EventArgs e) Span1.InnerHtml = 您写的内容是: + TextArea1.Value; HtmlTextArea示例 请输入你的内容: 运行时的初始界面如图5.11所示。在textarea中输入内容后，点击提交，运行后界面如图5.12所示。图5.11 HtmlTextArea控件运行初始界面图5.12 HtmlTextArea控件运行结果界面 HtmlTable控件HtmlTable控件的主要用来生成表(Table)，该控件在工具箱中的图标为：。可以使用HtmlTable、HtmlTableRow、HtmlTableCell控件来自由地控制表格的行、列数。通过HtmlTableRow trnew HtmlTableRow()就可以生成一个新行；通过HtmlTableCell tdNew HtmlTableCell()就可以生成一个新列。然后再分别加入Rows和Cells集合。程序HtmlTable.aspx演示它们的用法。 HtmlTable示例 void page_load(Object sender, EventArgs e) int row=0; int numrows=Int32.Parse(Select1.Value); int numcells=Int32.Parse(Select1.Value); for(int j=0;jnumrows;j+) HtmlTableRow r= new HtmlTableRow(); if(row%2=1) r.BgColor=red; row+; for(int i=0;inumcells;i+) HtmlTableCell c= new HtmlTableCell(); c.Controls.Add(new LiteralControl(行+j.ToString()+,列+i.ToString(); r.Cells.Add(c); Table1.Rows.Add(r); 行数 1 2 3 4 5 列数 1 2 3 4 5 运行结果如图5.13所示。图5.13 HtmlTable控件运行结果界面 HtmlImage控件使用该控件可以在Web页上显示图像，在控件工具箱中图标为：。可以用编程方式操作HtmlImage控件来更改显示的图像、图像大小及图像相对于其他页元素的对齐方式。Src属性：设定需要显示的图像文件。Align属性：图像在父容器中的显示位置页：131取消下划线Alt属性：当图像没有正确加载时，在图像位置显示的文字。Border属性：设定图像边界宽度，当其值为0时，表示没有边界。Height、Width出属性：设定图像的长、宽值。例5.9 当单击HtmlButton时以编程方式修改HtmlImage控件的属性。 public void Image1_Click(