ASP.NET 用户控件

• 下载源代码文件 - 2 Kb

引言

在传统的 ASP 中，代码重用和封装传统上是通过包含文件和 Web 类组合实现的。虽然这对于业务逻辑来说效果很好，但对于视觉组件来说总是有些棘手。例如，如果您想在许多不同的地方显示一个数据网格，并且希望该网格具有相同的通用外观和感觉，但又可以针对特定页面进行自定义，那么您要么复制代码 HTML，使用样式表，使用包含文件，编写一些 VBScript 动态生成 HTML，或者使用所有这些方法的组合。

这很混乱。由于变量名冲突、包含文件仅包含一次（且顺序正确）等问题始终存在，因此将这些组件移至不同项目也可能很困难。然后，还有将新控件集成到现有代码的整个问题。

ASP.NET 通过引入用户控件解决了许多这些问题。这些是自包含的视觉元素，可以像传统的内置 HTML 控件一样放置在网页上，并且可以以类似的方式设置其属性。

在本文中，我将介绍一个具有 6 个属性（边框宽度和颜色、标题文本和颜色、背景和内边距）的标题栏。该控件使用以下简单语法嵌入页面中。

<CP:TitleBar Title="User Control Test" TextColor="green" Padding=10 runat=server />

这会产生以下输出：

那么如何编写用户控件呢？

最简单的方法是使用 Visual Studio .NET。启动一个新的 Web 项目，然后在服务器资源管理器中右键单击项目的名称。选择“添加...”然后选择“添加 Web 用户控件...”重命名控件并点击打开。向导会生成两个文件：一个包含视觉布局的 .ascx 文件，以及一个 .ascx.cs 文件（假设您正在使用 C#）包含业务逻辑。

视觉布局

首先，我们设计标题栏的视觉布局。我们将使用新的 asp:XXX 控件，以便在运行时可以轻松访问它们的属性。

整个 .ascx 文件如下所示：

<%@ Control Language="c#" AutoEventWireup="false" 
    Codebehind="MyUserControl.ascx.cs" 
    Inherits="CodeProject.MyUserControl" 
    TargetSchema="http://schemas.microsoft.com/intellisense/ie3-2nav3-0"%>

<asp:table id=OuterTable BackColor=#c0c0c0c BorderWidth=0 cellPadding=0 
           cellSpacing=1 width='100%' Runat=server>
<asp:tableRow><asp:tableCell width="100%">

<asp:table id=InnerTable BackColor=#cccccc BorderWidth=0 cellPadding=0 
           cellSpacing=1 width="100%" Runat=server>
<asp:tableRow<asp:tablecell HorizontalAlign=Center>

<asp:Label ID=TitleLabel Runat=server />

</asp:tablecell></asp:tableRow>
</asp:table>

</asp:tablecell></asp:tableRow>
</asp:table>

创建带细边框的表的相当传统的方法——除了我们使用的是 ASP.NET 控件而不是传统的 HTML。

请注意，如果您将用户限制为仅使用 IE，则可以使用 border-style 样式设置边框样式，并只使用一个表。但是，如果您的查看器使用 Netscape 4.X，则此方法无效。ASP.NET 控件会为 Netscape 等低版本浏览器输出 HTML 3.2，因此虽然 ASP.NET 的“编写一次，随处查看”的承诺听起来不错，但在实践中实际上并未实现。

我将不深入探讨 ASP.NET 控件的细节。它们相当容易理解。只需确保包含“runat=server”部分。它们很有帮助。

后端逻辑

注意文件顶部的部分：Codebehind="MyUserControl.ascx.cs"。这是将视觉布局（.ascx 文件）与后端逻辑（.ascx.cs）连接起来的地方。我们将仅仅触及这种逻辑与显示分离所能做到的皮毛。

我们的 C# 代码如下所示：

namespace CodeProject
{
    using System;
    ...

    public abstract class MyUserControl : System.Web.UI.UserControl
    {
        public string Title       = null;
        public string TextColor   = Color.Black.Name;
        public string BackColor   = Color.Wheat.Name;
        public int    Padding     = 2;
        public string BorderColor = Color.Gray.Name;
        public int    BorderWidth = 1;
        
        protected Table OuterTable;
        protected Table InnerTable;
        protected Label TitleLabel;

        private void Page_Load(object sender, System.EventArgs e)
        {
            if (Title==null || Title=="") 
                Visible = false;
            else
            {

                OuterTable.BackColor   = Color.FromName(BorderColor);
                OuterTable.CellSpacing = BorderWidth;
                InnerTable.CellPadding = Padding;
                InnerTable.BackColor   = Color.FromName(BackColor);
                
                TitleLabel.Text        = Title;
                TitleLabel.ForeColor   = Color.FromName(TextColor);
                TitleLabel.Font.Name   = "Verdana";
                TitleLabel.Font.Bold   = true;
                TitleLabel.Font.Size   = FontUnit.Parse("13");
            }
        }

        #region Web Form Designer generated code
        ...
        #endregion
    }
}

此后端程序的全部目的是定义一组属性，用户在实例化该控件时可以访问这些属性，然后根据这些属性设置 .ascx 文件中 ASP.NET 控件的属性。

我们可以轻松地打开数据库连接并将数据集绑定到控件，或者我们可以访问控件所在的页面（使用Page属性）并根据我们在那里找到的内容调整控件的外观和感觉。我们还可以提供显示中的用户输入机制，并在控件中提供点击事件的处理程序。这些控件确实非常强大。

不幸的是，我们将保持更贴近现实，只提供颜色和边框宽度更改的适中功能。

属性

注意顶部的变量声明块。

        public string Title       = null;
        public string TextColor   = Color.Black.Name;
        public string BackColor   = Color.Wheat.Name;
        public int    Padding     = 2;
        public string BorderColor = Color.Gray.Name;
        public int    BorderWidth = 1;

这些可公开访问的变量构成了用户在 Web 页面中实例化控件时可用的属性。

<CP:TitleBar Title="User Control Test" TextColor="green" Padding=10 runat=server />

用户可以设置所有、部分或不设置这些属性。

视觉元素与代码之间的链接

故事的另一半是 ASP.NET 控件与 C# 代码之间的链接。注意下面的变量块。

        protected Table OuterTable;
        protected Table InnerTable;
        protected Label TitleLabel;

这些变量的名称与我们 .ascx 页面中 ASP.NET 控件的 ID 相同。这会将我们的 C# 类中的变量与 .ascx 页面中的 ASP.NET 控件链接起来。现在我们可以随意操作页面上的控件了。

            if (Title==null || Title=="") 
                Visible = false;
            else
            {

                OuterTable.BackColor   = Color.FromName(BorderColor);
                OuterTable.CellSpacing = BorderWidth;
                InnerTable.CellPadding = Padding;
                InnerTable.BackColor   = Color.FromName(BackColor);
                
                TitleLabel.Text        = Title;
                TitleLabel.ForeColor   = Color.FromName(TextColor);
                TitleLabel.Font.Name   = "Verdana";
                TitleLabel.Font.Bold   = true;
                TitleLabel.Font.Size   = FontUnit.Parse("13");
            }

这里我们只需检查是否有任何标题文本，如果没有，则将控件设置为不可见（这意味着控件的 HTML 不会被渲染，也不会发送到客户端）。如果存在文本，我们将继续设置控件的属性。

大功告成！

使用控件

要使用该控件，您首先需要编译项目及文件，然后创建一个页面来托管该控件。控件的代码将被编译成一个程序集并放置在 /bin 目录中。如果您对 C# 代码进行任何更改，则需要重新编译。如果您对视觉布局（.ascx）文件进行更改，则无需重新编译。

要使用该控件，您必须使页面了解该控件。我们通过使用一个指定我们使用的标签前缀、标签名称以及用户控件页面位置的 Register 指令来实现此目的。

<%@ Register TagPrefix="CP" TagName="TitleBar" Src="MyUserControl.ascx" %>
         
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html>
  <head>
    <title>MyPage</title>
  </head>
  <body>
  <basefont face=verdana>
  
  <CP:TitleBar Title="User Control Test" TextColor="green" Padding=10 runat=server />
    
  </body>
</html>

在这种情况下，标签前缀是CP，标签是TitleBar。它们可以是您想要的任何名称，只要没有冲突即可。在浏览器中打开页面，惊叹于您的聪明才智。