共用方式為

逐步解說：以使用者控制項實作 Web 組件個人化

  • 發行項

更新：2007 年 11 月

本逐步解說將示範如何建立依賴 Web 組件個人化的 ASP.NET 使用者控制項，以便在 Web 網頁上提供使用者專屬的預設值。

ASP.NET Web 組件能使您以組合式的配置來建置 Web 網頁，而讓使用者可以在其中依個人的偏好設定來修改外觀和內容。被稱為個人化的主要 Web 組件功能可以讓您為每個網頁儲存使用者專屬的設定，並在未來的瀏覽器工作階段 (Session) 中重複使用那些設定。

使用 Web 組件和個人化，您建置的 Web 網頁可以包含對許多 Web 應用程式有效的功能：以表單形式提供使用者專屬之預設值的功能。這個逐步解說會示範如何藉由實作可視為個人化之 Web 組件控制項的使用者控制項，以提供使用者專屬的預設值。這個開發方法，例如對於如果您所建立的是供客服專員填寫線上表單的應用程式，則是有用的，Web 組件和個人化功能可讓您的網頁辨認每個服務人員。使用者控制項允許每個服務人員為表單上的欄位儲存預設值，然後在後續造訪網頁時可以自動填寫預設值。

注意事項：

在這個逐步解說中建立的使用者控制項不是繼承自 WebPart 類別。但是在這個逐步解說中，您了解到使用者控制項可當做 WebPart 控制項來運作。在逐步解說期間，您將使用者控制項加入 WebPartZoneBase 區域。這樣做可以讓 ASP.NET 將使用者控制項包裝在 GenericWebPart 控制項中。然後使用者控制項將和任何其他 WebPart 控制項一樣運作，並將允許您瀏覽個人化。

在瀏覽這份逐步解說期間，您將了解如何：

  • 使用可個人化的屬性建立使用者控制項，該屬性值可以儲存在長期儲存裝置中。

  • 顯示 Web 網頁中表單上之使用者專屬的預設值。

  • 使用區域中的使用者控制項，做為真正的 WebPart 控制項。

    注意事項：

    這種型別的應用程式可以使用 ASP.NET 設定檔開發。然而，在這種情況下，不像是在購物車應用程式中，要儲存在整個應用程式內重複使用之使用者的相關資訊。而是為每個控制項儲存使用者專屬的偏好設定或設定，以每頁為基礎。如需設定檔的詳細資訊，請參閱 ASP.NET 設定檔屬性概觀。

必要條件

若要完成這個逐步解說，您必須要有：

  • 在要裝載 (Host) 站台之電腦上安裝並設定的網際網路資訊服務 (IIS)。如需安裝及設定 IIS 的詳細資訊，請參閱安裝作業中所附的 IIS 說明文件，或是 Microsoft TechNet 網站上的線上 IIS 文件 (Internet Information Services 6.0 技術資源) (英文)。

  • 可以識別個別使用者的 ASP.NET 網站。如果您已經設定了這類的站台，即可使用該站台做為此逐步解說的起點。否則，如需建立虛擬目錄或站台的詳細資訊，請參閱 HOW TO：在 IIS 5.0 和 6.0 中建立和設定虛擬目錄。

  • 設定的個人化提供者和資料庫。根據預設，會啟用 Web 組件個人化，而且這項功能會使用 SQL 個人化提供者 (SqlPersonalizationProvider)，並搭配 Microsoft SQL Server Standard Edition 以儲存個人化資料。本逐步解說會使用 SSE 和預設的 SQL 提供者。如果您已經安裝 SSE，則不需要進行任何組態設定。SSE 是 Microsoft Visual Studio 2005 的選擇性安裝部分，也可以免費下載。如需詳細資訊，請參閱 Microsoft SQ Web 網頁 (英文)。若要使用其中一個 SQL Server 完整版本，您必須安裝和設定 ASP.NET 應用程式服務資料庫，並設定 SQL 個人化提供者以連接到該資料庫。如需詳細資訊，請參閱 建立及設定 SQL Server 的應用程式服務資料庫。您也可以建立和設定自訂的提供者，以便使用其他非 SQL 資料庫或儲存方案。如需詳細資訊和程式碼範例，請參閱實作成員資格提供者。

建立可個人化的使用者控制項

在這個部分的逐步解說中，您會建立針對服務人員資訊表單提供使用者介面 (UI) 的使用者控制項。控制項還公開 (Expose) 名稱和電話號碼資訊之可個人化的屬性。

注意事項：

您無需啟用 Web 組件個人化，它已預設為啟用。如需個人化的詳細資訊，請參閱 Web 組件個人化概觀。

若要建立使用者控制項之可個人化的屬性

  1. 在文字編輯器中建立新檔案，然後將下列控制項宣告加入至檔案的開頭，並加上一組 <script> 開頭和結尾標記。

    <%@ control language="VB" classname="AccountUserControl" %>
<script >
</script>

    <%@ control language="C#" classname="AccountUserControl" %>
<script >
</script>

  2. 在 <script> 標記內，加入程式碼以建立兩個可個人化的屬性：一個名為 UserName，另一個名為 Phone，如下列範例所示。

    注意事項：

    每個屬性都有 Personalizable 屬性。這樣會讓 Web 組件個人化將屬性值儲存在資料庫中。

    		 
      <Personalizable()> _
  Property UserName() As String

    Get
      If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox1.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox1.Text = value
    End Set

  End Property

  <Personalizable()> _
  Property Phone() As String

    Get
      If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox2.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox2.Text = value
    End Set

  End Property

      [Personalizable]
  public string UserName
  {
    get
    {
      if(Textbox1.Text == null | Textbox1.Text.Length < 0)
        return String.Empty;
      else
        return Textbox1.Text;
    }

    set
    {
      Textbox1.Text = value;
    }
  }

  [Personalizable]
  public string Phone
  {
    get
    {
      if(Textbox2.Text == null | Textbox2.Text.Length < 0)
        return String.Empty;
      else
        return Textbox2.Text;
    }

    set
    {
      Textbox2.Text = value;
    }
  }
    安全性注意事項：

    此控制項具有接受使用者輸入的文字方塊，而這是一項可能的安全性威脅。ASP.NET Web 網頁預設會驗證使用者輸入，以確保輸入中未包含 HTML 項目或指令碼。如需詳細資訊，請參閱指令碼攻擊概觀。

  3. 將檔案命名為 AccountUserControlCS.ascx 或 AccountUserControlVB.ascx (視您所使用的語言而定)，並將其儲存在網站的根目錄中。

既然已經加入可個人化的屬性以儲存預設值，就可以將 UI 控制項加入使用者控制項，以顯示使用者名稱和電話號碼。

若要將 UI 控制項加入使用者控制項

  1. 在 <script> 標記之下，加入由 <div> 標記包封的 Label 控制項和 TextBox 控制項，以便包含使用者的名稱，如下列程式碼範例所示：

    <div>
<asp:label id="Label1" >Name</asp:label>
<asp:textbox id="Textbox1"  />
</div>

  2. 在剛加入的控制項之下，加入由 <div> 標記包封的 Label 控制項和 TextBox 控制項，以便包含使用者的電話號碼，如下列範例所示：

    <div>
<asp:label id="Label2" >Phone</asp:label>
<asp:textbox id="Textbox2"  />
</div>

  3. 在剛加入的控制項之下，加入由 <div> 標記包封的 <asp:button> 項目，以便藉由執行回傳來儲存使用者的資訊：

    <div>
<asp:button id="Button1"  
  text="Save Form Values" />
</div>

  4. 儲存檔案。

將使用者控制項引用為 Web 組件控制項

既然您已使用可個人化的屬性建立了使用者控制項，就可以建立 ASP.NET Web 網頁，將使用者控制項裝載為 Web 組件控制項。需要將控制項裝載為 Web 組件控制項，個人化功能才能運作。

若要將使用者控制項引用為 Web 組件控制項

  1. 在文字編輯器中建立新檔案，然後將下列網頁宣告加入至檔案的開頭：

    <%@ page language="VB" %>

    <%@ page language="C#" %>

  2. 在網頁宣告之下，加入宣告來參考先前建立的使用者控制項，如下列範例所示：

    <%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlvb.ascx"%>

    <%@ register tagprefix="uc1" 
    tagname="AccountUserControl" 
    src="AccountUserControlcs.ascx"%>

  3. 在控制項引用下，加入下列基本網頁結構，以將使用者控制項裝載為 Web 組件控制項。

    注意事項：

    對於用做 Web 組件控制項的使用者控制項，網頁必須包含 <asp:webpartmanager> 項目，且使用者控制項必須接續包含在 <asp:webpartzone> 項目和 <zonetemplate> 項目內。

    		 
    <html>
<head >
    <title>Personalizable User Control</title>
</head>
<body>
    <form id="form1" >
      <asp:webpartmanager id="WebPartManager1"   />
      <asp:webpartzone id="zone1"  headertext="Main">
        <zonetemplate>
          <uc1:AccountUserControl 

            id="accountwebpart"
            title="Agent Information" /> 
        </zonetemplate>
      </asp:webpartzone>
    </form>
</body>
</html>

  4. 將檔案命名為 Hostaccountcontrol.aspx，並將其儲存在與使用者控制項相同的目錄中。

您現在已經建立可個人化的使用者控制項，並將其引用為 Web Form 網頁中的 Web 組件控制項。最後步驟是測試使用者控制項。

若要測試可個人化的使用者控制項

  1. 在瀏覽器中載入 Hostaccountcontrol.aspx 網頁。

  2. 在 [名稱] 和 [電話號碼] 欄位中輸入值，並按一下 [儲存表單值] 按鈕。

  3. 關閉瀏覽器。

  4. 再次在瀏覽器中載入網頁。

    您先前所輸入的值隨即出現在表單中。這些值是已儲存在可個人化之屬性中的值，並當您在瀏覽器中重新載入網頁時，從資料庫還原。

  5. 在表單中輸入新值，但是請不要按一下按鈕儲存它們。

  6. 關閉瀏覽器。

  7. 再次在瀏覽器中載入網頁。

    您所輸入並儲存在個人化屬性中的原始值與重新出現在表單中的一樣，因為您並沒有儲存新值。

後續步驟

這個逐步解說示範了關於使用可個人化之屬性建立使用者控制項的基本工作。您建立的控制項允許您儲存特定控制項和網頁之使用者專屬的設定，並當使用者在新的瀏覽器工作階段中重新造訪網頁時顯示那些儲存的設定。另外，建議您再深入研究的重點包括：

請參閱

概念

ASP.NET Web 組件概觀

Web 組件個人化概觀