ASP.NET Web Forms 教程：用户控件示例

在 ASP.Net 中，可以创建可重用的代码。这些可重用的代码可以在多个地方使用，而无需再次编写代码。

可重用代码有助于减少开发人员在编写代码后花费的时间。它可以一次编写，并在多个地方重用。

在 ASP.Net 中创建用户控件

ASP.Net 能够创建 Web 控件。这些控件包含可以重用的代码。根据需要，它可以跨应用程序使用。

让我们来看一个如何在 ASP.Net 中创建 Web 用户控件的示例。

在我们的示例中，

我们将创建一个 Web 控件。
它将用于创建标题组件。
它将包含以下文本：“Guru99 教程”此教程适用于 ASP.Net”

让我们来处理之前章节创建的当前 Web 应用程序。请遵循以下步骤来创建 Web 用户控件。

第一步： 第一步是创建 Web 用户控件并将其添加到我们的 Visual Studio 解决方案中。

在 Visual Studio 的解决方案资源管理器中，右键单击 DemoApplication Solution
选择菜单项添加->新项

第二步： 在下一步，我们需要选择创建 Web 用户控件的选项

在项目对话框中，我们可以看到创建不同类型组件的各种选项。单击左侧的“Web”选项。
当我们单击“Web”选项时，会看到“Web Forms 用户控件”选项。单击此选项。
然后我们为 Web 控件命名为“Guru99Control”。
最后，单击“添加”按钮，让 Visual Studio 将 Web 用户控件添加到我们的解决方案中。

您将在解决方案中看到已添加的“Guru99Control”。

第四步： 现在是时候为 Web 用户控件添加自定义代码了。我们的代码将基于纯 HTML 语法。将以下代码添加到 ‘Guru99Control.ascx’ 文件中

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

代码解释：

在我们的 Web 控件文件中，我们首先创建一个 table 元素。这将用于保存两行文本，用于显示

“Guru99 教程”和
“此教程适用于 ASP.Net。”

接下来，我们定义第一个表格行并将文本设置为“Guru99 教程”。
然后我们定义第二个表格行并将文本设置为“此教程适用于 ASP.Net。”

注意：现在我们无法执行此代码并显示输出。查看此功能是否有效的唯一方法是将其包含在我们的应用程序（aspx 文件）中。我们将在后续主题中介绍。

在 ASP.NET Web 窗体上注册用户控件

在前面的章节中，我们介绍了如何创建自定义 Web 控件。这可用于在 Web 窗体中显示以下两行文本

“Guru99 教程”
“此教程适用于 ASP.Net。”

创建自定义“控件”后，我们需要在 Web 应用程序中使用它。第一步是在我们的应用程序（Demo.aspx）中注册该组件。这是在 ASP.Net 应用程序中使用任何自定义 Web 控件的前提。

让我们看看如何实现这一点。以下步骤是上一节的延续。在上一节中，我们创建了自定义控件。在本节中，我们将在 Demo.aspx Web 窗体中使用该控件。

首先，我们将在 demo.aspx 文件中注册我们的自定义“控件”。

第一步： 确保您正在处理 demo.aspx 文件。必须在此文件中注册 Web 用户控件。这可以通过在 .Net 解决方案的解决方案资源管理器中双击 demo.aspx 文件来完成。

双击窗体后，您可能会在窗体中看到以下代码。这是 Visual Studio 在向 ASP.Net 项目添加 Web 窗体时添加的默认代码。

默认代码包含一些步骤，这些步骤对于确保窗体可以在浏览器中作为 ASP.Net Web 窗体运行是必需的。

第二步： 现在让我们将代码添加到注册用户控件。下图显示了向上述基本代码注册用户控件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
	<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

代码解释：

第一步是注册 Web 用户控件。这包括以下基本参数
1. 使用“Register”关键字来注册 Web 用户控件。
2. src 参数用于定义控件的名称，在本例中是 Guru99Control.ascx。
3. tagname 和 Tagprefix 是分配给控件的单独名称。这样做是为了它们可以在 HTML 页面中作为普通 HTML 控件进行引用。
接下来，我们通过之前指定的 TagPrefix:TagName 来引用我们的 Web 用户控件。TagPrefix:TagName 是我们希望使用自定义 Web 控件的指示。当页面由 Web 服务器处理时，您可以看到我们使用了 TWebControl:WebControl 标签。然后它将相应地处理“Guru99Control”。在我们的示例中，它是 TWebControl:WebControl。
1. 为控件“Header”分配了一个可选的 ID。为 HTML 控件设置 ID 通常是一个好习惯。
2. 最后， runat=server 属性使得控件可以在 Web 服务器上运行。对于所有 ASP.Net 控件，这是默认属性。所有 ASP.Net 控件（包括自定义控件）都必须在服务器上运行。然后将它们的输出从服务器发送到客户端，并相应地显示在浏览器中。

设置上述代码并使用 Visual Studio 执行项目后。您将看到以下输出。

输出：-

浏览器中显示的输出消息表明 Web 用户控件已成功执行。

在 web.config 配置文件 asp 中全局注册 asp.net 控件

有时，人们可能希望在一个 .Net 应用程序的多个页面中使用用户控件。此时，您不想为每个 ASP.Net 页面重复注册用户控件。

在 .Net 中，您可以在 ‘web.config’ 文件中执行注册。
web.config 文件是 .Net 项目中所有 Web 页面使用的通用配置文件。
它包含 ASP.Net Web 项目的必要配置详细信息。例如，web.config 文件中的一个常见配置是 **目标框架参数**。
此参数用于标识应用程序使用的 .Net 框架版本。

下面是 web.config 文件中默认代码的快照。高亮部分是目标框架部分。

让我们看看如何在 web.config 文件中注册我们的 Guru99Control。

第一步： 通过双击文件，从解决方案资源管理器中打开 web.config 文件。

打开 web.config 文件时，您可能会看到以下配置。当项目创建时，Visual Studio 会自动添加“web.config”。这是使 ASP.Net 项目正常工作所需的基本配置。

第二步： 现在让我们在 web.config 文件中注册我们的组件。为此，我们需要添加以下行。

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/>
		</controls>
	</pages>
	</system.web>
</configuration>

注册包括以下子步骤

添加一个名为 <pages> 的标签。这意味着所有控件的配置将适用于解决方案中的所有 ASP.Net 页面。
<controls> 标签表示您正在为用户控件添加配置。
然后，我们使用附加标签注册用户控件。标签前缀、标签名称和 src 的其余参数与之前相同。

第三步： 记住转到 ‘demo.aspx’ 页面并删除控件的行，这些行包含 Guru99 组件的注册。如果您不执行此步骤，则“Guru99Control.ascx”文件将从“demo.aspx”文件而不是“web.config”文件中执行。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

上述代码设置并使用 Visual Studio 执行项目。您将看到以下输出。

输出：-

输出消息表明 Web 用户控件已成功执行。

为 Web 控件添加公共属性

属性是与任何控件关联的键值对。让我们以简单的 <div> HTML 标签为例。下面是该标签外观的截图。

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>

“div”标签用于在 HTML 文档中创建部分。 “div”标签有一个称为 style 属性的属性。这可用于为 div 标签中显示的文本设置不同的样式。通常，您会看到如下所示的 div 标签代码。

<div style="color:#0000FF">

因此，color 属性只是一个键值对，它提供了关于标签本身的更多信息。在上面的例子中，键的名称是“style”，键的值是“color:#0000FF”。

同样，对于用户控件，您可以创建自己的属性来描述该控件。

让我们举一个简单的例子，并基于我们在前面章节中创建的“Guru99Control”进行扩展。

在我们的示例中，我们将添加一个名为 MinValue 的简单整数属性。此值将表示用户控件中显示的文本的最小字符数。

让我们执行以下步骤来实现这一点。

第一步： 打开 Guru99Control.ascx 文件。添加用于添加 MinValue 属性的代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>
	
<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for
	</tr>
</table>

代码解释：

script runat=server 属性用于指示我们正在添加 .Net 特定代码，并且需要对其在 Web 服务器上运行。

这是处理添加到用户控件的任何属性所必需的。然后我们添加我们的属性 MinValue 并将其默认值设置为 0。

第二步： 现在让我们在 demo.aspx 文件中引用此属性。我们现在所做的只是引用 MinValue 属性并为其分配新值 100。

!DOCTYPE html>
<html xmlns="http://www.w3.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100"/>
	</form>
</body>
</html>

注意：– 运行此代码时，不会显示任何输出。这是因为输出在 100 个字符的限制内。

摘要

ASP.Net 能够创建用户控件。用户控件用于拥有在应用程序中多次使用的代码。然后，该用户控件可以跨应用程序重用。
在使用用户控件之前，需要在 ASP.Net 页面上注册它。
要将用户控件用于应用程序中的所有页面，请将其注册到 web.config 文件中。
也可以为 Web 用户控件添加属性。

在 ASP.Net 中创建用户控件

在 ASP.NET Web 窗体上注册用户控件

在 web.config 配置文件 asp 中全局注册 asp.net 控件

相关文章

为 Web 控件添加公共属性

摘要

订阅新闻通讯