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

發行項
08/12/2011

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 專案

使用 [以系統管理員身分執行] 選項來啟動 Visual Studio 2010。
在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。

[新增專案] 對話方塊隨即出現。
開啟 [新增專案] 對話方塊、在您要使用之語言下展開 [SharePoint] 節點，然後選取 [2010] 節點。
在 [範本] 窗格中，選取 [空的 SharePoint 專案]，然後按一下 [確定]。

[SharePoint 自訂精靈] 隨即出現。這個精靈可讓您選取用來偵錯專案的網站以及方案的信任層級。
選取 [部署為陣列方案]，然後按一下 [完成] 以接受預設的本機 SharePoint 網站。

在專案中加入網頁組件。

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

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

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

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

呈現網頁組件的內容

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

若要呈現網頁組件的內容

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

網頁組件程式碼檔案隨即在 [程式碼編輯器] 中開啟。
在網頁組件程式碼檔案頂端加入下列陳述式。
```
Imports System.Data
```
```
using System.Data;
```
將下列程式碼加入至 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;
```

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

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

將下列方法加入至 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 組件庫]。您可以將網頁組件加入至任何網路組件頁面中。

若要測試網頁組件

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

在 [記事本] 中按一下 [檔案]，然後按一下 [另存新檔]。
在 [另存新檔] 對話方塊的 [存檔類型] 下拉式清單中，選取 [所有檔案]。
在 [檔案名稱] 方塊中，輸入 data.xml。
使用 [瀏覽資料夾] 按鈕來選取任何資料夾，然後按一下 [儲存]。
在 Visual Studio 中按下 F5。

SharePoint 網站隨即開啟。
按一下 [網站動作]，然後按一下 [更多選項]。
選取 [建立] 頁面的 [網頁組件頁面]，然後按一下 [建立]。
在 [新增網頁組件頁面] 頁面中，將頁面命名為 SampleWebPartPage.aspx，然後按一下 [建立]。

該網頁組件頁面隨即出現。
選取該網頁組件頁面上的任何區域。
在頁面頂端按一下 [插入]，然後按一下 [網頁組件]。
在 [分類] 窗格中按一下 [自訂] 資料夾，按一下 [WebPart1] 網頁組件，然後按一下 [加入]。

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

測試自訂屬性

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

若要測試自訂屬性

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

包含網頁組件之屬性的窗格隨即顯示在頁面右邊。
在窗格中展開 [其他] 節點、輸入先前建立之 XML 檔案的路徑、按一下 [套用]，然後按一下 [確定]。

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

測試網路組件動詞命令

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

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

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

只有經理級的員工會出現在網頁組件中。
再按一下箭號，然後按一下 [顯示所有的員工]。

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

請參閱

工作

HOW TO：建立 SharePoint Web 組件

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

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

其他資源

建立 SharePoint 的 Web 組件

共用方式為

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

必要條件

建立空的 SharePoint 專案

若要建立空的 SharePoint 專案

在專案中加入網頁組件。

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

呈現網頁組件的內容

若要呈現網頁組件的內容

測試網頁組件

若要測試網頁組件

測試自訂屬性

若要測試自訂屬性

測試網路組件動詞命令

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

請參閱

工作

其他資源

其他資源