将 Web 窗体页转换为用户控件

来源：互联网发布：在线喊单软件编辑：程序博客网时间：2024/06/06 03:00

如果您已经开发了 Web 窗体页并决定在您的整个应用程序中访问其功能，则可以对该文件进行一些小改动，将其改成用户控件。Web 用户控件与 Web 窗体页非常相似，它们是使用相同的技术创建的。当将 Web 窗体页转换为 Web 用户控件时，创建一个可再次使用的 UI 组件，您可以在其他 Web 窗体页上使用该组件。

对于本演练，您将创建一个基本的 Web 窗体页，该页向用户显示一个个性化的欢迎信息。若要将该页转换为一个 Web 用户控件，您将对代码进行少量更改：

将代码隐藏基类从 Page 更改为 UserControl
从 .aspx 文件中删除 <html>、<head>、<body> 和 <form> 标记。
将 ASP.NET 指令类型从 @ Page 更改为 @ Control
更改 Codebehind 属性来引用控件的代码隐藏类文件（ascx.vb 或 ascx cs）
将 .aspx 文件扩展名更改为 .ascx

若要测试该控件，您将创建一个新的 Web 窗体页，向其添加该控件，然后在浏览器中打开该页。

创建 Web 窗体页

第一步是创建 Web 应用程序和 Web 窗体页。

创建项目和窗体

在“文件”菜单上指向“新建”，然后单击“项目”。
在“新建项目”对话框中，请执行以下操作：
1. 在“项目类型”窗格中选择“Visual Basic 项目”或“Visual C# 项目”。
2. 在“模板”窗格中选择“ASP.NET Web 应用程序”。
3. 在“位置”框中，为应用程序输入完整的 URL（包含 http:// 和服务器名称）。URL 的最后一部分是项目的名称，对于本演练，将项目命名为 Conversion。Web 服务器上必须安装 IIS 5 版（或更高版本）和 .NET Framework。如果计算机上已安装 IIS，可以为服务器指定 http://localhost。（如果正常使用代理服务器访问 Internet，为了使用本地主机，可能需要配置 Internet Explorer 以绕过代理服务器。）
  提示如果您已经打开了一个解决方案，可选择“关闭解决方案”，从而使新的 Web 窗体项目成为它自己解决方案的一部分。
当单击“确定”时，将在您指定的 Web 服务器的根处创建新的 Web 窗体项目。此外，名为 WebForm1.aspx 的新 Web 窗体页将显示在“设计”视图中 Web 窗体设计器上。

现在您可以添加几个控件并编写代码来显示个性化的欢迎信息。

添加控件并对它们进行编程

从工具箱的“Web 窗体”选项卡中，将一个 TextBox 控件拖到设计器上。
将一个 Label 控件拖到文本框的左边。在“属性”窗口中，将 Label 控件的 Text 属性更改为 Enter Name:。
将一个 Button 控件拖到文本框的下面，然后将 Text 属性更改为 Enter。
将另一个 Label 控件拖到该按钮的下面，然后删除默认文本使 Text 属性为空。
双击 Button 控件以打开“代码”视图，这时已添加了 Button_Click 事件处理程序。
将下面的代码添加到 Button1_Click 过程：

' Visual Basic
Label2.Text = "Hi " & TextBox1.Text & ", welcome to ASP.NET!"

// C#
Label2.Text = "Hi " + TextBox1.Text + ", welcome to ASP.NET!";

不要关闭该文件，因为在演练中稍后部分您将返回到该文件。
安全说明 Web 窗体页中的用户输入可能包含潜在的恶意客户端脚本。默认情况下，Web 窗体页验证用户输入是否不包括脚本或 HTML 元素。有关更多信息，请参见脚本利用和在 Web 应用程序中防止脚本利用。
按 CTRL+F5 组合键运行该 Web 窗体页并对其进行测试。当完成后，关闭当测试页时打开的浏览器。

既已具有了一个基本的 Web 窗体页，您可以将其转换为 Web 用户控件了。

将页转换为用户控件

因为用户控件中不包括 <html>、<body> 和 <form> 元素，所以您必须移除这些元素，而将它们包括在父 Web 窗体页中。您还必须将 Web 窗体页中 ASP.NET 指令类型从 @ Page 更改为 @ Control。这些 ASP.NET 指令指定该页和用户控件编译器使用的设置。有关更多信息，请参见指令语法。

将 Web 窗体页转换为用户控件

在设计器中返回 WebForm1.aspx，然后通过单击设计器窗口底部的“HTML”选项卡切换到“HTML”视图。
从 .aspx 文件中删除 <html> 标记、<!doctype> 标记、<head> 标记及内部内容、<body> 和 <form> 标记。如果您正在使用 Visual Basic，则 HTML 如下所示：

<%@ Page Language="vb" AutoEventWireup="false"
      Codebehind="WebForm1.aspx.vb" Inherits="Conversion.WebForm1">
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Label id="Label1" runat="server">Enter Name:</asp:Label>
<asp:Button id="Button1" runat="server" Text="Enter"></asp:Button>
<asp:Label id="Label2" runat="server"></asp:Label>

如果您正在使用 C#，除了第一行之外，HTML 看起来是相同的，如下所示：

<%@ Page Language="cs" AutoEventWireup="false"
      Codebehind="WebForm1.aspx.cs" Inherits="Conversion.WebForm1">

注意   代码编辑器添加通常情况下指示代码中问题的下划线。在转换完成后，这些标记将消失。
将 ASP.NET 指令类型从 @ Page 更改为 @ Control。在 Visual Basic 项目中，它将如下所示：

<%@ Control Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="Conversion.WebForm1">

在 C# 项目中，它将如下所示：

<%@ Control Language="cs" AutoEventWireup="false"
Codebehind="WebForm1.aspx.cs" Inherits="Conversion.WebForm1">
更改指令的 Codebehind 属性引用以反映 .aspx 扩展名将更改为 .ascx，后者是用户控件的扩展名。在本演练中，稍后您还要将控件的名称更改为 welcome.ascx，因此根据需要将 Codebehind 属性设置为 welcome.ascx.vb 或 welcome.ascx.cs。
同样，更改指令的 Inherits 属性以引用 Conversion.welcome。
返回到 WebForm1.aspx.vb 或 WebForm1.aspx.cs 文件。
将基类从 System.Web.UI.Page 更改为 System.Web.UI.UserControl，然后将 Public Class 声明从 WebForm1 更改为 welcome。

' Visual Basic
Public Class welcome
Inherits System.Web.UI.UserControl

// C#
public class welcome : System.Web.UI.UserControl
保存并关闭代码隐藏文件和 .aspx 文件。
在解决方案资源管理器中右击 WebForm1.aspx，然后单击快捷菜单上的“重命名”。
将该文件的名称更改为 welcome.ascx 以反映其新功能。您必须将文件扩展名从 .aspx 更改为 .ascx，注意到这一点很重要。当出现确认对话框时，单击“确定”。

该文件现在是一个 Web 用户控件，Web 窗体页可以在整个项目中使用该控件。

测试用户控件

通过创建一个新的 Web 窗体页并将控件添加到该页，您可以对用户控件进行测试。

测试用户控件

在“项目”菜单上，单击“添加 Web 窗体”。“添加新项”对话框出现，并已选中了“Web 窗体”。
将“名称”更改为 WelcomeTest.aspx 并单击“打开”。新的 Web 窗体页在设计器中打开。
将 welcome.ascx 从解决方案资源管理器拖到设计图面上。
在解决方案资源管理器上右击 WelcomeTest.aspx，然后在快捷菜单上单击“设为起始页”。
按 F5 键运行该 Web 窗体页并对其进行测试。