Share via

SharePoint 2010 中的连接 Web 部件

  • 项目

SharePoint 快速入门横幅

SharePoint 2010 中的 Web 部件入门：了解构建、部署 Web 部件，并将两个 Web 部件连接在一起。

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

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

本文内容
在 SharePoint 2010 中创建示例项目任务列表
创建新的 SharePoint 空白项目
创建 Web 部件连接接口
创建源 Web 部件
创建目标 Web 部件
部署 Web 部件并将其添加到 Web 部件页
连接两个 Web 部件
后续步骤

在本练习中，您将创建和部署两个 Web 部件。然后将其添加到 Web 部件页，并连接它们，以便在显示一个 Web 部件中的选项的另一个 Web 部件中选择该选项。若要完成此任务，您必须执行以下操作：

  • 在 SharePoint 2010 中创建示例项目任务列表

  • 创建新的 SharePoint 空白项目

  • 创建 Web 部件连接接口

  • 创建源 Web 部件

  • 创建目标 Web 部件

  • 部署 Web 部件并将其添加到 Web 部件页

  • 连接两个 Web 部件

在 SharePoint 2010 中创建示例项目任务列表

本练习需要一个位于下文指定的本地 SharePoint 2010 网站上的名为 Projects 的列表。该列表应包含表 1 中显示的字段。若要创建该列表，请按照以下步骤操作：

创建项目任务列表

  1. 在 Internet Explorer 中打开要向其中添加 Web 部件的 SharePoint 2010 网站（例如 https://localhost/sites/SampleWebPartSite）。

  2. 依次单击"网站操作"、"更多选项"和"自定义列表"。

  3. 在"名称"框中，键入 Projects，然后单击"创建"。

  4. 在"列表工具"选项卡上，单击"列表"，然后在"管理视图"组上，单击"修改视图"。

  5. 清除所有"列名称"选项，然后选择"ID"和"标题"选项。单击"确定"。

  6. 单击"添加新项"，然后在表 1 的第一行（忽略标头行）中添加信息。ID 字段会自动更新。

    标题

    编写更多示例代码

    编写更多开发人员工具

    回答论坛问题

    编写开发人员文章

  7. 对表 1 的剩余行重复步骤 6。

创建新的 SharePoint 空白项目

在该任务中，您将在 Microsoft Visual Studio 2010 中创建 SharePoint 2010 空白项目。

创建 SharePoint 项目

  1. 启动 Visual Studio 2010，单击"文件"，指向"新建"，然后单击"项目"。

  2. 在"已安装的模板"部分，单击"Visual C#"节点，单击"SharePoint"，然后单击"2010"。

  3. 单击"SharePoint 空白项目"项目模板（参阅图 1），为项目提供名称（例如，ConnectTwoWebParts）和位置，然后单击"确定"。

    图 1. 选择空白 SharePoint 项目类型

    选择空 SharePoint 项目类型

  4. 在"要使用哪个本地站点进行调试"列表中，选择要使用的网站（例如 https://localhost/SampleWebPage）。另外，选择"部署为场解决方案"选项，然后单击"完成"。

    "ConnectTwoWebParts"项目即创建完成，此时会显示解决方案资源管理器。

创建 Web 部件连接接口

在该任务中，您将创建 Web 部件连接接口 IProject，该接口负责交换源 Web 部件与目标 Web 部件之间的连接信息。

创建 Web 部件连接接口

  1. 在解决方案资源管理器中，右键单击"ConnectTwoWebParts"，指向"添加"，然后单击"新建项"。

  2. 在"添加新项"对话框窗口中，单击"Visual C#"，单击"代码"，然后从可用模板中选择"接口"。

  3. 在"名称"框中，键入 IProject，然后单击"添加"。

  4. 在解决方案资源管理器中，双击"IProject.cs"文件。

  5. 通过将关键字 public 作为前缀添加到接口声明前，可将接口的可见性更改为公共（参阅图 2）。

    图 2. IProject 接口

    IProject 接口

  6. 在 IProject 接口中插入以下代码。

    int Id { get; } 
string Name { get; }

创建源 Web 部件

在该任务中，您将创建一个 Web 部件，作为源部件 参与 Web 部件连接。

创建源 Web 部件

  1. 在解决方案资源管理器中，右键单击"ConnectTwoWebParts"，指向"添加"，然后单击"新建项"。

  2. 在"已安装的模板"部分，单击"Visual C#"节点，单击"SharePoint"，然后单击"2010"。从可用模板中选择"Web 部件"。

  3. 在"名称"框中，键入 ProviderWebPart，然后单击"添加"。

    该源 Web 部件已添加到该项目中。

  4. 在解决方案资源管理器中，双击"ProviderWebPart.cs"打开此代码文件。

  5. 在 ProviderWebPart 类声明中，通过将"WebPart"更改为以下内容，替换 ProviderWebPart 类所继承的类：

    Microsoft.SharePoint.WebPartPages.WebPart, IProject

  6. 在 ProviderWebPart 类声明中，紧挨左括号 ({) 后插入以下代码。此代码块可用于实现 IProject Web 部件连接接口，并将局部变量添加到此 Web 部件中。

    DropDownList _projectPicker = null;  
int IProject.Id 
{ 
    get { return int.Parse(_projectPicker.SelectedValue); } 
} 

string IProject.Name 
{ 
    get { return _projectPicker.SelectedItem.ToString(); } 
}

  7. 在 CreateChildControls 子例程中插入以下代码。

    base.CreateChildControls;
try 
{ 
    _projectPicker = new DropDownList(); 

    using (SPSite spSite = new SPSite(SPContext.Current.Web.Url)) 
    using (SPWeb spWeb = spSite.OpenWeb()) 
    { 
        SPList projectsList = spWeb.Lists["Projects"]; 

        foreach (SPListItem project in projectsList.Items) 
        { 
            _projectPicker.Items.Add(new ListItem(project.Name, project.ID.ToString())); 
        } 
    } 
    _projectPicker.AutoPostBack = true; 

    this.Controls.Add(_projectPicker); 
} 
catch (Exception ex) 
{ 
    this.Controls.Clear(); 
    this.Controls.Add(new LiteralControl(ex.Message)); 
}

  8. 在 CreateChildControls 子例程后插入以下 ConnectionProvider 属性。这样可为 ProviderWebPart 提供连接源接口点。

    [ConnectionProvider("Project Name and ID")] 
public IProject NameDoesNotMatter() 
{ 
    return this; 
}

  9. 如果 RenderContents 子例程存在，请删除它。

创建目标 Web 部件

在该任务中，您将创建一个 Web 部件，作为目标部件 参与 Web 部件连接。

创建目标 Web 部件

  1. 在解决方案资源管理器中，右键单击"ConnectTwoWebParts"，指向"添加"，然后单击"新建项"。

  2. 在"已安装的模板"部分，单击"Visual C#"节点，单击"SharePoint"，然后单击"2010"。从可用模板中选择"Web 部件"。

  3. 在"名称"框中，键入 ConsumerWebPart，然后单击"添加"。

    该目标 Web 部件已添加到该项目中。

  4. 在解决方案资源管理器中，双击"ConsumerWebPart.cs"打开此代码文件。

  5. 在 ConsumerWebPart 类声明的左括号 ({) 后插入以下代码。

    IProject _provider = null; 
Label _lbl = null;

  6. 在 CreateChildControls 子例程中插入以下代码。

    base.CreateChildControls;
try 
{ 
    _lbl = new Label(); 

    if (_provider != null) 
    { 
        if (_provider.Id > 0) 
        { 
            _lbl.Text = _provider.Name + " was selected."; 
        } 
        else 
        { 
            _lbl.Text = "Nothing was selected."; 
        } 
    } 
    else 
    { 
        _lbl.Text = "No Provider Web Part Connected."; 
    } 

    this.Controls.Add(_lbl); 
} 
catch (Exception ex) 
{ 
    this.Controls.Clear(); 
    this.Controls.Add(new LiteralControl(ex.Message)); 
}

  7. 在 CreateChildControls 子例程后插入以下 ConnectionConsumer 属性。这样可为 ConsumerWebPart Web 部件提供连接目标接口点。

    [ConnectionConsumer("Project Name and ID")] 
public void ThisNameDoesNotMatter(IProject providerInterface) 
{ 
    _provider = providerInterface; 
}

  8. 如果 RenderContents 子例程存在，请删除它。

部署 Web 部件并将其添加到 Web 部件页

在该任务中，您将构建并部署源 Web 部件和目标 Web 部件。然后将这些 Web 部件添加到 Web 部件页。

部署 Web 部件并将其添加到 Web 部件页

  1. 在解决方案资源管理器中，右键单击"ConnectTwoWebParts"，然后单击"部署"。

  2. 打开 Internet Explorer，并浏览到为此项目指定的网站。

  3. 单击"网站操作"菜单，然后单击"更多选项"。

  4. 滚动然后单击"Web 部件页"。在"名称"框中，键入 SampleWebPartPage，然后单击"创建"。

    SharePoint Foundation 将创建此 Web 部件页，并在"编辑"模式下打开该页。

  5. 在蓝框中单击其中一个 Web 部件区域。

  6. 在"类别"框中，选择"自定义"（参阅图 3），选择"ConsumerWebPart"，然后单击"添加"。

    图 3. 选择 ConsumerWebPart

    选择 ConsumerWebPart

  7. 这样会将 ConsumerWebPart 添加到该页，如图 4 所示。

    图 4. ConsumerWebPart 已添加到 Web 部件区域

    ConsumerWebPart 已添加到 Web 部件区域

  8. 重复这些步骤，将 ProviderWebPart 添加到其他 Web 部件区域。这两个 Web 部件现已显示在该页中，如图 5 所示。

    图 5. 两个 Web 部件均已添加到页面中

    两个 Web 部件均已添加到页面中

连接两个 Web 部件

在该任务中，您将源 Web 部件连接到目标 Web 部件。

连接 Web 部件

  1. 在该任务中，您将源 Web 部件连接到目标 Web 部件。

  2. 依次指向"连接"、"将项目名称和 ID 发送至"，然后单击"ConsumerWebPart"。

    您将看到此项目标题显示在 ConsumerWebPart Web 部件中。

  3. 在"源 Web 部件"列表中选择其他选项。标题变化随后会反映在"目标 Web 部件"区域，如图 6 所示。

    图 6."源 Web 部件"中的变化会反映在"目标 Web 部件"中

    反映了"提供程序"Web 部件中所做的更改

后续步骤