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

發行項
10/08/2023

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 組件新增至專案。

使用 [以系統管理員身分執行] 選項啟動 Visual Studio。
在功能表列上，選擇 [檔案]> [新增]> [專案]。
在 [新增專案] 對話方塊中，於您想要使用的語言底下展開 [SharePoint] 節點，然後選擇 [2010] 節點。
在 [範本] 窗格中，選擇 [SharePoint 2010 專案]，然後選擇 [確定] 按鈕。

[SharePoint 自訂精靈] 隨即出現。此精靈可讓您選取將用來偵錯專案的網站，以及解決方案的信任層級。
選擇 [部署為伺服器陣列解決方案] 選項按鈕，然後選擇 [完成] 按鈕，以接受預設的本機 SharePoint 網站。

將 Web 組件新增至專案

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

在功能表列中，選擇 [專案]>[加入新項目]。
在 [新增項目] 對話方塊的 [已安裝的範本] 窗格中，展開 [SharePoint] 節點，然後選擇 [2010] 節點。
在 SharePoint 範本清單中，選擇 [Web 組件] 範本，然後選擇 [新增] 按鈕。

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

轉譯 Web 組件中的內容

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

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

Web 組件程式碼檔案會在程式碼編輯器中開啟。
將下列指示詞新增至 Web 組件程式碼檔案頂端。
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```

將下列程式碼加入 WebPart1 類別。此程式碼會宣告下欄欄位：

要顯示 Web 組件中員工的資料格。
在用來篩選資料格的控制項上出現的文字。
在資料格無法顯示資料時顯示錯誤的標籤。

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

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

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

將下列程式碼加入 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;
    }
}

<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

以下列程式碼取代 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();
}

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

將下列方法新增至 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";
    }
}

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

測試 Web 組件

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

將下列 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>

在記事本的功能表列上，選擇 [檔案]>[另存新檔]。
在 [另存新檔] 對話方塊的 [存檔類型] 清單中，選擇 [所有檔案]。
在 [檔案名稱] 方塊中，輸入 data.xml。
使用 [瀏覽資料夾] 按鈕選擇任何資料夾，然後選擇 [儲存] 按鈕。
在 Visual Studio 中，選擇 F5 鍵。

SharePoint 網站隨即開啟。
在 [網站動作] 功能表上，選擇 [更多選項]。
在 [建立] 頁面上，選擇 [Web 組件頁面] 類型，然後選擇 [建立] 按鈕。
在 [新增 Web 組件頁面] 頁面中，將頁面命名為 SampleWebPartPage.aspx，然後選擇 [建立] 按鈕。

[Web 組件] 頁面隨即出現。
選取 [Web 組件] 頁面上的任何區域。
在頁面頂端選擇 [插入] 索引標籤，然後選擇 [Web 組件] 按鈕。
在 [分類] 窗格中，依序選擇 [自訂] 資料夾、[WebPart1] Web 組件和 [新增] 按鈕。

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

測試自訂屬性

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

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

包含 Web 組件屬性的窗格會出現在頁面右側。
在窗格中展開 [其他] 節點、輸入先前所建立 XML 檔案的路徑、選擇 [套用] 按鈕，然後選擇 [確定] 按鈕。

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

測試 Web 組件動詞

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

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

只有經理級員工才會出現在 Web 組件中。
再次選擇箭號，然後從出現的功能表中選擇 [顯示所有員工]。

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

另請參閱

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

共用方式為