共用方式為


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

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

Web 組件會在資料格中顯示員工。 使用者指定包含員工資料的檔案位置。 使用者也可以篩選資料格,以便僅經理級員工才會出現在清單中。

本逐步解說將說明下列工作:

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

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

  • 透過將控制項新增至 Web 組件控制項集合,轉譯 Web 組件中的內容。

  • 建立新的功能表項目 (稱為「動詞」),其會出現在所轉譯 Web 組件的動詞功能表中。 動詞命令可讓使用者修改出現在 Web 組件中的資料。

  • 在 SharePoint 中測試 Web 組件。

    注意

    在下列指示的某些 Visual Studio 使用者介面項目中,您的電腦可能會顯示不同的名稱或位置: 您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。 如需詳細資訊,請參閱將 Visual Studio IDE 個人化

必要條件

  • 支援的 Microsoft Windows 和 SharePoint 版本。

  • Visual Studio 2017 或 Azure DevOps Services。

建立空的 SharePoint 專案

首先,建立空的 SharePoint 專案。 稍後,您會使用 [Web 組件] 項目範本,將 Web 組件新增至專案。

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

  2. 在功能表列上,選擇 [檔案]> [新增]> [專案]

  3. 在 [新增專案] 對話方塊中,於您想要使用的語言底下展開 [SharePoint] 節點,然後選擇 [2010] 節點。

  4. 在 [範本] 窗格中,選擇 [SharePoint 2010 專案],然後選擇 [確定] 按鈕。

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

  5. 選擇 [部署為伺服器陣列解決方案] 選項按鈕,然後選擇 [完成] 按鈕,以接受預設的本機 SharePoint 網站。

將 Web 組件新增至專案

將 [Web 組件] 項目新增至專案。 [Web 組件] 項目會新增 Web 組件程式碼檔案。 稍後,您會將程式碼新增至 Web 組件程式碼檔案,以轉譯 Web 組件的內容。

  1. 在功能表列中,選擇 [專案]>[加入新項目]

  2. 在 [新增項目] 對話方塊的 [已安裝的範本] 窗格中,展開 [SharePoint] 節點,然後選擇 [2010] 節點。

  3. 在 SharePoint 範本清單中,選擇 [Web 組件] 範本,然後選擇 [新增] 按鈕。

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

轉譯 Web 組件中的內容

您可以指定哪些控制項要出現在 Web 組件中,方法是將這些控制項新增至 Web 組件類別的控制項集合。

  1. 在 [方案總管] 中,開啟 WebPart1.vb (在 Visual Basic 中) 或 WebPart1.cs (在 C# 中)。

    Web 組件程式碼檔案會在程式碼編輯器中開啟。

  2. 將下列指示詞新增至 Web 組件程式碼檔案頂端。

    using System.Data;
    
  3. 將下列程式碼加入 WebPart1 類別。 此程式碼會宣告下欄欄位:

    • 要顯示 Web 組件中員工的資料格。

    • 在用來篩選資料格的控制項上出現的文字。

    • 在資料格無法顯示資料時顯示錯誤的標籤。

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

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

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

    [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 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 類別。 這個程式碼會執行下列工作:

    • 建立一個動詞,其會出現在所轉譯 Web 組件的 Web 組件動詞功能表中。

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

      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";
          }
      }
      

測試 Web 組件

當您執行專案時,SharePoint 網站隨即開啟。 Web 組件會自動新增至 SharePoint 中的 Web 組件庫。 您可以將 Web 組件新增至任何 Web 組件頁面。

  1. 將下列 XML 貼入記事本檔案中。 這個 XML 檔案包含將出現在 Web 組件中的範例資料。

    <?xml version="1.0" encoding="utf-8" ?>
        <employees xmlns="http://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. 在 [建立] 頁面上,選擇 [Web 組件頁面] 類型,然後選擇 [建立] 按鈕。

  9. 在 [新增 Web 組件頁面] 頁面中,將頁面命名為 SampleWebPartPage.aspx,然後選擇 [建立] 按鈕。

    [Web 組件] 頁面隨即出現。

  10. 選取 [Web 組件] 頁面上的任何區域。

  11. 在頁面頂端選擇 [插入] 索引標籤,然後選擇 [Web 組件] 按鈕。

  12. 在 [分類] 窗格中,依序選擇 [自訂] 資料夾、[WebPart1] Web 組件和 [新增] 按鈕。

    Web 組件隨即出現在頁面上。

測試自訂屬性

若要填入 Web 組件中出現的資料格,請指定 XML 檔案的路徑,該檔案包含每個員工的資料。

  1. 選擇 Web 組件右邊出現的箭號,然後從出現的功能表中選擇 [編輯 Web 組件]

    包含 Web 組件屬性的窗格會出現在頁面右側。

  2. 在窗格中展開 [其他] 節點、輸入先前所建立 XML 檔案的路徑、選擇 [套用] 按鈕,然後選擇 [確定] 按鈕。

    驗證員工清單是否出現在 Web 組件中。

測試 Web 組件動詞

選取 [Web 組件動詞] 功能表中出現的項目,來顯示和隱藏職位不是經理的員工。

  1. 選擇出現在 Web 組件右側的箭號,然後從出現的功能表中選擇 [只顯示經理級人員]

    只有經理級員工才會出現在 Web 組件中。

  2. 再次選擇箭號,然後從出現的功能表中選擇 [顯示所有員工]

    所有員工都會出現在 Web 組件中。

另請參閱

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