HTML控件和Web服务器控件.ppt

ASP.NET程序设计教程 第5章 HTML控件和Web服务器控件,河南城建学院计算机科学与工程系,2,内容,本章主要介绍了ASP.NET中几种基本的HTML控件和Web 服务器控件,详细介绍了各控件的基本属性及使用方法.,3,ASPNET的四种服务器控件,服务器控件是Web表单的用户界面元素。ASPNET有四种服务器控件： HTML控件 Web服务器控件 有效性验证控件 用户控件,4,服务器控件：,HTML控件代表常规的HTML表单元素，如文本框和按钮，但它们是在服务器上创建的，您可以在服务器上控制它们。Web控件与此类似，但提供了更多的功能，可以提供更复杂的用户界面。有效性验证控件用于验证用户的输入。用户控件是自定义的控件，用于实现某些功能。有效性验证控件将在第6章介绍。 所有服务器控件都有属性、方法和事件。它们提供的功能比传统HTML表单元素多，使开发人员创建用户界面更容易。,5,服务器控件事件,服务器能引发多种事件。换句话说，用户可以对服务器控件执行许多操作：单击按钮、单击连接、填写文本框、选择列表框中的条目，等等。所有这些都要由服务器进行处理，每当事件发生时，客户都要向服务器发送信息。,6,服务器控件事件的主动与被动事件,注意：将被动用户事件与主动事件区别开来很重要。主动事件要求用户进行明确的操作，即用户必须进行有意识的操作，包括单击按钮或链接、填写文本框等。被动事件是用户无意中执行的操作，例如鼠标在图像上移动。 只有主动事件才会在服务器上进行处理，因为被动事件太多，无法将其所有的数据发送给服务器，不过可以通过客户端脚本来处理它们。,7,5. 1 HTML控件,以前我们介绍过一些基本的HTML标记，这些HTML标记在以往的静态网页或ASP 动态网页里即可满足我们的需求。但是标准的HTML标记并没有办法利用程序直接来控制它们的属性、使用方法和接收事件，程序员必须另外学习其它如JavaScript 等程序语言才得以控制这些HTML标记。ASP.NET 为动态网页程序设计带来了许多新的技术，这些技术其中之一就是将所有的HTML标记对象化，让程序可以直接控制；对象化之后的HTML标记我们称为HTML控件。,8,5. 1 HTML控件,HTML控件由HTML标记衍生而来，HTML控件在外形上与普通的HTML标记很相似，几乎所有的HTML标记加上runat=“Server”这个Server控件的标识属性后，都可以变成HTML控件。我们可以使用如VB.NET 或C# 等语言来撰写控制HTML 控件的程序，ASP.NET 把HTML标记对象化，可以让网页对象的互动、程序的写作及维护变的更轻松容易，也让执行的效率明显的改善不少。ASP.NET 将HTML标记对象化的好处，我们观察以下程序便了解：,9,HTML控件（例1）, 请按这里 传统的HTML标记无法利用程序直接控制，这是因为HTML标记当初设计时并没有彻底对象化；所以如果要动态的利用程序设定标记的属性，必需要插入ASP 程序才可以，如下所示：,10,HTML控件（例2）, 请按这里 ,11,HTML控件（例2注释）,ASP 网页设计师没有办法直接利用程控对象，所以必需在标记后面插入一些ASP 程序代码。这就是为什么以前的ASP 程序代码非常杂乱，常常会看到标记中插入许多叙述的程序，这样会导致程序代码在维护以及阅读上的困难。ASP.NET 为了要解决这种杂乱无章的程序写作风格，便将HTML标记对象化而产生出HTML 控件。HTML 控件可以让程序直接控制并设定其属性，如下范例所示：,12,HTML控件（例3）, 请按这里,成为对象了 void Page_Load() Anchor1.HRef=““; Anchor1.InnerHtml=“欢迎来到微软中国“; ,13,HTML控件（例3注释）,HTML 控件比HTML标记多了ID 以及Runat 这两种属性。ID 属性表示程序是以本属性来控制对象的，所以任何对象的名称不可重复，不管它们是否为同一种类。而Runat 属性表示这个对象是在Server 端执行，所有的HTML 控件都必须加上这个属性设定值；倘若该对象在程序执行时不需要被程控，则可以忽略ID 属性的设定。 在VS.NET中利用HTML标记变为HTML控件,14,HTML 控件对事件的支持：,我们知道网页在被加载时会先触发Page_Load事件，此时我们就可以利用这个事件进行对象的初值化，以及从数据库抓数据回来等工作，所以我们在Page_Load 事件程序中利用程序指定超级链接控件Anchor1 的HRef 属性。这样一来程序代码和HTML 控件分开，程序的架构就不会显的杂乱无章而不好管理。 了解HTML 控件可以直接被程序所控制后，我们再来了解HTML 控件对事件的支持：,15,HTML 控件对事件的支持（示例）, 改变字体；成了对象（控件）。 原来的字体 (接下页）,16,HTML 控件对事件的支持（续）,（接上页） public void Button1_Click(object sender,EventArgs e) Sp1.InnerHtml=“按下Button1 后出现的字体“; ,17,HTML 控件对事件的支持（续2）,在LI4.ASPX上述程序代码中我们声明了名为Button1 的Button 控件，除指定Runat 属性值为Server 外还指定了OnServerClick 属性为Button1_Click 。OnServerClick 是Button 对象所支持的事件，本事件在使用者按下按钮时便会触发。设定本属性表示发生OnServerClick 事件时要执行哪个事件程序，我们将属性值填入Button1_Click 则表示当使用者按下按钮时，便会执行Button1_Click 这个事件程序。,18,5.1.1 HTML控件的优点,HTML控件将HTML标记对象化，可以让程序直接控制并设定其属性，这样一来程序代码和HTML控件分开，程序的架构就不会显的杂乱无章而不好管理。 HTML控件对事件的支持，以事件触发方式来编写程序，使得网页编程变得更加简单。,19,HTML 控件架构,当ASP.NET 网页执行时，会检查标注有无Runat 属性。如果标注没有设定这个属性，那么该标注就会被视为字符串，并被送到字符串流等待送到客户端的浏览器进行解译。如果标注有设定 Runat=“Server” 属性，那么就会依照该标注所对应的 HTML 控件来产生对象，所以ASP.NET对象的产生是由 Runat 属性值所决定的。当程序在执行时解析到有指定Runat=“Server“ 属性的标注时，Page 对象会将该控件从 .NET 共享类别库加载并列入控制架构中，表示这个控件可以被程序所控制。等到程序执行完毕后再 将HTML 控件的执行结果转换成HTML 标注，然后送到字符串流和一般标注一起下载至客户端的浏览器进行解译。,20,5.1.2 HTML控件架构,HTML控件的执行过程：,21,5.1.2 HTML控件架构,所有的Html控件位于System.Web.UI.HtmlControls 命名空间中，是从HtmlControl基类中直接或间接 派生出来的。,22,5.1.2 HTML控件架构,23,5.1.3 HTML控件常用属性,Style属性 Attributes 属性 Visible 属性 Disabled 属性 InnerHtml属性及InnerText属性,24, Style属性,ASP.NET为每个Html控件提供了一个Sty1e的属性，Style属性实际上是一个样式表属性集合，通过设置Style中的属性，能通过程序代码在程序执行过程中改变Html控件的样式。,25, Style属性,Style属性可以设定的样式 ：,26, Style属性,例5.3：通过程序来控制Anchor1控件的Style属性： public class WebForm1 : System.Web.UI.Page private void Page_Load(object sender, System.EventArgs e) / 在此处放置用户代码以初始化页面 /指定超级链接的属性 Anchor1.Style“color“= “#008000“; Anchor1.Style“font-size“=“10pt“; Anchor1.Style“text-decoration“= “ none“; Anchor1.Style“font-style“= “ italic“; ,27,小结：,通过使用标记.和，ASP.NET代码得以和HTML标记隔离开来。大多数代码都应该放在前一个标记中，因为这些代码将被编译，并消除了代码令人眼花缭乱的问题。 注释由下述三组标记之一：用于注释HTML代码；“”用于VB；” / ”用于C#; 而用于服务器端。这些注释通常用于解释代码，它们不影响代码的执行。 使用连行符（_）可以将长语句分成多行，在字符串中使用该字符时，务必用双引号括起字符串的前半部分，并在后面加上“和”符号。,28, Attributes属性,Attributes属性实质上是一个控件(包括Html控件、Web控件、用户控件)的属性集合。 控件的属性值与属性值可以通过Attributes任意指定，ASP.NET程序会将其原样发送到浏览器解释。,29, Attributes属性,Attributes属性使用时有两点需要注意： 因为可以任意指定属性，所以对于控件来说，有些指定的属性是不合法的，那么这种属性是无效的。 指定属性必须为控件对应的HTML标记所支持的属性，否则浏览器也会将会不能达到。,30, Attributes属性,例：使用Attributes属性确定HtmlSelect控件的特性 ： public class WebForm1 : System.Web.UI.Page private void Page_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 + “; ,31, Visible属性,Visible属性可以让一个对象的视觉元素消失，换句话说就是将对象隐藏起来让使用者看不到。,32, 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; ,33, Disabled属性,Disabled属性被称为禁止功能。就是将一个对象的功能关闭，让对象暂时无法执行工作。 如果将对象的Disabled属性设为True时，该对象会显示为灰色并且停止工作。只有将Disabled属性设回False，该控件才可正常工作。,34,InnerHtml、InnerText属性,使用InnerHtml属性以编程方式修改HTML控件的开始和结束标记中的内容。 使用InnerText属性以编程方式修改HTML控件的开始和结束标记之间的内容。,35,InnerHtml、InnerText属性,例5.7： 两个控件的属性假设都为试验，对于InnerHtml属性而言会将其中的标记加以解译，所以显示出粗体的文字；而对于InnerText属性而言不会将其中的标记加以解译，所以会将试验一五一十的显示出来：,36,InnerHtml、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=“测试“; ,37,InnerHtml、InnerText属性,Button1按下后的效果图：,38,5.1.4 基本的HTML控件,HtmlTextArea控件 HtmlTable控件 HtmlImage控件 HtmlButton控件 HtmlSelect控件 HtmlForm控件 HtmlInput控件,39,在VS.NET中使用HTML 控件,当前，HTML标记(客户端）是Web应用程序中最常用的界面元素，它们占用的空间也很小，适合于任何浏览器，而且性能也比较优越。但是，HTML标记都需要对其状态进行手工管理，而且不利于创建出复杂的用户界面。服务器控件很好地解决了这些问题，它可以自动管理状态，并以代码的方式处理属性，然后用事件处理逻辑操作。 服务器控件有两种基本类型，一种类型是HTML服务器控件，另一种是Web服务器控件，下面分别进行介绍。,40,在VS.NET中使用HTML 控件(续1）,HTML控件包含在“工具箱”的HTML下拉列表中。 实际上，HTML控件都与HTML标识符一一对应，拖放HTML控件到Web窗体中就等于输入了相应的HTML代码。 例如，在窗体中创建一个Button控件，打开HTML选项卡，可以发现所产生的代码如下所示： INPUT Style”ZINDEX：等 在HTML控件的代码中，style属性决定着控件在Web窗体中的位置和大小。,41,在VS.NET中使用HTML 控件(续2）,为了把一个常规的HTML控件转换成一个HTML服务器控件，只要在设计模式下右击控件（例如上面的Button控件），再从弹出菜单中的选择“作为服务器控件运行”命令即可。这时，如果要查看Button控件的代码，会发现多了一个runat=“server”属性。 HTML控件和 HTML服务器控件在设计器界面中的区别就是有没有带有一个小标记，带小标记的控件为 HTML服务器控件,42,在VS.NET中使用HTML 控件(续3）,把HTML控件转换成了HTML服务器控件，可以使控件在服务器端运行并创建事件，例如，可以使服务器端代码响应Button控件的Click事件。在服务器端代码中，还可以把控件的值绑定到字段、属性、方式或表达式。实际上，HTML服务器控件的这些功能都可以通过Web服务器控件来完成，之所以引用到NET框架中，主要是因为下面两个原因：,43,在VS.NET中使用HTML 控件(续4）,两个原因： 开发人员可以在客户端脚本里为其编写事件代码。因为，HTML服务器控件都作为标准的HTML控件显示，而且能处理客户端脚本。 HTML服务器控件包括了与现有ASP应用程序之间的向下兼容性，使得把传统的ASP应用程序转换成ASPNET（Web窗体）应用程序变得更容易。,44,5.2 Web服务器控件,我们在上面已经介绍过HTML 控件，接下来要介绍的是Web 控件（或称为ASP.NET Server控件）。Web 控件和HTML 控件不一样，HTML 控件是将HTML 标注对象化，让我们的程序代码比较好控制以及管理这些控件；不过基本上它还是转成相对应的HTML 标注。而Web 控件的功能比较强，见下页说明。,45,5.2 Web服务器控件,一些能够简化开发工作的功能和特性，其中包括： 丰富而一致的对象模型：WebControl基类实现了对所有控件通用的大量属性，包括ForeColor、BackColor、Font、Enabled等，有助于减少编程错误。 对浏览器的自动检测：Web控件能够自动检测客户机浏览器的功能，并相应地调整它们所提交的HTML，从而充分发挥浏览器的功能。 数据绑定：Web 控件还拥有一个非常重要的功能，那就是支持数据链接（Data Binding）；这种能力可以和数据库连接，用来显示或修改数据源的数据。,46,Web 控件的使用,Web服务器控件（ ASP.NET 控件）可以直接加入到“Aspx” 文件中。这些控件是使用标记声明的，所有的ASP.NET 都必须以结束标记/ ASP：servercontrol 结束。 如同HTML 控件一样，我们必须赋予每个控件一个Id 属性，并且指定Runat 属性为Server，表示控件是在Server 端执行。Web 控件设定属性的方式有两种，一种是开始在页面布置对象时便将属性设定好；另一种是由程序来设定。下列程序代码范例声明了Label Web 控件，并分别利用两种方式来设定Web 控件的属性：,47,Web 控件的使用(示例）, void Page_Load() Label2.Text=“这是另一个标签”; ,48,Web 控件的使用(示例）,以上两种方法虽然都会使Label Web 控件上出现文字，不过一般来说我们习惯将不变动的属性直接就设定在标注中，如： 。 而会变动的属性就用程序代码来设定，如： void Page_Load() Label2.Text=“这是另一个标签“; ,49,在VS.NET中使用Web服务器控件,ASP.NET中的Web服务器控件都位于“工具箱”中的“ Web窗体”下拉列表中，许多控件都类似于 Windows窗体控件，例如 Label，TextBox，Checkbox，ListBox，Button和Image等。另外，还有一些复杂的服务器控件，例如 AdRotator（显示一组图像，不管是预先定义的还是随机的）和Calendar（显示一个交互式的日历）等。,50,在VS.NET中使用Web服务器控件（续1）,每个Web服务器控件都有一个标记符，在Web窗体的HTML模板上用作控件类的引用。每个控件的标记符都是带有前缀asp：的控件名称，例如，文本框的标记符是asp：Textbox。 下面是一个单行文本框的代码： ,51,Web控件中常用的属性：,52,Web控件中常用的属性（续1）：,53,Web控件中常用的属性（续2）：,54,Web控件中常用的方法：,55,Web控件中常用的事件：,56,Visual Studio .NET 的编程功能和编程特点,设计,开发,调试,部署,57,Web应用程序项目的创建,Visual C# 解决方案的创建 应用程序模板 Web窗体设计器的使用方法 “属性”窗口的使用方法 课堂练习 创建一个简单的 Web 应用程序,58,应用程序模板,提供了起始文件、项目结构定义和环境设置,59,Web页面设计器的使用方法,60,“属性”窗口的使用方法,设置属性，包括尺寸、标题和颜色,61,Web表单概念 从一个简单的ASP.NET程序谈起,li5.aspx private void tbMessage_Change(object sender,EventArgs E) lblmessage.Text=“Hello: “+tbMessage.Text; 这是我们的一个ASP.NET程序 ,62,注意到程序中的表单部分：, 请输入你的名字： ,63,注意到程序中的表单部分： 注意到表单标记中的关键字“runat”，通过指定属性“server”，可告诉ASP.NET，您希望在服务器上跟踪该表单，它们将客户端发生的情况报告给服务器。上述关键字使得服务器通过访问者的输入知道客户端发生的情况。,64,Web表单概念（续3）,没有runat=”server”这项属性，表单将成为常规的HTML表单。在ASP.NET中，被指定为runat=”server”的表单被称为Web表单。 接下来的几个有趣的标记是 它们是ASP.NET中的Web服务器控件。 请注意每个控件的ID属性，这是您给控件指定的唯一名称，以便可以在页面的其他地方引用它。 警告：务必要指定runat=”server”,对ASP.NET而言，runat=”server”,至关重要，它告诉ASP.NET这些项目将在服务器上进行处理。否则，ASP.NET将不在服务器上处理，直接将这些项目发送给客户。,65,5.2.1 文本输入控件,TextBox Web服务器控件为用户提供了一种向 Web 窗体页中键入信息（包括文本、数字和日期）的方法。 例5.17 1. li5_17.aspx。 2. 可用开发工具VS.NET做。,66,5.2.1 文本输入控件,常用基本属性： Columns：获取或设置文本框的显示宽度（以字符为单位）。 MaxLength：获取或设置文本框中最多允许的字符数。 ReadOnly：获取或设置一个值，用于指示能否更改TextBox控件的内容。 TextMode：获取或设置TextBox控件的行为模式（单行、多行或密码）。,67,5.2.2 选择控件,复选控件： CheckBox和CheckBoxList 单选控件： RadioButton和RadioButtonList,68, 复选控件,CheckBox和CheckBoxList Web服务器控件为用户提供了一种在真/假、是/否或开/关选项之间切换的方法。 当 CheckBox 控件的状态在向服务器的各次发送过程间更改时，将引发为 CheckedChanged 事件提供的事件处理程序，以便当 CheckBox 控件的状态在向服务器的各次发送过程间更改时执行特定的任务。,69, 复选控件,常用属性包括： Checked：获取或设置一个值，该值指示是否已选中 CheckBox 控件。 Text：获取或设置与 CheckBox 关联的文本标签。 ID：获取或设置分配给服务器控件的编程标识符。 TextAlign：获取或设置与 CheckBox 控件关联的文本标签的对齐方式。 例5.18 （5_18.aspx) , 项目：0612061 教材31页：例2.1,70, 单选控件,RadioButton和RadioButtonList Web服务器控件允许用户从一个预定义的简短列表中选择一项。可以单独使用单选控件。通常是将两个或多个单独的按钮组合在一起。,71, 单选控件,常用基本属性包括： Checked：获取或设置一个值，该值指示是否已选中 CheckBox 控件。 GroupName：获取或设置单选按钮所属的组名。 ID：获取或设置分配给服务器控件的编程标识符。 Text：获取或设置与CheckBox关联的文本标签。 例5.19 （5_19.aspx） 项目：0612061,72,5.2.2 列表控件,列表框(ListBox)是在一个文本框内提供多个选项供用户选择的控件，它比较类似于下拉列表，但是没有显示结果的文本框。实际中列表框很少使用，大多数情况下都使用列表控件DropDownList来代替ListBox加文本框的情况。,73,5.2.2 列表控件,常用基本属性包括： DataMember：获取或设置要绑定到控件的 DataSource 中的特定表。 DataSou