ASP.NET - 自定義控制元件

上一頁
下一頁

ASP.NET 允許使用者建立控制元件。這些使用者定義的控制元件分為以下幾類：

  • 使用者控制元件
  • 自定義控制元件

使用者控制元件

使用者控制元件類似於微型的 ASP.NET 頁面或 Web 窗體，可以被許多其他頁面使用。它們派生自 System.Web.UI.UserControl 類。這些控制元件具有以下特點：

  • 它們具有 .ascx 副檔名。
  • 它們不能包含任何 <html>、<body> 或 <form> 標籤。
  • 它們使用 Control 指令而不是 Page 指令。

為了理解這個概念，讓我們建立一個簡單的使用者控制元件，它將用作網頁的頁尾。要建立和使用使用者控制元件，請按照以下步驟操作：

  • 建立一個新的 Web 應用程式。
  • 右鍵單擊解決方案資源管理器中的專案資料夾，然後選擇“新增新項”。新增新項

  • 從“新增新項”對話方塊中選擇“Web 使用者控制元件”，並將其命名為 footer.ascx。最初，footer.ascx 只包含一個 Control 指令。

    <%@ 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" />

自定義控制元件

自定義控制元件作為單獨的程式集部署。它們被編譯成動態連結庫 (DLL)，並像任何其他 ASP.NET 伺服器控制元件一樣使用。它們可以透過以下方式建立：

  • 從現有控制元件派生自定義控制元件
  • 組合兩個或更多現有控制元件來組成新的自定義控制元件。
  • 從基控制元件類派生。

為了理解這個概念，讓我們建立一個自定義控制元件，它將簡單地向瀏覽器呈現文字訊息。要建立此控制元件，請按照以下步驟操作：

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

Solution Explorer

在“新建專案”對話方塊中，從專案模板中選擇“ASP.NET 伺服器控制元件”。

project templates

上述步驟將新增一個新專案，並向解決方案建立一個完整的自定義控制元件，名為 ServerControl1。在此示例中，讓我們將專案命名為 CustomControls。要使用此控制元件，必須在將其註冊到頁面之前將其作為引用新增到網站。要新增對現有專案的引用，請右鍵單擊專案（而不是解決方案），然後單擊“新增引用”。

從“新增引用”對話方塊的“專案”選項卡中選擇 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>

執行後，控制元件的 Text 屬性將如所示在瀏覽器上呈現：

Custom Server Controls

使用自定義控制元件

在上一個示例中，設定了自定義控制元件的 Text 屬性的值。在建立控制元件時，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);
      }
   }
}

以上程式碼是為自定義控制元件自動生成的。可以向自定義控制元件類新增事件和方法。

示例

讓我們副檔名為 SeverControl1 的上一個自定義控制元件。讓我們為它提供一個名為 checkpalindrome 的方法，使其能夠檢查迴文。

迴文是反向拼寫相同單詞/文字。例如，Malayalam、madam、saras 等。

擴充套件自定義控制元件的程式碼，應如下所示：

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>

按鈕的 Click 事件處理程式只需將文字從文字框複製到自定義控制元件的 text 屬性。

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 型別的引數，負責在瀏覽器上進行渲染。

列印頁面
上一頁
下一頁
廣告