24 自定义控件

ASP.NET 允许用户创建控件。这些用户定义的控件被分类为：

  • 用户控件
  • 自定义控件

用户控件　　

用户控件行为像微型　ASP.NET 页面或者网页表单，它能被许多其他页面使用。这些都是源自 System.Web.UI.UserControl 类。这些控件有下列特性：

  • 它们有 .ascx 扩展。
  • 它们可能不会含有任何 , 或者

<

form> 标签。 - 它们有一个 Control 指令而不是一个 Page 指令。

为了理解这个概念，让我们创建一个简单的用户控件，它将作为 web 页面的页脚使用。为了创建和使用用户控件，采取以下步骤：

  • 创建一个新的 web 应用程序。
  • 在 Solution Explorer 上右击项目文件夹并且选择 ADD New Item。

1 图片 24.1 1

  • 从 Add New Item 对话框中选择 Web User Control 并且把它命名为 footer.ascx。最初，footer.ascx 仅含有一个 Control 指令。 
  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" 
  2.    Inherits="customcontroldemo.footer" %>
  • 给文件添加下列代码： 
  1. <table>
  2.    <tr>
  3.       <td align="center"> Copyright ©2010 TutorialPoints Ltd.</td>
  4.    </tr>
  5.  
  6.    <tr>
  7.       <td align="center"> Location: Hyderabad, A.P </td>
  8.    </tr>
  9. </table>

为给你的 web 网页添加用户控件，你必须添加 Register 指令和一个页面用户控件的实例。以下的代码展示了说明：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %>
  2.  
  3. <%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" >
  8.  
  9.    <head runat="server">
  10.       <title>
  11.          Untitled Page
  12.       </title>
  13.    </head>
  14.  
  15.    <body>
  16.  
  17.       <form id="form1" runat="server">
  18.          <div>
  19.  
  20.             <asp:Label ID="Label1" runat="server" Text="Welcome to ASP.Net Tutorials "></asp:Label>
  21.             <br />  <br />
  22.             <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  Text="Copyright Info" />
  23.  
  24.          </div>
  25.          <Tfooter:footer ID="footer1" runat="server" />
  26.       </form>
  27.  
  28.    </body>
  29. </html>

当执行后，页面显示了页脚而且这个控件能在所有你的网站的页面中被使用。

2 图片 24.2 2

观察以下：

(1)Register 指令为控件指定了一个标签名称和标签前缀。

  1. <%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>

(2)下列的标签名称和前缀应该在页面上添加用户控件时被使用:

  1. <Tfooter:footer ID="footer1" runat="server" />

自定义控件

自定义控件被部署为单独的集合。它们被编译成动态链接库(DLL)并且作为任何其他的 ASP.NET 服务控件来使用。它们能被以下方法中的任何一个来创建:

  • 通过从一个存在的控件中获得一个自定义控件。
  • 通过联合两个或者更多的存在的控件来组成一个新的自定义控件。
  • 通过从基本的控件类中获得。

为了理解这个概念，让我们创建一个自定义类，它将简单地在浏览器上呈现一条短信。为了创建控件，采取以下步骤：

创建一个新的网站。在 Solution Explorer 中树的顶端右击 solution(不是项目)。

3 图片 24.3 3

在 New Project 对话框中，从项目模板中选择 ASP.NET Server Control。

4 图片 24.4 4

上面的步骤添加了一个新的项目并且给 solution 创建了一个完整的自定义控件，叫做 ServerControl1。在这个例子中，让我命名 CustomControls 项目。为了使用这个控件，它必须在页面上注册之前作为引用添加到网页中。为了添加引用到已存在的项目中，右击项目(不是 solution)，并且点击 Add Reference。

从 Add Reference 对话框中的 Projects 标签选择 CustomControl 项目。Solution Explorer 能显示引用。

5 图片 24.5 5

为了在页面上使用控件，在 @Page 指令下添加 Register 指令。

  1. <%@ Register Assembly="CustomControls"  Namespace="CustomControls"  TagPrefix="ccs" %>

而且，你可以使用控件，和任何其他控件类似。

  1. <form id="form1" runat="server">
  2.    <div>
  3.       <ccs:ServerControl1 runat="server" Text = "I am a Custom Server Control" />
  4.    </div> 
  5. </form>

当执行后，控件的 Text 属性被展示在浏览器上，如下所示:

6 图片 24.6 6

使用自定义类

在之前的例子中，自定义类的 Text 属性值被设置了。当控件被创建时，ASP.NET 默认添加了这个属性。以下控件的文件后的代码揭示了这个。

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Linq;
  5. using System.Text;
  6.  
  7. using System.Web;
  8. using System.Web.UI;
  9. using System.Web.UI.WebControls;
  10.  
  11. namespace CustomControls
  12. {
  13.    [DefaultProperty("Text")]
  14.    [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")]
  15.  
  16.    public class ServerControl1 : WebControl
  17.    {
  18.       [Bindable(true)]
  19.       [Category("Appearance")]
  20.       [DefaultValue("")]
  21.       [Localizable(true)]
  22.  
  23.       public string Text
  24.       {
  25.          get
  26.          {
  27.             String s = (String)ViewState["Text"];
  28.             return ((s == null) ? "[" + this.ID + "]" : s);
  29.          }
  30.  
  31.          set
  32.          {
  33.             ViewState["Text"] = value;
  34.          }
  35.       }
  36.  
  37.       protected override void RenderContents(HtmlTextWriter output)
  38.       {
  39.          output.Write(Text);
  40.       }
  41.    }
  42. }

上述的代码自动生成给一个自定义控件。事件和方法能被添加到 custom control 类中。

例子

让我们扩展之前的名为 ServerControl1 的自定义控件。让我们给予它一个名为 checkpalindrome 的方法，它将给它权限来检查 palindrome。

Palindrome 是当颠倒时仍拼写相同的文字/字面值。例如，Malayalam，madam,saras 等。

扩展自定义控件的代码，它应该看起来如下所示：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Linq;
  5. using System.Text;
  6.  
  7. using System.Web;
  8. using System.Web.UI;
  9. using System.Web.UI.WebControls;
  10.  
  11. namespace CustomControls
  12. {
  13.    [DefaultProperty("Text")]
  14.    [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1  >")]
  15.  
  16.    public class ServerControl1 : WebControl
  17.    {
  18.       [Bindable(true)]
  19.       [Category("Appearance")]
  20.       [DefaultValue("")]
  21.       [Localizable(true)]
  22.  
  23.       public string Text
  24.       {
  25.          get
  26.          {
  27.             String s = (String)ViewState["Text"];
  28.             return ((s == null) ? "[" + this.ID + "]" : s);
  29.          }
  30.  
  31.          set
  32.          {
  33.             ViewState["Text"] = value;
  34.          }
  35.       }
  36.  
  37.       protected override void RenderContents(HtmlTextWriter output)
  38.       {
  39.          if (this.checkpanlindrome())
  40.          {
  41.             output.Write("This is a palindrome: <br />");
  42.             output.Write("<FONT size=5 color=Blue>");
  43.             output.Write("<B>");
  44.             output.Write(Text);
  45.             output.Write("</B>");
  46.             output.Write("</FONT>");
  47.          }
  48.          else
  49.          {
  50.             output.Write("This is not a palindrome: <br />");
  51.             output.Write("<FONT size=5 color=red>");
  52.             output.Write("<B>");
  53.             output.Write(Text);
  54.             output.Write("</B>");
  55.             output.Write("</FONT>");
  56.          }
  57.       }
  58.  
  59.       protected bool checkpanlindrome()
  60.       {
  61.          if (this.Text != null)
  62.          {
  63.             String str = this.Text;
  64.             String strtoupper = Text.ToUpper();
  65.             char[] rev = strtoupper.ToCharArray();
  66.             Array.Reverse(rev);
  67.             String strrev = new String(rev);
  68.  
  69.             if (strtoupper == strrev)
  70.             {
  71.                return true;
  72.             }
  73.             else
  74.             {
  75.                return false;
  76.             }
  77.          }
  78.          else
  79.          {
  80.             return false;
  81.          }
  82.       }
  83.    }
  84. }

当你改变空间的代码时，你必须通过点击 Build —> Build Solution 来构建方法，这样改变才能反映在你的项目中。给页面添加一个 text box 和一个 button 控件，这样用户才能提供一段 text。当 button 被点击时，它就被用来检查 palindrome。

  1. <form id="form1" runat="server">
  2.    <div>
  3.       Enter a word:
  4.       <br />
  5.       <asp:TextBox ID="TextBox1" runat="server" style="width:198px"> </asp:TextBox>
  6.  
  7.       <br /> <br />
  8.  
  9.       <asp:Button ID="Button1" runat="server onclick="Button1_Click" Text="Check Palindrome" style="width:132px" />
  10.  
  11.       <br /> <br />
  12.  
  13.       <ccs:ServerControl1 ID="ServerControl11" runat="server" Text = "" />
  14.    </div>
  15. </form>

button 的 Click 事件句柄简单地将 text box 中的 text 复制到自定义控件的 text 属性中。

  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3.    this.ServerControl11.Text = this.TextBox1.Text;
  4. }

当被执行后，控件成功地检测到了 palindromes。

7 图片 24.7 7

观察以下:

(1) 当你给自定义控件添加一个引用时，它被添加到 toolbox 并且你可以像其他控件一样从 toolbox 中直接使用它。

8 图片 24.8 8

(2)custom control 类的 RenderContents 方法被覆写了，你可以添加你自己的方法和事件。

(3)RenderContents 方法采用了 HtmlTextWriter 型的参数，它将对在浏览器上展示负责。