共用方式為

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

  • 發行項

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

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

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

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

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

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

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

  • 在 SharePoint 中測試網頁組件。

    注意事項注意事項

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

必要條件

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

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

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

建立空的 SharePoint 專案

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

若要建立空的 SharePoint 專案

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

  2. 在中，不允許使用者選取 [檔案]， [新增]， [專案]。

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

  4. 在 [樣板] 窗格中，選取 [SharePoint 2010 專案]，然後選取 [確定] 按鈕。

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

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

在專案中加入網頁組件。

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

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

  1. 在功能表列上的 []，然後選取 [專案]， [加入新項目]。

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

  3. 在 SharePoint 範本清單中，選取 [網頁組件] 範本，然後選取 [加入] 按鈕。

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

呈現網頁組件的內容

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

若要呈現網頁組件的內容

  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. 在 [建立] 頁面上，選取 [Web 組件頁面] 型別，然後選取 [建立] 按鈕。

  9. 在 [新的 Web 組件頁面] 頁面，命名頁面時 SampleWebPartPage.aspx，然後選取 [建立] 按鈕。

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

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

  11. 在網頁頂端，選取 [插入] 索引標籤，然後選取 [網頁組件] 按鈕。

  12. 在 [分類] 窗格中，選取 [自訂] 資料夾，然後選取 [WebPart1] Web 組件，然後選取 [加入] 按鈕。

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

測試自訂屬性

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

若要測試自訂屬性

  1. 選取網頁組件的右邊的箭號，從出現的 功能表中的 [選項] [編輯 Web 組件] 。

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

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

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

測試網路組件動詞命令

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

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

  1. 選取網頁組件的右邊的箭號，從出現的 功能表中的 [選項] [只顯示經理級人員] 。

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

  2. 請選取 箭號，從出現的 功能表中的 [選項] [顯示所有的員工] 。

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

請參閱

工作

HOW TO：建立 SharePoint Web 組件

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

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

其他資源

建立 SharePoint 的 Web 組件