Web Forms 基本控件 ※
1. Web Forms 基本控件 ※
前面简单介绍了创建Web Forms项目后，接下来我们简单说一说如何使用Web Forms提供的开发组件。如果你前面学过Winform，那么Web Forms你会发现跟它很像，基本使用起来也很简单！那么废话不多说，我们正式进入本小节的控件学习。
1.1. ASP.NET的控件介绍ASP.NET 沿用Windows Forms编程中的事件驱动概念，使用类似于Windows Forms中的控件，其属性和事件也与Windows Forms中控件的属性方法类似。也就是说如果你之前有使用过C#开发过Winforms，那么你也可以快速的使用Web Forms开发网页。
在正式学习ASP.NET控件怎么使用前，我们需要先了解ASP.NET中的控件。
在ASP.NET 页框架中包括许多内置服务器控件，旨在为 Web 提供更加结构化的编程模型。 这些控件提供以下功能：
(1) 自动状态管理。
(2) 无需使用对象即可简单访问对象 Request 值。
(3) 能够响应服务器端代码中的事件，以创建结构更好的应用程序。
(4) 生成网页用户界面的常见方法。
(5) 根据浏览器功能自动自定义输出。
除了内置控件之外，ASP.NET 页框架还提供创建用户控件和自定义控件的能力。 用户控件和自定义控件可以增强和扩展现有控件，以构建更加丰富的用户界面。在使用这些控件时，需要用到Microsoft .NET Framework类库命名空间：
System.WeB、UI.HtmlControls.HtmlControl System.WeB、UI.WebControls.WebControl
1.2. HTML 服务器控件
HTML 服务器控件是包含属性的 HTML runat=server 元素。 HTML 服务器控件与相应的 HTML 标记具有相同的 HTML 输出和属性。 此外，HTML 服务器控件提供自动状态管理和服务器端事件。 HTML 服务器控件具有以下优点：
(1) HTML 服务器控件使用相应的 HTML 标记将一个映射到一个。
(2) 编译 ASP.NET 时，具有 属性的 HTML 服务器控件 runat=server 将编译到程序集中。
(3) 大多数控件 OnServerEvent 包括控件最常用的事件的 。 例如，控件 <input type=button> 有一 OnServerClick 个事件。
(4) 未实现为特定 HTML 服务器控件的 HTML 标记仍可在服务器端使用;但是，它们作为 添加到程序集 HtmlGenericControl 中。
(5) 当 ASP.NET 页面时，HTML 服务器控件将保留其值。
System.WeB、UI.HtmlControls.HtmlControl基类包含所有常见属性。 HTML 服务器控件派生自此类。
若要使用 HTML 服务器控件，请使用以下语法 (它使用此控件 HtmlInputText 作为示例) ：
<input type="text" value="hello world" runat=server />
HTML 服务器控件包括：
(1) HtmlAnchor 控件
(2) HtmlButton 控件
(3) HtmlForm 控件
(4) HtmlImage 控件
等等，在这里未罗列全部。
1.3. Web服务器控件在Web Forms开发中提供了一系列的Web控件。Web 控件类似于 HTML 服务器控件（如 Button、TextBox 和 Hyperlink），只不过 Web 控件具有一组标准化的属性名称。 Web 服务器控件具有以下优点：
使制造商和开发人员能够更轻松地生成自动生成用户界面的工具或应用程序。
简化创建交互式 Web 表单的过程，这无需了解 HTML 控件如何工作，并且使使用它们的任务不易出错。
System.WeB、UI.WebControls.WebControl基类包含所有常见属性。 大多数 Web 服务器控件派生自此类。
若要使用 Web 服务器控件，请使用以下语法 (使用 TextBox 控件作为示例) ：
<asp:textbox text="hello world" runat=server />
Web 服务器控件可分为四类：
(1) 基本 Web 控件
基本 Web 控件提供的功能与 HTML 服务器控件对应项相同。 但是，基本 Web 控件包括其他方法、事件和属性，您可以针对这些方法、事件和属性进行编程。
(2) 验证控件
验证控件用于验证在页面的其他控件中输入的值。 验证控件执行客户端验证和/或服务器端验证，具体取决于显示页面的浏览器功能。 验证控件具有以下优点：
① 可以将一个或多个验证控件与要验证的每个控件关联。
② 提交页面表单时执行验证。
③ 您可以编程方式指定是否应该进行验证，如果要提供取消按钮，以便用户无需在所有字段中填充有效数据即可退出，这将非常有用。
④ 验证控件自动检测应在客户端还是服务器端执行验证。
对应的控件有：RequiredFieldValidator 控件、RangeValidator 控件、CompareValidator 控件、RegularExpressionValidator 控件、CustomValidator 控件、ValidationSummary 控件。
(3) 列表控件
列表控件是支持绑定到集合的特殊 Web 服务器控件。 可以使用列表控件以自定义的模板格式显示数据行。 所有列表控件都公开 DataSource 和 DataMember 属性，这些属性用于绑定到集合。例如：ListBox Web 服务器控件、CheckBoxList Web 服务器控件、RadioButtonList Web 服务器控件、重复器 Web 服务器控件、DataList Web 服务器控件、DataGrid Web 服务器控件、DropDownList Web 服务器控件。
(4) 富控件
除了上述控件之外，ASP.NET 框架还提供一些特定于任务的控件，称为丰富控件。 丰富的控件是使用多个 HTML 元素构建的，并且包含丰富的功能。 富控件的示例包括 Calendar 控件和 AdRotator 控件。
例如：AdRotator Web 服务器控件、日历 Web 服务器控件、Xml Web 服务器控件。
一.1.4. 常用控件的使用前面主要简单介绍了ASP.NET中的控件划分和控件的作用。接下来我们说说我们常用到的控件，以及这些控件的作用。如下图：
控件名称 | 控件作用 |
Label | 使用Label控件在页面上的设置位置显示文本。与静态文本不同，您可以通过设置Text属性来自定义显示的文本。 注意文本在Label控件中显示之前未经过 HTML 编码。这使得在文本中的 HTML 标记中嵌入脚本成为可能。如果控件的值来自用户输入，请务必验证这些值以帮助防止安全漏洞。 |
Button | Button 控件用于显示按钮。按钮可以是提交按钮或命令按钮，而该控件属于提交按钮。 submit 按钮没有命令名称，当它被点击时，它把页面传回服务器。可以编写一些事件句柄，在提交按钮被点击时来控制动作的执行。 command 按钮拥有命名名称，且允许你在页面上创建多个 Button 控件。可以编写一些事件句柄，在 command 按钮被点击时来控制动作的执行。 |
TextBox | TextBox服务器控件是允许用户输入文本的输入控件。默认情况下，TextMode属性设置为SingleLine，这将创建一个只有一行的文本框。您还可以将属性设置为MultiLine或Password。MultiLine创建一个包含多行的文本框。密码创建一个单行文本框，用于屏蔽用户输入的值。 |
Literal控件 | 使用Literal控件在 Web 窗体页上显示静态文本。与Label控件不同，Literal不允许您将样式应用于其内容。 注意文本在Literal控件中显示之前未经过 HTML 编码。这使得在文本中的 HTML 标记中嵌入脚本成为可能。如果控件的值来自用户输入，请务必验证这些值以帮助防止安全漏洞。 |
RadioButton控件 | RadioButton服务器控件在 Web 窗体页上创建一个单选按钮。通过设置Text属性指定要在控件中显示的文本。文本可以出现在单选按钮的左侧或右侧。设置TextAlign属性以控制文本出现的一侧。如果为每个RadioButton控件指定相同的GroupName ，则可以将多个单选按钮组合在一起。将单选按钮组合在一起将只允许从组中进行互斥选择。 注意：您还可以使用RadioButtonList控件。RadioButtonList控件更容易使用数据绑定创建一组单选按钮，而单个RadioButton控件使您可以更好地控制布局。 若要确定是否选择了RadioButton控件，请测试Checked属性。 注意文本在RadioButton控件 中显示之前未经过 HTML 编码。这使得在文本中的 HTML 标记中嵌入脚本成为可能。如果控件的值来自用户输入，请务必验证这些值以帮助防止安全漏洞。 |
需要知道的是，ASP.NET Web窗体中的控件都是已经封装过的，生成的代码格式都是带有“asp:控件名”的前缀在标签前。除了直接使用控件外，还可以使用HTML代码直接编写对应标签。
接下来我们简单的使用Windows Forms里面集成的控件，制作一个注册界面：
（1）在 Visual Studio 2022 中创建一个空的 Web 应用程序。（创建的项目参考1.7.2小节创建）
（2）在该程序中新建一个 Web 窗体页面，并且取名为 Register。
（3）切换回“设计”视图，并展开工具箱
工具箱在顶部菜单的“视图”下的“工具箱”选项中打开。也可以按快捷键（ALT+CTRL+X)打开。
（3）在里面添加如下文字和使用如下控件。
在制作如图中的功能前，需要用到Label控件、TextBox控件、Button控件。对应的控件会生成HTML的label标签、<input>表单，该表单可以修改TextModel模式来选择生成什么样类型的表单；以及button按钮。
制作效果如下图：
编写的代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="chapter_1.Register" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>注册功能</title> </head> <body> <%-- 标题 --%> <h1>71慕课网注册页</h1> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="用户名："></asp:Label> <asp:TextBox ID="userName" runat="server"></asp:TextBox> </div> <div> <asp:Label ID="Label2" runat="server" Text="密码："></asp:Label> <asp:TextBox ID="passWord" runat="server" TextMode="Password"></asp:TextBox> </div> <div> <asp:Label ID="Label3" runat="server" Text="确认密码："></asp:Label> <asp:TextBox ID="rePassWord" runat="server" TextMode="Password"></asp:TextBox> </div> <div> <asp:Button ID="registerBtn" runat="server" Text="注册" OnClick="registerBtn_Click" /> </div> 您的注册信息为： <asp:Label ID="info" runat="server" Text=""></asp:Label> </form> </body> </html>
在这里有用到TextBox控件，里面有一些基本属性。我们简单来看一下这些属性的作用：
属性 | 描述 | .NET |
规定 TextBox 控件的 AutoComplete 行为。 | 2.0 | |
布尔值，规定当内容改变时，是否回传到服务器。默认是 false。 | 1.0 | |
CausesValidation | 规定当 Postback 发生时，是否验证页面。 | 2.0 |
textbox 的宽度。 | 1.0 | |
在 textbox 中所允许的最大字符数。 | 1.0 | |
规定能否改变文本框中的文本。 | 1.0 | |
textbox 的高度（仅在 TextMode="Multiline" 时使用）。 | 1.0 | |
runat | 规定该控件是否是服务器控件。必须设置为 "server"。 | |
TagKey | ||
textbox 的内容。 | 1.0 | |
规定 TextBox 的行为模式（单行、多行或密码）。 | 1.0 | |
ValidationGroup | 当 Postback 发生时，被验证的控件组。 | |
布尔值，指示 textbox 的内容是否换行。 | 1.0 | |
OnTextChanged | 当 textbox 中的文本被更改时，被执行的函数的名称。 |
我们可以试着输入一些数据，提交：
会发现可以输出我们的数据。即使确认密码和密码不一致也不影响数据的展示。如果我们没有输入数据点击提交，会发现也是可以提交的。
对于注册功能来说，如果空数据和密码不一致的情况都可以提交数据，是存在缺陷的。那我们应该怎么规避这种问题呢？我们将在下一章的验证控件中解决这个问题。
需要购买本课才能留言哦~