ASP.NET 允許使用者建立控制項。這些使用者定義的控制項被分類為:
使用者控制項
自訂控制項
使用者控制項行為像微型ASP.NET 頁面或網頁表單,它能被許多其他頁面使用。這些都是源自於System.Web.UI.UserControl 類別。這些控制項有下列特性:
它們有.ascx 擴充。
它們可能不會含有任何, 或 標籤。
它們有一個Control 指令而不是一個Page 指令。
為了理解這個概念,讓我們建立一個簡單的使用者控件,它將作為web 頁面的頁腳使用。為了建立和使用使用者控件,請採取以下步驟:
建立一個新的web 應用程式。
在Solution Explorer 上右鍵按一下項目資料夾並且選擇ADD New Item。
從Add New Item 對話方塊中選擇Web User Control 並且把它命名為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, AP </td> </ tr></table>
為為你的web 網頁新增使用者控件,你必須加入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>
執行後,頁面顯示了頁腳而且這個控制項能在所有你的網站的頁面中被使用。
觀察以下:
(1) Register 指令為控制項指定了一個標籤名稱和標籤前綴。
<%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>
(2)下列的標籤名稱和前綴應該在頁面上新增使用者控制項時被使用:
<Tfooter:footer ID="footer1" runat="server" />
自訂控制項被部署為單獨的集合。它們被編譯成動態連結函式庫(DLL)並且作為任何其他的ASP.NET 服務控制項來使用。它們能被以下方法中的任何一個來創建:
透過從一個存在的控制項中獲得一個自訂控制項。
透過聯合兩個或更多的存在的控制項來組成一個新的自訂控制項。
透過從基本的控制項類別中獲得。
為了理解這個概念,讓我們建立一個自訂類,它將簡單地在瀏覽器上呈現一條簡訊。為了建立控件,請採取以下步驟:
建立一個新的網站。在Solution Explorer 中樹的頂端右鍵點選solution(不是項目)。
在New Project 對話方塊中,從專案範本中選擇ASP.NET Server Control。
上面的步驟新增了一個新的專案並且為solution 建立了一個完整的自訂控件,叫做ServerControl1。在這個例子中,讓我命名CustomControls 專案。為了使用這個控件,它必須在頁面上註冊之前作為引用添加到網頁中。為了新增引用到已存在的項目中,請右鍵點選項目(不是solution),並且點選Add Reference。
從Add Reference 對話方塊中的Projects 標籤選擇CustomControl 項目。 Solution Explorer 能顯示引用。
為了在頁面上使用控件,在@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 屬性被展示在瀏覽器上,如下所示:
在先前的範例中,自訂類別的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); } }}
上述的程式碼會自動產生給一個自訂控制項。事件和方法能被加入到custom control 類別中。
讓我們擴展之前的名為ServerControl1 的自訂控制項。讓我們給它一個名為checkpalindrome 的方法,它將給它權限來檢查palindrome。
Palindrome 是當顛倒時仍拼寫相同的文字/字面值。例如,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; } } }}
當你改變空間的程式碼時,你必須透過點擊Build --> Build Solution 來建立方法,這樣改變才能反映在你的專案中。為頁面新增一個text box 和一個button 控件,這樣使用者才能提供一段text。當button 被點擊時,它就被用來檢查palindrome。
<form id="form1" runat="server"> <div> Enter a word: <br /> <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox> <br /> < br /> <asp:Button ID="Button1" runat="server onclick="Button1_Click" Text="Check Palindrome" /> <br /> <br /> <ccs:ServerControl1 ID="ServerControl11" runat="server" Text = "" /> </div></form>
button 的Click 事件句柄簡單地將text box 中的text 複製到自訂控制項的text 屬性中。
protected void Button1_Click(object sender, EventArgs e){ this.ServerControl11.Text = this.TextBox1.Text;}
當被執行後,控制項成功地偵測到了palindromes。
觀察以下:
(1)當你為自訂控制項新增一個參考時,它被加到toolbox 並且你可以像其他控制項一樣從toolbox 中直接使用它。
(2) custom control 類別的RenderContents 方法被覆寫了,你可以加入你自己的方法和事件。
(3) RenderContents 方法採用了HtmlTextWriter 型的參數,它將對在瀏覽器上顯示負責。