逐步解說：建立 SharePoint 的 Web 組件

Web 組件可讓使用者直接透過瀏覽器，修改 SharePoint 網站頁面的內容、外觀及行為。 本逐步解說將示範如何使用 Visual Studio 2010 中的 [網頁組件] 項目範本，建立網頁組件。

網頁組件會在資料格中顯示員工。 使用者可指定包含員工資料之檔案的位置， 也可以篩選資料格，讓清單只顯示經理級的員工。

這個逐步解說將說明下列工作：

• 使用 Visual Studio [網頁組件] 項目範本建立網頁組件。

• 建立可由網頁組件的使用者設定之屬性， 這個屬性會指定員工資料檔案的位置。

• 將控制項加入至網頁組件控制項集合，以呈現網頁組件中的內容。

• 建立稱為「動詞命令」(Verb) 的新功能表項目，該項目會出現在呈現之網頁組件的動詞命令功能表中。 動詞命令可讓使用者修改出現在網頁組件中的資料。

• 在 SharePoint 中測試網頁組件。

  注意事項
  在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置： 您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。 如需詳細資訊，請參閱 使用設定。

必要條件

您需要下列元件才能完成此逐步解說：

• 支援的 Microsoft Windows 和 SharePoint 版本。 如需詳細資訊，請參閱開發 SharePoint 方案的要求。

• Visual Studio 2010 Professional 或某個 Visual Studio Application Lifecycle Management (ALM) 版本。

建立空的 SharePoint 專案

首先，請建立 [空的 SharePoint 專案]， 稍後您將使用 [網頁組件] 項目範本，將網頁組件加入至專案。

若要建立空的 SharePoint 專案

1. 使用 [以系統管理員身分執行] 選項來啟動 Visual Studio 2010。

2. 在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。

   [新增專案] 對話方塊隨即出現。

3. 開啟 [新增專案] 對話方塊、在您要使用之語言下展開 [SharePoint] 節點，然後選取 [2010] 節點。

4. 在 [範本] 窗格中，選取 [空的 SharePoint 專案]，然後按一下 [確定]。

   [SharePoint 自訂精靈] 隨即出現。 這個精靈可讓您選取用來偵錯專案的網站以及方案的信任層級。

5. 選取 [部署為陣列方案]，然後按一下 [完成] 以接受預設的本機 SharePoint 網站。

在專案中加入網頁組件。

在專案中加入 [網頁組件] 項目， [網頁組件] 項目隨即加入網頁組件程式碼檔案。 稍後，您會在網頁組件程式碼檔案中加入程式碼，以呈現網頁組件的內容。

若要在專案中加入網頁組件

1. 按一下 [專案] 功能表上的 [加入新項目]。

2. 在 [加入新項目] 對話方塊中，在 [已安裝的範本] 窗格中展開 [SharePoint] 節點，然後按一下 [2010]。

3. 在 SharePoint 範本清單中，選取 [Web 組件]，然後按一下 [加入]。

   [網頁組件] 項目就會出現在 [方案總管] 中。

呈現網頁組件的內容

您可以指定要在網頁組件中顯示的控制項，只要將這些控制項加入至網頁組件類別的控制項集合即可。

若要呈現網頁組件的內容

1. 在 [方案總管] 中，按兩下 WebPart1.vb (使用 Visual Basic 時) 或 WebPart1.cs (使用 C# 時)。

   網頁組件程式碼檔案隨即在 [程式碼編輯器] 中開啟。

2. 在網頁組件程式碼檔案頂端加入下列陳述式。

   Imports System.Data
   

   using System.Data;
   

3. 將下列程式碼加入至 WebPart1 類別。 這個程式碼會宣告下列欄位：

   • 用來在網頁組件中顯示員工的資料格。

   • 顯示在用來篩選資料格之控制項上的文字。

   • 在資料格無法顯示資料時，用來顯示錯誤訊息的標籤。

   • 包含員工資料檔案之路徑的字串。

   Private grid As DataGrid
   Private Shared verbText As String = "Show Managers Only"
   Private errorMessage As New Label()
   Protected xmlFilePath As String
   

   private DataGrid grid;
   private static string verbText = "Show Managers Only";
   private Label errorMessage = new Label();
   protected string xmlFilePath;
   

4. 將下列程式碼加入至 WebPart1 類別。 這個程式碼會在網頁組件中加入名為 DataFilePath 的自訂屬性。 自訂屬性就是使用者可以在 SharePoint 中設定的屬性， 這個屬性會取得及設定用來填入資料格之 XML 資料檔案的位置。

   <Personalizable(PersonalizationScope.[Shared]), _
       WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
       WebDescription("Location of the XML file that contains employee data")> _
   Public Property DataFilePath() As String
       Get
           Return xmlFilePath
       End Get
       Set(ByVal value As String)
           xmlFilePath = value
       End Set
   End Property
   

   [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
   WebDisplayName("Path to Employee Data File"),
   WebDescription("Location of the XML file that contains employee data")]
   public string DataFilePath
   {
       get
       {
           return xmlFilePath;
       }
       set
       {
           xmlFilePath = value;
       }
   }
   

5. 以下列程式碼取代 CreateChildControls 方法。 這個程式碼會執行下列工作：

   • 加入您在上一個步驟中宣告的資料格和標籤。

   • 將資料格繫結至包含員工資料的 XML 檔案。

   Protected Overloads Overrides Sub CreateChildControls()
   
       'Define the grid control that displays employee data in the Web Part.
       grid = New DataGrid()
       With grid
           .Width = Unit.Percentage(100)
           .GridLines = GridLines.Horizontal
           .HeaderStyle.CssClass = "ms-vh2"
           .CellPadding = 2
           .BorderWidth = Unit.Pixel(5)
           .HeaderStyle.Font.Bold = True
           .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
       End With
   
   
   
       'Populate the grid control with data in the employee data file.
       Try
           Dim dataset As New DataSet()
           dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
           grid.DataSource = dataset
           grid.DataBind()
       Catch x As Exception
           errorMessage.Text += x.Message
       End Try
   
       'Add control to the controls collection of the Web Part.
       Controls.Add(grid)
       Controls.Add(errorMessage)
       MyBase.CreateChildControls()
   
   End Sub
   

   protected override void CreateChildControls()
   {
       // Define the grid control that displays employee data in the Web Part.
       grid = new DataGrid();
       grid.Width = Unit.Percentage(100);
       grid.GridLines = GridLines.Horizontal;
       grid.HeaderStyle.CssClass = "ms-vh2";
       grid.CellPadding = 2;
       grid.BorderWidth = Unit.Pixel(5);
       grid.HeaderStyle.Font.Bold = true;
       grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
   
       // Populate the grid control with data in the employee data file.
       try
       {
           DataSet dataset = new DataSet();
           dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
           grid.DataSource = dataset;
           grid.DataBind();
       }
       catch (Exception x)
       {
           errorMessage.Text += x.Message;
       }
   
       // Add control to the controls collection of the Web Part.
       Controls.Add(grid);
       Controls.Add(errorMessage);
       base.CreateChildControls();
   }
   

6. 將下列方法加入至 WebPart1 類別。 這個程式碼會執行下列工作：

   • 建立一個動詞命令，該動詞命令會出現在呈現之網頁組件的網頁組件動詞命令功能表中。

   • 處理當使用者按一下動詞命令功能表中的動詞命令時所引發的事件。 這個程式碼會篩選出現在資料格中的員工清單。

   Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
       Get
           Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
               New WebPartEventHandler(AddressOf CustomVerbEventHandler))
   
           customVerb.Text = verbText
           customVerb.Description = "Shows only employees that are managers"
   
           Dim newVerbs() As WebPartVerb = {customVerb}
   
           Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
       End Get
   End Property
   
   Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
       Dim titleColumn As Integer = 2
   
       Dim item As DataGridItem
       For Each item In grid.Items
           If item.Cells(titleColumn).Text <> "Manager" Then
               If item.Visible = True Then
                   item.Visible = False
               Else
                   item.Visible = True
               End If
           End If
       Next item
       If verbText = "Show Managers Only" Then
           verbText = "Show All Employees"
       Else
           verbText = "Show Managers Only"
       End If
   End Sub
   

   public override WebPartVerbCollection Verbs
   {
       get
       {
           WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
               new WebPartEventHandler(CustomVerbEventHandler));
   
           customVerb.Text = verbText;
           customVerb.Description = "Shows only employees that are managers";
   
           WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };
   
           return new WebPartVerbCollection(base.Verbs, newVerbs);
       }
   }
   
   protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
   {
       int titleColumn = 2;
   
       foreach (DataGridItem item in grid.Items)
       {
           if (item.Cells[titleColumn].Text != "Manager")
           {
               if (item.Visible == true)
               {
                   item.Visible = false;
               }
               else
               {
                   item.Visible = true;
               }
           }
   
       }
       if (verbText == "Show Managers Only")
       {
           verbText = "Show All Employees";
       }
       else
       {
           verbText = "Show Managers Only";
       }
   }
   

測試網頁組件

執行專案時，SharePoint 網站會開啟。 網頁組件會自動新增至 SharePoint 中的 [Web 組件庫]。 您可以將網頁組件加入至任何網路組件頁面中。

若要測試網頁組件

1. 將下列 XML 貼到 [記事本] 檔案上。 這個 XML 檔案包含會出現在網頁組件中的範例資料。

   <?xml version="1.0" encoding="utf-8" ?>
       <employees xmlns="https://schemas.microsoft.com/vsto/samples">
          <employee>
              <name>David Hamilton</name>
              <hireDate>2001-05-11</hireDate>
              <title>Sales Associate</title>
          </employee>
          <employee>
              <name>Karina Leal</name>
              <hireDate>1999-04-01</hireDate>
              <title>Manager</title>
          </employee>
          <employee>
              <name>Nancy Davolio</name>
              <hireDate>1992-05-01</hireDate>
              <title>Sales Associate</title>
          </employee>
          <employee>
              <name>Steven Buchanan</name>
              <hireDate>1955-03-04</hireDate>
              <title>Manager</title>
          </employee>
          <employee>
              <name>Suyama Michael</name>
              <hireDate>1963-07-02</hireDate>
              <title>Sales Associate</title>
          </employee>
       </employees>
   

2. 在 [記事本] 中按一下 [檔案]，然後按一下 [另存新檔]。

3. 在 [另存新檔] 對話方塊的 [存檔類型] 下拉式清單中，選取 [所有檔案]。

4. 在 [檔案名稱] 方塊中，輸入 data.xml。

5. 使用 [瀏覽資料夾] 按鈕來選取任何資料夾，然後按一下 [儲存]。

6. 在 Visual Studio 中按下 F5。

   SharePoint 網站隨即開啟。

7. 按一下 [網站動作]，然後按一下 [更多選項]。

8. 選取 [建立] 頁面的 [網頁組件頁面]，然後按一下 [建立]。

9. 在 [新增網頁組件頁面] 頁面中，將頁面命名為 SampleWebPartPage.aspx，然後按一下 [建立]。

   該網頁組件頁面隨即出現。

10. 選取該網頁組件頁面上的任何區域。

11. 在頁面頂端按一下 [插入]，然後按一下 [網頁組件]。

12. 在 [分類] 窗格中按一下 [自訂] 資料夾，按一下 [WebPart1] 網頁組件，然後按一下 [加入]。

    該網頁組件隨即出現在頁面上。

測試自訂屬性

若要填入出現在網頁組件中的資料格，請指定包含每位員工相關資料之 XML 檔案的路徑。

若要測試自訂屬性

1. 按一下出現在網頁組件角落的箭號，然後按一下 [編輯網頁組件]。

   包含網頁組件之屬性的窗格隨即顯示在頁面右邊。

2. 在窗格中展開 [其他] 節點、輸入先前建立之 XML 檔案的路徑、按一下 [套用]，然後按一下 [確定]。

   確認員工清單出現在網頁組件中。

測試網路組件動詞命令

按一下出現在網頁組件動詞命令功能表中的項目，以顯示和隱藏非經理級的員工。

若要測試網頁組件動詞命令

1. 按一下出現在網頁組件角落的箭號，然後按一下 [只顯示經理級人員]。

   只有經理級的員工會出現在網頁組件中。

2. 再按一下箭號，然後按一下 [顯示所有的員工]。

   所有的員工都會出現在網頁組件中。

請參閱

工作

HOW TO：建立 SharePoint Web 組件

HOW TO：使用設計工具建立 SharePoint Web 組件

逐步解說：使用設計工具建立 SharePoint 的 Web 組件

其他資源

建立 SharePoint 的 Web 組件