演练:为 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 版本以及使用的设置决定了这些元素。 有关更多信息,请参见 使用设置。
系统必备
您需要以下组件来完成本演练:
支持的 Microsoft Windows 和 SharePoint 版本。 有关更多信息,请参见开发 SharePoint 解决方案的要求。
Visual Studio 2010 专业版或 Visual Studio Application Lifecycle Management (ALM) 的某个版本。
创建空 SharePoint 项目
首先,创建一个空 SharePoint 项目。 然后,使用**“Web 部件”**项模板向该项目添加 Web 部件。
创建空 SharePoint 项目
使用**“以管理员身份运行”**选项启动 Visual Studio 2010。
在**“文件”菜单上指向“新建”,再单击“项目”**。
此时将出现**“新建项目”**对话框。
打开**“新建项目”对话框,展开要使用的语言下的“SharePoint”节点,然后选择“2010”**节点。
在**“模板”窗格中,选择“空 SharePoint 项目”,然后单击“确定”**。
这将显示**“SharePoint 自定义向导”**。 使用此向导可以选择用于调试项目的站点以及解决方案的信任级别。
选择**“部署为场解决方案”,然后单击“完成”**以接受默认的本地 SharePoint 网站。
向项目添加 Web 部件
向项目添加**“Web 部件”项。 该“Web 部件”**项将添加 Web 部件代码文件。 然后,向该 Web 部件代码文件添加代码,以呈现 Web 部件的内容。
向项目添加 Web 部件
在**“项目”菜单上,单击“添加新项”**。
在**“添加新项”对话框的“已安装的模板”窗格中,展开“SharePoint”节点,然后单击“2010”**。
在 SharePoint 模板的列表中,选择**“Web 部件”,然后单击“添加”**。
**“Web 部件”项随即显示在“解决方案资源管理器”**中。
呈现 Web 部件中的内容
通过将控件添加到 Web 部件类的控件集合中,可以指定要在 Web 部件中显示的控件。
呈现 Web 部件中的内容
在**“解决方案资源管理器”**中,双击 WebPart1.vb(在 Visual Basic 中)或 WebPart1.cs(在 C# 中)。
Web 部件代码文件随即在代码编辑器中打开。
将以下语句添加到 Web 部件代码文件的顶部。
Imports System.Data
using System.Data;
向 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;
向 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; } }
用下面的代码替换 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 类中。 这段代码执行下列任务:
创建一个谓词,该谓词显示在所呈现的 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 部件
将以下 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>
在记事本中,单击**“文件”,然后单击“另存为”**。
在**“另存为”对话框中的“保存类型”下拉列表中,选择“所有文件”**。
在**“文件名”**框中,键入“data.xml”。
使用**“浏览文件夹”按钮选择任意文件夹,然后单击“保存”**。
在 Visual Studio 中按**“F5”**。
SharePoint 网站将打开。
单击**“网站操作”,然后单击“更多选项”**。
在**“创建”页中,选择“Web 部件页”,然后单击“创建”**。
在**“新建 Web 部件页”页中,将该页命名为 SampleWebPartPage.aspx,然后单击“创建”**。
此时将显示 Web 部件页。
选择 Web 部件页上的任何区域。
在该页顶部单击**“插入”,然后单击“Web 部件”**。
在**“类别”窗格中,依次单击“自定义”文件夹、“WebPart1”Web 部件和“添加”**。
此时将在该页上显示 Web 部件。
测试自定义属性
若要填充 Web 部件中显示的数据网格,请指定包含有关各个员工的数据的 XML 文件的路径。
测试自定义属性
单击显示在 Web 部件某个角上的箭头,然后单击**“Edit Web Part”(编辑 Web 部件)**。
包含 Web 部件属性的窗格将显示在该页的右侧。
在此窗格中,展开**“杂项”节点,键入先前创建的 XML 文件的路径并单击“应用”,然后单击“确定”**。
验证员工列表是否显示在 Web 部件中。
测试 Web 部件谓词
通过单击显示在 Web 部件谓词菜单中的某一项来显示和隐藏不是经理的员工。
测试 Web 部件谓词
单击显示在 Web 部件某个角上的箭头,然后单击**“仅显示经理”(Show Managers Only)**。
此时将在 Web 部件中仅显示作为经理的员工。
再次单击该箭头,然后单击**“显示所有员工”(Show All Employees)**。
此时将在 Web 部件中显示所有员工。
请参见
任务
演练:使用设计器为 SharePoint 创建 Web 部件