共用方式為

HOW TO：建置和執行資料繫結 Web 組件控制項範例

  • 發行項

更新：2007 年 11 月

本主題包含建置和執行資料繫結 WebPart 控制項的指示，其完整程式碼範例可在主題資料繫結 Web 組件控制項範例中找到。該程式碼範例示範如何建立自訂伺服器控制項，該控制項會將 GridView 控制項繫結至資料來源，但也是繼承自 WebPart 類別，以便它可參與 Web 組件應用程式。本主題提供編譯程式碼範例和設定 ASP.NET Web 應用程式所需的相關資訊，以將控制項做為 Web 組件控制項執行。

編譯 WebPart 控制項

若要讓這個程式碼範例執行，必須編譯這個原始程式碼。您可以明確編譯它，並將結果組件置於網站的 [Bin] 資料夾或全域組件快取內。也可以將原始程式碼置於網站的 [App_Code] 資料夾中，以在執行階段動態編譯原始程式碼。這個程式碼範例會使用動態編譯。如需示範如何編譯的逐步解說，請參閱逐步解說：開發和使用自訂的伺服器控制項。

若要動態編譯資料繫結 WebPart 控制項

  1. 在 Web 應用程式的根資料夾中，建立名為 [App_Code] 的資料夾。

  2. 從主題資料繫結 Web 組件控制項範例中取得自訂資料繫結 WebPart 控制項的原始程式碼。將原始程式碼檔案置於 [App_Code] 資料夾中。檔案的名稱並不重要，因為您是在使用動態編譯，但是檔案必須針對您所使用的語言使用適當的副檔名 (例如 .cs 或 .vb)。

在 Web 組件應用程式中使用控制項

若要設定應用程式使用 Web 組件，只需要您擁有可驗證個別使用者的 ASP.NET 網站，以及啟用可以處理應用程式服務 (包括個人化) 的資料庫。對於這個範例 (因為它使用資料繫結控制項)，您還需要在 Web.config 檔中建立連接字串，以讓資料來源連接至 Northwind 範例資料庫。設定應用程式之後，在每個 Web 組件應用程式中，都需要將 WebPartManager 控制項和至少一個 WebPartZone 控制項加入將在 Web 組件應用程式中裝載WebPart 和伺服器控制項的每個 Web 網頁。下面的第二個程序示範如何加入這些控制項，以及如何執行讓網頁執行資料繫結控制項的其他所需步驟。

若要設定執行 Web 組件控制項的 ASP.NET 應用程式

  1. 請確定您擁有已設定用於識別個別使用者的 ASP.NET Web 應用程式。如果需要如何建立此類網站的指示，請參閱 HOW TO：在 IIS 5.0 和 6.0 中建立和設定虛擬目錄或 HOW TO：在 IIS 6.0 中建立和設定本機 ASP.NET 網站。

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

  3. 建立連接字串，以便資料繫結控制項可連接至範例 Northwind 資料庫。若要執行範例，您需要存取隨 SQL Server 提供的範例 Northwind 資料庫。如果沒有安裝 Northwind 範例資料庫，則可以從 Microsoft 下載中心 (英文) 下載要用來建立和安裝資料庫的指令碼。

    建議將連接字串置於應用程式的 Web.config 檔中。如需組態檔的詳細資訊，請參閱 ASP.NET 組態檔。在下列程式碼中，示範了 Web.config 檔中的連接字串，連接至 SSE 上執行之 Northwind 的本機執行個體。請注意，通常用於分隔資料庫檔案之路徑的單引號 (') 會呈現為實體 (")。這是必要的，因為 Web.config 是 XML 檔。

    <connectionStrings>
  <add name="nwind" 
    connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=
    &quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;
    Initial Catalog=Northwind;Integrated Security=True;"
    providerName="System.Data.SqlClient" />
</connectionStrings>
    注意事項：

    建議您加密連接字串中包含的所有敏感資訊，例如密碼。如需加密組態資料的詳細資訊，請參閱逐步解說：使用受保護的組態加密組態資訊。

  4. 在 Web.config 檔的 <system.web> 區段中，加入 <webparts> 項目。並不是每個 Web 組件應用程式都需要這麼做，但如果要使用 Web 組件應用程式的某些功能，則必須在這個區段中設定這些功能。會啟用範例資料繫結 WebPart 控制項，以匯出包含其狀態和屬性資料的組態檔。因為預設會停用 Web 組件應用程式中的匯出功能，所以您必須在 <webParts> 區段中啟用該功能。將 enabledExport 屬性 (Attribute) 加入 <webParts> 項目，並將其值設為 true，如下列程式碼範例所示。

    <webParts enableExport="true" />

  5. 儲存並關閉 Web.config 檔案。

若要準備裝載 Web 組件控制項的 Web 網頁

  1. 建立使用者控制項，該控制項可讓使用者在 Web 網頁上可用的 Web 組件顯示模式之間切換。執行資料繫結 Web 組件控制項時，這個控制項和下一個步驟不是必要的，但這個功能在許多 Web 組件頁面上都十分有用。在編輯器中，貼上使用者控制項的下列程式碼，並以名稱 Displaymodemenucs.ascx 或 Displaymodemenuvb.ascx (視您所使用的語言而定) 將檔案儲存在 Web 應用程式的根資料夾中。

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="vb" classname="DisplayModeMenuVB"%>

<script >

' Use a field to reference the current WebPartManager.
Dim _manager As WebPartManager


Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) 
    AddHandler Page.InitComplete, AddressOf InitComplete

End Sub 


Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) 
    _manager = WebPartManager.GetCurrentWebPartManager(Page)

    Dim browseModeName As String = WebPartManager.BrowseDisplayMode.Name

    ' Fill the dropdown with the names of supported display modes.
    Dim mode As WebPartDisplayMode
    For Each mode In  _manager.SupportedDisplayModes
        Dim modeName As String = mode.Name
        ' Make sure a mode is enabled before adding it.
        If mode.IsEnabled(_manager) Then
            Dim item As New ListItem(modeName + " Mode", modeName)
            DisplayModeDropdown.Items.Add(item)
        End If
    Next mode

End Sub 


' Change the page to the selected display mode.
Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) 
    Dim selectedMode As String = DisplayModeDropdown.SelectedValue

    Dim mode As WebPartDisplayMode = _manager.SupportedDisplayModes(selectedMode)
    If Not (mode Is Nothing) Then
        _manager.DisplayMode = mode
    End If

End Sub 


Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name

End Sub 

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="C#" classname="DisplayModeMenuCS"%>

<script >

 // Use a field to reference the current WebPartManager.
  WebPartManager _manager;

  void Page_Init(object sender, EventArgs e)
  {
    Page.InitComplete += new EventHandler(InitComplete);
  }  

  void InitComplete(object sender, System.EventArgs e)
  {
    _manager = WebPartManager.GetCurrentWebPartManager(Page);

    String browseModeName = WebPartManager.BrowseDisplayMode.Name;

    // Fill the dropdown with the names of supported display modes.
    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)
    {
      String modeName = mode.Name;
      // Make sure a mode is enabled before adding it.
      if (mode.IsEnabled(_manager))
      {
        ListItem item = new ListItem(modeName + " Mode", modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

  }

  // Change the page to the selected display mode.
  void DisplayModeDropdown_SelectedIndexChanged(object sender, 
    EventArgs e)
  {
    String selectedMode = DisplayModeDropdown.SelectedValue;

    WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode];
    if (mode != null)
      _manager.DisplayMode = mode;

  }

  void Page_PreRender(object sender, EventArgs e)
  {
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;
  }

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

  2. 建立新的 ASP.NET Web 網頁，以裝載自訂 WebPart 控制項和其他控制項。就在 Page 指示詞之下，將 Register 指示詞加入網頁，以註冊剛剛建立的使用者控制項。指示詞內容視您所使用的語言而定，應該看起來與下列範例相同。

    [Visual Basic]

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

    [C#]

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

  3. 現在加入自訂 WebPart 控制項的 Register 指示詞。因為本主題使用動態編譯，所以您無需將 Assembly 屬性加入指示詞。就在檔案中前一個指示詞之下，加入另一個 Register 指示詞，將任意字串指派給其 tagprefix 屬性，並將自訂控制項的命名空間指派給 namespace 屬性 (仍視所使用的語言而定)，如下列範例所示。

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

  4. 就在 <form> 項目內，將 <asp:webpartmanager> 項目加入網頁，如下列程式碼範例所示。使用 Web 組件的每個網頁上都需要有 WebPartManager 控制項。

    <asp:webpartmanager id="WebPartManager1" >
</asp:webpartmanager>

  5. 就在 <asp:webpartmanager> 項目之後，宣告用於切換顯示模式的使用者控制項。宣告控制項的方式視您所使用的語言而定，如下列程式碼範例所示。

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1"  />

    <uc1:displaymodecs id="Displaymodecs1"  />

  6. 在使用者控制項之後，加入具有一列兩行的表格，以結構化網頁上控制項的配置。該表格標記應該看起來與下列程式碼範例相同。

    <table style="width: 80%; position: relative">
  <tr valign="top">
    <td style="width: 40%">
    </td>
    <td style="width: 40%">
    </td>
  </tr>
</table>

  7. 在每組 <td> 標記內，加入 <asp:webpartzone> 項目。需要有衍生自 WebPartZoneBase 類別的區域，以包含 WebPart 控制項，並讓其具有完整的 Web 組件功能。第一個區域的標記應該看起來與下列程式碼範例相同。

    <asp:webpartzone id="WebPartZone1"  
  style="position: relative" >
  <parttitlestyle font-size="14" font-names="Verdana" />
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

    第二個區域的標記應該看起來如下。

    <asp:webpartzone id="WebPartZone2"  
  style="position: relative" >
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  8. 在第一個區域中的 <zonetemplate> 標記之間宣告自訂資料繫結 WebPart 控制項，如下列程式碼範例所示。請注意，標記 (Markup) 會使用控制項之 Register 指示詞中定義的標記 (Tag) 前置詞，以及自訂控制項的類別名稱。還要注意，在控制項中定義的自訂屬性 (Property) ConnectionString 會顯示為已指派 Web.config 檔中連接字串的屬性 (Attribute)。這個方法可讓網頁開發人員決定用於控制項的連接字串。該標記應該看起來如下。

    <aspSample:SmallGridWebPart id="grid1"  
  title="Customer Phone List" width="300" 
  connectionstring="<%$ ConnectionStrings:nwind %>"   />

  9. 為了進行比較，請在第二個區域中的 <zonetemplate> 標記之間宣告一般日曆伺服器控制項。因為您是在將控制項置於 WebPartZone 控制項中，所以它的行為會與執行階段的 WebPart 控制項相同。如需在 Web 組件應用程式中使用伺服器控制項的詳細資訊，請參閱在 Web 組件應用程式中使用 ASP.NET 伺服器控制項。該標記應該看起來與下列程式碼範例相同。

    <asp:calendar id="Calendar1"  
  style="position: relative"></asp:calendar>

  10. 儲存並關閉網頁。您現在已準備好執行網頁和測試自訂 WebPart 控制項。已完成的網頁程式碼應該看起來與下列程式碼範例相同。

    <%@ Page Language="VB" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

<!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 >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodevb id="Displaymodevb1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

<!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 >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodecs id="Displaymodecs1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana, Arial" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

請參閱

概念

建立資料繫結 Web 組件控制項

資料繫結 Web 組件控制項範例