通过

演练：为 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 设置。

系统必备

您需要以下组件来完成本演练：

  • 支持的 Microsoft Windows 和 SharePoint 版本。有关更多信息，请参见开发 SharePoint 解决方案的要求。

  • Visual Studio 专业版或 Visual Studio Application Lifecycle Management (ALM) 的某个版本。

创建空 SharePoint 项目

首先，创建一个空 SharePoint 项目。然后，使用**“Web 部件”**项模板向该项目添加 Web 部件。

创建空 SharePoint 项目

  1. 使用**“以管理员身份运行”**选项启动 Visual Studio。

  2. 在方请禁止，选择 *** 文件 ***，新建，项目。

  3. 在 *** 新项目 *** 对话框中，展开节点 *** SharePoint *** 在要使用的语言下的，然后选择 *** 2010年 *** 节点。

  4. 在 *** 模板 *** 窗格中，选择 *** SharePoint 2010项目 ***，然后选择 *** 好 *** 按钮。

    这将显示**“SharePoint 自定义向导”**。使用此向导可以选择用于调试项目的站点以及解决方案的信任级别。

  5. 选择 *** 部署为场解决方案 *** 选项按钮，然后选择 *** 完成 *** 按钮接受默认的本地SharePoint网站。

向项目添加 Web 部件

向项目添加**“Web 部件”项。该“Web 部件”**项将添加 Web 部件代码文件。然后，向该 Web 部件代码文件添加代码，以呈现 Web 部件的内容。

向项目添加 Web 部件

  1. 在菜单栏上，依次选择 项目，*** 添加新项目 ***。

  2. 在 *** 添加新项目 *** 对话框中，在 *** 安装的模板 *** 窗格中，展开 *** SharePoint *** 节点，然后选择 *** 2010年 *** 节点。

  3. 在SharePoint模板列表中，选择 *** Web部件 *** 模板，然后选择 *** 添加 *** 按钮。

    **“Web 部件”项随即显示在“解决方案资源管理器”**中。

呈现 Web 部件中的内容

通过将控件添加到 Web 部件类的控件集合中，可以指定要在 Web 部件中显示的控件。

呈现 Web 部件中的内容

  1. 在 *** 解决方案资源管理器 ***，打开WebPart1.vb (在Visual Basic中)或WebPart1.cs (在C#)。

    Web 部件代码文件随即在代码编辑器中打开。

  2. 将以下语句添加到 Web 部件代码文件的顶部。

    Imports System.Data

    using System.Data;

  3. 向 WebPart1 类添加以下代码。此代码声明了以下字段：

    • 用于在 Web 部件中显示员工的数据网格。

    • 控件上显示的用于筛选数据网格的文本。

    • 在数据网格无法显示数据时显示错误的标签。

    • 包含员工数据文件路径的字符串。

    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 类添加以下代码。此代码将向 Web 部件添加一个名为 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 类中。这段代码执行下列任务：

    • 创建一个谓词，该谓词显示在所呈现的 Web 部件的 Web 部件谓词菜单中。

    • 处理引发的事件，当用户选择在谓词菜单的谓词。此代码筛选在数据网格中显示的员工列表。

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

测试 Web 部件

在运行项目时，SharePoint 网站将打开。Web 部件会自动添加到 SharePoint 中的 Web 部件库中。您可以将 Web 部件添加到任何 Web 部件页。

测试 Web 部件

  1. 将以下 XML 粘贴到记事本文件中。此 XML 文件包含将在 Web 部件中显示的示例数据。

    <?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，然后选择 *** 创建 *** 按钮。

    此时将显示 Web 部件页。

  10. 选择 Web 部件页上的任何区域。

  11. 在页的顶部，选择 *** 插入 *** 选项卡，然后选择 *** Web部件 *** 按钮。

  12. 在 *** 类 *** 窗格中，选择 自定义 文件夹，选择 *** WebPart1 *** Web部件，然后选择 *** 添加 *** 按钮。

    此时将在该页上显示 Web 部件。

测试自定义属性

若要填充 Web 部件中显示的数据网格，请指定包含有关各个员工的数据的 XML 文件的路径。

测试自定义属性

  1. 选择Web部件的右侧显示的箭头，从显示的菜单中选择 *** 编辑Web部件 ***。

    包含 Web 部件属性的窗格将显示在该页的右侧。

  2. 在窗格中，展开 *** 杂项 *** 节点，输入先前创建的XML文件的路径，选择 *** 适用 *** 按钮，然后选择 *** 好 *** 按钮。

    验证员工列表是否显示在 Web 部件中。

测试 Web 部件谓词

通过单击显示在 Web 部件谓词菜单中的某一项来显示和隐藏不是经理的员工。

测试 Web 部件谓词

  1. 选择Web部件的右侧显示的箭头，从显示的菜单中选择 *** show managers only ***。

    此时将在 Web 部件中仅显示作为经理的员工。

  2. 再次选择箭头，从显示的菜单中选择 *** 显示所有员工 ***。

    此时将在 Web 部件中显示所有员工。

请参见

任务

如何：创建 SharePoint Web 部件

如何：使用设计器创建 SharePoint Web 部件

演练：使用设计器为 SharePoint 创建 Web 部件

其他资源

为 SharePoint 创建 Web 部件