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

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

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

在 ASP.Net 中创建用户控件

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

让我们看一个例子，了解如何在 ASP.Net 中创建 Web 用户控件

在我们的例子中，

我们将创建一个网络控件。
它将用于创建标题组件。
它将包含下面提到的文本。”Guru99 教程”本教程适用于 ASP.Net”

让我们使用前面部分中创建的当前 Web 应用程序。让我们按照以下步骤创建 Web 用户控件。

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

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

步骤2） 下一步，我们需要选择创建 Web 用户控件的选项

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

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

步骤4） 现在是时候将自定义代码添加到 Web 用户控件了。我们的代码将基于纯 HTML 语法。将以下代码添加到“Guru99Control.ascx”文件

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

代码说明：-

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

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

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

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

在 ASP.NET Web 表单上注册用户控件

在前面的部分中，我们了解了如何创建自定义 Web 控件。这可用于在 Web 表单中显示以下两行

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

一旦创建了自定义“控件”，我们就需要在我们的 Web 应用程序中使用它。第一步是在我们的应用程序 (Demo.aspx) 中注册该组件。这是在 ASP.Net 应用程序中使用任何自定义 Web 控件的先决条件。

让我们看看如何实现这一点。以下步骤是上一节的延续。在上一节中，我们创建了自定义控件。在本节中，我们将在我们的 演示.aspx 网络表单。

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

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

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

默认代码由确保表单可以在浏览器中作为 ASP.Net Web 表单运行所需的步骤组成。

步骤2） 现在让我们添加代码来注册用户控件。下面的屏幕截图显示了将用户控件注册到上述基本代码的过程。

<%@ 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. 标签名和标签前缀是赋予控件的单独名称。这样做是为了使它们可以在 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项目中所有网页使用的通用配置文件。
它包含 ASP.Net Web 项目的必要配置详细信息。例如，web.config 文件中的一个常见配置是 目标框架参数.
此参数用于识别应用程序使用的.Net框架版本。

下面是 web.config 文件中默认代码的快照。突出显示的部分是目标框架部分。

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

步骤1） 双击文件，从解决方案资源管理器中打开 web.config 文件。

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

步骤2） 现在让我们在 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>

注册包括以下子步骤

添加一个名为。这意味着所有控件的配置都将适用于解决方案中的所有 ASP.Net 页面。
这标签意味着您正在为用户控件添加配置。
然后我们用附加标签注册用户控件。其余参数tagPrefix、tagName和src与以前相同。

步骤3） 记得转到“demo.aspx”页面并删除控件行，该行已注册 Guru99 组件。如果不执行此步骤，则将从“demo.aspx”文件而不是“web.config”文件执行“Guru99Control.ascx”文件。

<%@ 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 控件添加公共属性

属性是与任何控件关联的键值对。我们来看一个简单的示例HTML 标签。标签的屏幕截图如下所示。

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

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

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

因此，color 属性只不过是一个键值对，它提供了有关标签本身的更多信息。在上述情况下，键名为“style”，键值为“color:#0000FF”。

类似地，对于用户控件，您可以创建自己的描述该控件的属性。

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

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

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

步骤1） 打开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。

步骤2） 现在让我们在 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 控件添加公共属性

总结