ASP.NET 使用者控制項概觀

更新:2007 年 11 月

有些時候,您會需要內建 ASP.NET Web 伺服器控制項並未提供的控制項功能。在這種情況下,您可以建立自己的控制項。您有兩個選項。您可以建立:

  • 使用者控制項。使用者控制項是可以放置標記和 Web 伺服器控制項的容器。然後您可以將使用者控制項視為一個單位,並且定義其屬性與方法。

  • 自訂控制項。自訂控制項是您撰寫並且衍生自 ControlWebControl 的類別。

因為您可以重複使用現有的控制項,所以使用者控制項比自訂控制項容易建立。這個選項讓您特別容易建立使用複雜使用者介面項目的控制項。

這個主題提供使用 ASP.NET 使用者控制項的概觀。

使用者控制項結構

ASP.NET Web 使用者控制項類似完整的 ASP.NET Web 網頁 (.aspx 檔),同時擁有使用者介面網頁和程式碼。建立使用者控制項的方式與建立 ASP.NET Web 網頁大致相同,然後加入需要的標記和子控制項。使用者控制項可以包含程式碼,以便使用類似網頁的方式管理內容,其中包括執行像是資料繫結的工作。

使用者控制項與 ASP.NET Web 網頁有下列不同:

  • 使用者控制項的副檔名是 .ascx。

  • 使用者控制項包含定義組態和其他屬性的 @ Control 指示詞,而不是 @ Page 指示詞。

  • 使用者控制項無法以獨立檔案方式執行。而是必須像處理任何控制項一樣將其加入 ASP.NET Web 網頁。

  • 使用者控制項沒有 html、body 或 form 項目。這些項目必須在裝載網頁中。

您可以像 ASP.NET Web 網頁一樣,在使用者控制項上使用相同的 HTML 項目 (除了 html、body 或 form 項目以外) 和 Web 控制項。例如,如果您要建立使用者控制項做為工具列來使用,可以在控制項中放置一系列的 Button Web 伺服器控制項,並建立這些按鈕的事件處理常式。

下列範例顯示實作微調控制項的使用者控制項,使用者可以按一下上下按鈕在文字方塊中挑選一系列選項。

安全性注意事項:

這個範例有一個可接受使用者輸入的文字方塊,這可能會造成安全性威脅。ASP.NET Web 網頁預設會驗證使用者輸入,但不包含當中的指令碼或 HTML 項目。如需詳細資訊,請參閱指令碼攻擊概觀

<%@ Control Language="VB" ClassName="UserControl1" %>
<script >
    Protected colors As String() = {"Red", "Green", "Blue", "Yellow"}
    Protected currentColorIndex As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If IsPostBack Then
            currentColorIndex = CInt(ViewState("currentColorIndex"))
        Else
            currentColorIndex = 0
            DisplayColor()
        End If
    End Sub
    
    Protected Sub DisplayColor()
        textColor.Text = colors(currentColorIndex)
        ViewState("currentColorIndex") = currentColorIndex.ToString()
    End Sub

    Protected Sub buttonUp_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = 0 Then
            currentColorIndex = colors.Length - 1
        Else
            currentColorIndex -= 1
        End If
        DisplayColor()
    End Sub
    
    Protected Sub buttonDown_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs)
        If currentColorIndex = colors.Length - 1 Then
            currentColorIndex = 0
        Else
            currentColorIndex += 1
        End If
        DisplayColor()
    End Sub
</script>
<asp:TextBox ID="textColor"  
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"   
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"  
    Text="v" OnClick="buttonDown_Click" />
<% @ Control Language="C#" ClassName="UserControl1" %>
<script >
    protected int currentColorIndex;
    protected String[] colors = {"Red", "Blue", "Green", "Yellow"};
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            currentColorIndex = 
                Int16.Parse(ViewState["currentColorIndex"].ToString());
        }
        else
        {
            currentColorIndex = 0;
            DisplayColor();
        }
    }
    
    protected void DisplayColor()
    {
        textColor.Text = colors[currentColorIndex];
        ViewState["currentColorIndex"] = currentColorIndex.ToString();
    }
    
    protected void buttonUp_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == 0)
        {
            currentColorIndex = colors.Length - 1;
        }
        else
        {
            currentColorIndex -= 1;
        }
        DisplayColor();
    }

    protected void buttonDown_Click(object sender, EventArgs e)
    {
        if(currentColorIndex == (colors.Length - 1))
        {
            currentColorIndex = 0;
        }    
        else
        {
            currentColorIndex += 1;
        }
        DisplayColor();
    }
</script>
<asp:TextBox ID="textColor"  
    ReadOnly="True" />
<asp:Button Font-Bold="True" ID="buttonUp"  
    Text="^" OnClick="buttonUp_Click" />
<asp:Button Font-Bold="True" ID="buttonDown"  
    Text="v" OnClick="buttonDown_Click" />

請注意,使用者控制項看起來很像 ASP.NET Web 網頁,其包含幾個控制項 (一個 TextBox 控制項和兩個 Button 控制項) 以及處理按鈕 Click 事件與網頁 Load 事件的程式碼。然而,使用者控制項並未包含標記 (除了內含控制項的標記以外),並且其包含 @ Control 指示詞而不是 @ Page 指示詞。

將使用者控制項加入網頁

您可以在裝載網頁上藉由註冊方式將使用者控制項加入網頁。當您註冊時,請指定包含使用者控制項的 .ascx 檔、標記前置詞,以及用來宣告網頁上使用者控制項的標記名稱。如需詳細資訊,請參閱 HOW TO:在 ASP.NET Web 網頁中包含使用者控制項

定義使用者控制項的屬性和方法

您可以使用與網頁相同的方式,定義使用者控制項的屬性和方法。您可以藉由定義使用者控制項的屬性,以宣告方式並在程式碼中設定其屬性。

使用者控制項中的事件

當使用者控制項包含 Web 伺服器控制項時,您可以在使用者控制項中撰寫程式碼,以便處理子控制項引發的事件。例如,如果使用者控制項包含 Button 控制項,您可以在使用者控制項中建立按鈕 Click 事件的處理常式。

根據預設,裝載網頁無法使用由使用者控制項之子控制項引發的事件。然而,您可以定義使用者控制項的事件然後加以引發,將事件告知裝載網頁。您可以使用與定義任何類別事件相同的方式,執行這個動作。如需詳細資訊,請參閱引發事件

參考外部資源

當執行使用者控制項時,就會使用使用者控制項的 URL 做為基礎 URL,解析外部資源 (例如影像) 的參考或是其他網頁的錨點。例如,如果使用者控制項包含 ImageUrl 屬性設定為 Images/Button1.gif 的 Image 控制項,影像的 URL 會加入使用者控制項的 URL,以解析影像的完整路徑。如果使用者控制項參考的資源,不是在使用者控制項本身的子資料夾中,您必須提供路徑以便在執行階段解析為正確資料夾。如需指定 ASP.NET 伺服器控制項路徑的詳細資訊,請參閱 ASP.NET 網站路徑

快取和使用者控制

使用者控制項可以支援有別於裝載網頁的快取指示詞。因此,您可以將使用者控制項加入網頁然後快取部分網頁。如需詳細資訊,請參閱 ASP.NET Web 網頁的快取部分

請參閱

其他資源

ASP.NET 使用者控制項