極客書

ASP.NET - Custom Controls

ASP.NET允許用戶創建控制項。這些用戶定義的控制項分爲：

  • User controls
  • Custom controls

User Controls

用戶控制項的行爲類似於微型ASP.NET頁面或web窗體，可供許多其他頁面使用。這些是從System.Web.UI.UserControl類派生的。這些控制項具有以下特徵：

  • They have an .ascx extension.
  • They may not contain any <html>, <body>, or <form> tags.
  • They have a Control directive instead of a Page directive.

爲了理解這個概念，讓我們創建一個簡單的用戶控制項，它將作爲網頁的頁腳。要創建和使用用戶控制項，請執行以下步驟：

  • Create a new web application.
  • Right click on the project folder on the Solution Explorer and choose Add New Item. Add New Item

  • 從「添加新項」對話框中選擇「Web用戶控制項」，並將其命名爲footer.ascx。最初，footer.ascx只包含一個控制指令。

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" 
   Inherits="customcontroldemo.footer" %>

  • 向文件中添加以下代碼：

    <table>
   <tr>
      <td align="center"> Copyright ©2010 TutorialPoints Ltd.</td>
   </tr>

   <tr>
      <td align="center"> Location: Hyderabad, A.P </td>
   </tr>
</table>

若要將用戶控制項添加到網頁，必須將Register指令和用戶控制項的實例添加到網頁。以下代碼顯示內容文件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %>
   
<%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

   <head runat="server">
      <title>
         Untitled Page
      </title>
   </head>
   
   <body>
   
      <form id="form1" runat="server">
         <div>
         
            <asp:Label ID="Label1" runat="server" Text="Welcome to ASP.Net Tutorials "></asp:Label>
            <br />  <br />
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  Text="Copyright Info" />
            
         </div>
         <Tfooter:footer ID="footer1" runat="server" />
      </form>
      
   </body>
</html>

執行時，頁面顯示頁腳，此控制項可用於網站的所有頁面。

Custom Result

注意以下事項：

（1） Register指令指定控制項的標記名和標記前綴。

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

（2） 在頁面上添加用戶控制項時，應使用以下標記名和前綴：

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

Custom Controls

自定義控制項部署爲單個程序集。它們被編譯成動態連結庫（DLL）並用作任何其他ASP.NET伺服器控制項。它們可以通過以下任一方式創建：

  • By deriving a custom control from an existing control
  • By composing a new custom control combing two or more existing controls.
  • By deriving from the base control class.

爲了理解這個概念，讓我們創建一個自定義控制項，它只需在瀏覽器上呈現一條文本消息。要創建此控制項，請執行以下步驟：

創建一個新網站。右鍵單擊解決方案資源管理器中樹頂部的解決方案（而不是項目）。

Solution Explorer

在「新建項目」對話框中，從項目模板中選擇「ASP.NET伺服器控制項」。

project templates

上面的步驟將添加一個新項目，並爲解決方案創建一個完整的自定義控制項，稱爲ServerControl1。在本例中，我們將項目命名爲CustomControls。若要使用此控制項，必須將其添加爲對網站的引用，然後才能將其註冊到網頁上。若要添加對現有項目的引用，請在項目（而不是解決方案）上單擊滑鼠右鍵，然後單擊「添加引用」。

從「添加引用」對話框的「項目」選項卡中選擇「自定義控制項」項目。解決方案資源管理器應顯示引用。

Custom Controls

要在頁上使用控制項，請在@page指令下面添加Register指令：

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

此外，您可以使用控制項，類似於任何其他控制項。

<form id="form1" runat="server">
   <div>
      <ccs:ServerControl1 runat="server" Text = "I am a Custom Server Control" />
   </div> 
</form>

執行時，控制項的文本屬性將在瀏覽器上呈現，如下所示：

Custom Server Controls

Working with Custom Controls

在上一個示例中，設置了自定義控制項的文本屬性的值。默認情況下，在創建控制項時，ASP.NET添加了此屬性。下面的控制項代碼隱藏文件揭示了這一點。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
   [DefaultProperty("Text")]
   [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")]
   
   public class ServerControl1 : WebControl
   {
      [Bindable(true)]
      [Category("Appearance")]
      [DefaultValue("")]
      [Localizable(true)]
      
      public string Text
      {
         get
         {
            String s = (String)ViewState["Text"];
            return ((s == null) ? "[" + this.ID + "]" : s);
         }
         
         set
         {
            ViewState["Text"] = value;
         }
      }
      
      protected override void RenderContents(HtmlTextWriter output)
      {
         output.Write(Text);
      }
   }
}

以上代碼是爲自定義控制項自動生成的。事件和方法可以添加到自定義控制項類中。

Example

讓我們展開前面名爲SeverControl1的自定義控制項。讓我們給它一個名爲checkpalindrome的方法，它有權檢查回文。

回文是在反轉時拼寫相同的單詞/文字。例如，馬拉雅拉姆、夫人、薩拉等。

擴展自定義控制項的代碼，該代碼應如下所示：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
   [DefaultProperty("Text")]
   [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1  >")]
   
   public class ServerControl1 : WebControl
   {
      [Bindable(true)]
      [Category("Appearance")]
      [DefaultValue("")]
      [Localizable(true)]
      
      public string Text
      {
         get
         {
            String s = (String)ViewState["Text"];
            return ((s == null) ? "[" + this.ID + "]" : s);
         }
         
         set
         {
            ViewState["Text"] = value;
         }
      }
      
      protected override void RenderContents(HtmlTextWriter output)
      {
         if (this.checkpanlindrome())
         {
            output.Write("This is a palindrome: <br />");
            output.Write("<FONT size=5 color=Blue>");
            output.Write("<B>");
            output.Write(Text);
            output.Write("</B>");
            output.Write("</FONT>");
         }
         else
         {
            output.Write("This is not a palindrome: <br />");
            output.Write("<FONT size=5 color=red>");
            output.Write("<B>");
            output.Write(Text);
            output.Write("</B>");
            output.Write("</FONT>");
         }
      }
      
      protected bool checkpanlindrome()
      {
         if (this.Text != null)
         {
            String str = this.Text;
            String strtoupper = Text.ToUpper();
            char[] rev = strtoupper.ToCharArray();
            Array.Reverse(rev);
            String strrev = new String(rev);
            
            if (strtoupper == strrev)
            {
               return true;
            }
            else
            {
               return false;
            }
         }
         else
         {
            return false;
         }
      }
   }
}

更改控制項的代碼時，必須通過單擊「生成」->「生成解決方案」來生成解決方案，以便將更改反映在項目中。在頁面中添加文本框和按鈕控制項，以便用戶可以提供文本，當單擊按鈕時，將檢查是否有回文。

<form id="form1" runat="server">
   <div>
      Enter a word:
      <br />
      <asp:TextBox ID="TextBox1" runat="server" style="width:198px"> </asp:TextBox>
      
      <br /> <br />
      
      <asp:Button ID="Button1" runat="server onclick="Button1_Click" Text="Check Palindrome" style="width:132px" />
      
      <br /> <br />
      
      <ccs:ServerControl1 ID="ServerControl11" runat="server" Text = "" />
   </div>
</form>

按鈕的單擊事件處理程序只是將文本從文本框複製到自定義控制項的文本屬性。

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

執行時，控制項將成功檢查回文。

checks palindromes

注意以下事項：

（1） 向自定義控制項添加引用時，它將被添加到工具箱中，您可以直接從工具箱中使用它，與任何其他控制項類似。

custom control reference

（2） 自定義控制項類的RenderContents方法在此處被重寫，因爲您可以添加自己的方法和事件。

（3） RenderContents方法接受HtmlTextWriter類型的參數，該參數負責在瀏覽器上進行呈現。