ASP.NET 自定义控件

• 下载项目 - 41.85 KB

引言

本文将向您展示如何创建一个自定义控件，它是一个具有鼠标悬停和鼠标移出图像效果的按钮。 代码是用 Visual Studio 2008 编写的。最终结果在浏览器中应该如下所示

背景

在 Visual Studio 中，有很多有用的控件，但如果您想为您的 Web 应用程序注入一些活力，您可能开始考虑创建自己的控件，或者基本的控件对您来说不够好。

Using the Code

在可下载的 zip 文件中，您可以找到自定义控件的源代码和一个使用该控件的示例应用程序。 自定义控件可以使用两种不同的方式

1. 在您的项目中添加对 CustomControls.dll 的引用，并在后台代码中添加此行

   using CustomControls

2. 将 CustomControls.dll 拖放到 VS 的工具栏中，并像使用基本控件一样使用它。

   首先，在 AssemblyInfo.cs 文件中存在一些可以根据您喜好自定义的基本设置。 程序集文件是自动生成的，但我添加了一行，看起来像这样

   [assembly: System.Web.UI.TagPrefix("CustomControls", "CC")]

   这将告诉设计器它在设计模式下的外观（前缀标签）。

ExtendedButton.cs

在 ExtendedButton.cs 中还有一行可以自定义。 它位于命名空间之后和类声明之前。 这将定义将出现在工具箱中的位图，这是一个 18x16 的 bmp

[ToolboxBitmap(@"D:\Dokumentumok\Visual Studio 2008\
Projects\CustomControls\CustomControls\ExtendedButton.bmp")]

当您创建一个自定义控件时，最重要的是决定哪个基本控件类似于您想要创建的控件。 基本上，当您开始一个新的“ASP.NET 服务器控件”时，该类将派生自 WebControl 类。 这非常有帮助，因为几乎所有事情都可以从该类完成。 在这个例子中，我们创建一个 Button，它将具有 mouseover 和 mouseout 图像“效果”，并且还将在图像的顶部显示一些文本。 所以最好的选择是 System.Web.UI.WebControls.LinkButton 控件！ 这种聪明的东西可以使用一个小技巧来具有图像背景，并且它像一个按钮一样工作，所以它也有一个 PostbackUrl。 局部变量区域

#region Local variables

private Unit _Width = 100;  //default Width
private Unit _Height = 20;  //default Height
private Color _ForeColor = Color.Black;  //default ForeColor
private HorizontalAlign _TextHorizontalAlign = 
	HorizontalAlign.Left;  //default TextHorizontalAlign
private VerticalAlign _TextVerticalAlign = 
	VerticalAlign.Middle;  //default TextVerticalAlign
private string _ID = "";
private string _NavigateUrl = "";
private TargetType _Target = TargetType._self;  //default Target
private string _MouseOverImage;
private string _MouseOutImage;
private LinkButton _linkButton;

#endregion

_linkButton 变量将负责新创建的自定义控件。 其余变量将存储并封装控件的属性。 为了让每个人都可以使用这些属性，我们创建了 public 属性区域

[Category("Button Images")]
[Browsable(true)]
[Description("Set path to mouseover image file.")]
[Editor("System.Web.UI.Design.UrlEditor, System.Design", 
	typeof(System.Drawing.Design.UITypeEditor))]
public string MouseOverImage
{
  get { return _MouseOverImage; }
  set { _MouseOverImage = value; }
}

[Category("Button Images")]
[Browsable(true)]
[Description("Set path to mouseout image file.")]
[Editor("System.Web.UI.Design.UrlEditor, System.Design", 
	typeof(System.Drawing.Design.UITypeEditor))]
public string MouseOutImage
{
  get { return _MouseOutImage; }
  set { _MouseOutImage = value; }
}

在属性声明正上方的 Browsable 和 Editor 设置将告诉开发环境这两个属性可以在本地计算机上浏览和选择

在 Method 区域中完成工作的核心代码是

protected override void OnInit(EventArgs e)
{
  string style = "background-image:url('" + MouseOutImage + "'); " +
                 "text-align:" + TextHorizontalAlign + "; ";
  if (TextVerticalAlign == VerticalAlign.Middle)
    style += ("line-height:" + Height.ToString() + "; ");
  string script = "";
  if (NavigateUrl != string.Empty)
    script = "window.open('" + NavigateUrl + "', '" + Target.ToString() + "')";

  _linkButton = new LinkButton();
  _linkButton.ID = ID;
  _linkButton.Attributes.Add("style", style);
  _linkButton.Attributes.Add("onmouseover", "document.getElementById
	('" +      _linkButton.ID + "').style.backgroundImage = 
	'url(" + MouseOverImage + ")';");
  _linkButton.Attributes.Add("onmouseout", "document.getElementById
	('" +   _linkButton.ID + "').style.backgroundImage = 
	'url(" + MouseOutImage + ")';");
  _linkButton.Attributes.Add("onclick", script);
  if (Target == TargetType._self)
    _linkButton.PostBackUrl = NavigateUrl;
  _linkButton.Width = Width;
  _linkButton.Height = Height;
  _linkButton.Font.Underline = false;
  _linkButton.ForeColor = ForeColor;
  _linkButton.Text = Text;
  base.OnInit(e);
}

protected override void CreateChildControls()
{
  this.Controls.Add(_linkButton);
  ClearChildViewState();
  base.CreateChildControls();
}

需要重写 OnInit() 和 CreateChildControls() 方法来创建自定义控件。 在 OnInit() 中，我们添加了一些 JavaScript 代码来完成 mouseout 和 mouseover 工作。 这是理解代码中最难的部分，除非您熟悉 JavaScript。 其他行只是 ExtendedButton 具有的一些额外功能。

关注点

要测试该控件，请使用示例中的 TestApp。

历史

• 2010 年 6 月 13 日：初始发布