为 SharePoint 2010 创建可视 Web 部件

项目
09/24/2014

SharePoint 快速入门横幅

SharePoint 2010 中的 Web 部件入门：构建 Web 部件是 SharePoint 开发人员执行的最常见任务之一。了解创建和部署可视 Web 部件，这类部件可显示列表项和子网站的分层视图。

上次修改时间： 2011年1月12日

适用范围： SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

本文内容
创建可视 Web 部件项目
将 TreeView 控件添加到 Web 部件
将代码添加到项目
构建并部署 Web 部件
创建 Web 部件页
将 Web 部件添加到 Web 部件页
后续步骤

在本文中，您将创建并部署在树结构中显示分层数据的 Web 部件。若要完成此任务，您必须执行以下操作：

创建可视 Web 部件项目
将 TreeView 控件添加到 Web 部件
将代码添加到项目
构建并部署 Web 部件
创建 Web 部件页
将 Web 部件添加到 Web 部件页

创建可视 Web 部件项目

在该任务中，您将在 Microsoft Visual Studio 2010 中创建可视 Web 部件项目。

启动 Visual Studio 2010，单击"文件"，指向"新建"，然后单击"项目"。
在"已安装的模板"部分，导航到"Visual C#"节点，单击"SharePoint"，然后单击"2010"。
选择"可视 Web 部件"项目模板（参阅图 1），为项目提供名称（例如，SampleWebPart）和位置，然后单击"确定"。

图 1. 选择可视 Web 部件项目类型
在"要使用哪个本地站点进行调试"下拉列表中，选择要使用的网站（例如 https://localhost/sites/SampleWebSite）。另外，选择"部署为场解决方案"选项，然后单击"完成"。

请注意，在创建项目后，解决方案资源管理器会包含默认的可视 Web 部件，名为"VisualWebPart1"（参阅图 2）。在解决方案资源管理器中还可以看到"功能"和"包"节点的状态。功能会采用 SharePoint Foundation 理解的方式组织应用程序。可以在网站级别将功能部署到 SharePoint Foundation。包中包含将解决方案部署到 SharePoint Foundation 时使用的功能和其他资产。

图 2. 解决方案资源管理器中的 SampleWebPart 项目

将 TreeView 控件添加到 Web 部件

在该任务中，您需将 TreeView 控件添加到 Web 部件的设计图面。TreeView 控件可用于显示列表和子网站的分层视图。

在解决方案资源管理器中，展开"VisualWebPart1"节点，右键单击"VisualWebPart1UserControl.ascx"文件，然后单击"视图设计器"。此操作将打开一个视图，以便将控件从工具箱拖放到 Web 部件设计图面上。
从屏幕左侧的工具箱单击"导航"部分，然后将"TreeView"控件拖到设计图面上。如果在屏幕左侧看不到工具箱，请在"视图"菜单上，单击"工具箱"。
选择 TreeView 控件，并在 Visual Studio 屏幕右下角的"属性"面板中，在"ID"字段中键入同一 siteStructure。

将代码添加到项目

在该任务中，您需将 Microsoft Visual C# 代码添加到循环访问 SharePoint 网站中所有列表和子网站的项目，并将它们添加到 TreeView 控件。

在解决方案资源管理器中，展开"VisualWebPart1UserControl.ascx"节点，右键单击"VisualWebPart1UserControl.ascx.cs"节点，然后单击"查看代码"。

接下来，使用以下 C# 代码替换代码屏幕中的代码。

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;
using System.Web;
namespace BonnevilleTestBed.Bonneville
{
  public partial class BonnevilleUserControl : UserControl
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      SPWeb thisWeb = null;
      TreeNode node;
      thisWeb = SPContext.Current.Web;
      //Add the Web's title as the display text for the tree node, and add the URL as the NavigateUri.
      node = new TreeNode(thisWeb.Title, null, null, thisWeb.Url, "_self");
      //The Visual Web Part has a treeview control called siteStructure.
      siteStructure.Nodes.Add(node);
      //Get a reference to the current node, so child nodes can be added in the correct position.
      TreeNode parentNode = node;
      //Iterate through the Lists collection of the Web.
      foreach (SPList list in thisWeb.Lists)
      {
        if (!list.Hidden)
        {
          node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self");
          parentNode.ChildNodes.Add(node);
        }
      }
      foreach (SPWeb childWeb in thisWeb.Webs)
      {
        //Call our own helper function for adding each child Web to the tree.
        addWebs(childWeb, parentNode);
        childWeb.Dispose();
      }
      siteStructure.CollapseAll();
    }
    void addWebs(SPWeb web, TreeNode parentNode)
    {
      TreeNode node;
      node = new TreeNode(web.Title, null, null, web.Url, "_self");
      parentNode.ChildNodes.Add(node);
      parentNode = node;
      foreach (SPList list in web.Lists)
      {
        if (!list.Hidden)
        {
          node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self");
          parentNode.ChildNodes.Add(node);
        }
      }
      foreach (SPWeb childWeb in web.Webs)
      {
        //Call the addWebs() function from itself (i.e. recursively) 
        //to add all child Webs until there are no more to add.
        addWebs(childWeb, parentNode);
     childWeb.Dispose();

      }
    }
  }
}

构建并部署 Web 部件

在该任务中，您将构建并部署 Web 部件项目。

使用以下选项之一构建并部署项目：

在调试 SharePoint 解决方案时，使用 F5 键构建并部署解决方案。进行此操作后，调试体验包括不同步骤，例如帮助创建 Web 部件页，以及重置 Internet Information Services (IIS)。
也可以使用以下方法构建并部署解决方案：单击"生成"菜单，选择"生成解决方案"，确认解决方案生成时未出现任何错误，然后选择"部署解决方案"。

创建 Web 部件页

在该任务中，您将创建 Web 部件页来包含 Web 部件，除非已为您创建一个 Web 部件页。

如果单击 F5 来调试应用程序，则默认情况下，会显示创建 Web 部件页使用的页面。否则，打开 SharePoint 网站，依次单击"网站操作"、"查看所有网站内容"和"创建"，通过滚动选择"Web 部件页"选项。
在"Web 部件页"屏幕中，提供请求的有关特定 Web 部件页的信息。例如，提供该页面的名称 (SampleWebPartPage) 和布局模板。
在"文档库"下拉列表中，选择"网站页面"，然后单击"创建"。SharePoint 将创建并显示 Web 部件页。

图 3. 示例 Web 部件页

示例 Web 部件页

将 Web 部件添加到 Web 部件页

在该任务中，您需将 Web 部件添加到 Web 部件页，然后测试该解决方案。

在 Web 部件页上，在您希望显示 Web 部件的区域中单击"添加 Web 部件"文本。
在"类别"列表中，单击"自定义"。在"Web 部件"框中，单击"VisualWebPart1"。
在页面顶部的"关于 Web 部件"框中，单击"添加"。该 Web 部件将添加到您选择的区域，如图 4 所示。请注意，列表和子网站显示在分层视图中。

图 4. 添加到 Web 部件页的区域后的 Web 部件

添加到区域后的 Web 部件