ConnectWeb Parts in SharePoint 2010

Article
07/24/2014

SharePoint QuickStart Banner

Getting Started with Web Parts in SharePoint 2010: Learn to build, deploy, and connect two Web Parts together.

Applies to: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

In this article
Create a Sample Project Task List in SharePoint 2010
Create a new SharePoint Empty Project
Create the Web Part Connection Interface
Create the Provider Web Part
Create the Consumer Web Part
Deploy and Add the Web Parts to a Web Parts Page
Connect the Two Web Parts
Next Steps

Published: April 2010 | Updated: October 2010

Provided by: Frank Rice, Microsoft Corporation

In this exercise, you create and deploy two Web Parts. Then you add them to a Web Parts Page and connect them so that making a selection in one Web Part displays that selection in the other Web Part. To complete this task, you must do the following:

Create a Sample Project Task List in SharePoint 2010
Create a new SharePoint Empty Project
Create the Web Part Connection Interface
Create the Provider Web Part
Create the Consumer Web Part
Deploy and Add the Web Parts to a Web Parts Page
Connect the Two Web Parts

Create a Sample Project Task List in SharePoint 2010

This exercise requires a list named Projects on the local SharePoint 2010 Web site specified later in this article. The list should contain the fields shown in Table 1. To create this list, follow these steps:

To create the Project Task List

Open the SharePoint 2010 Web site that you want to add the Web Parts to (such as https://localhost/sites/SampleWebPartSite) in Internet Explorer.
Click Site Actions, click More Options, and then click Custom List.
In the Name box, type Projects and then click Create.
On the List Tools tab, click List, and on the Manage Views group, click Modify Views.
Clear all Column Name options and then select the ID and Title options. Click OK.
Click Add new item and add the information in the first row (ignore the header row) of Table 1. The ID fields updates automatically.

Title

Writing more sample code

Writing more developer tools

Answering forum questions

Writing developer articles
Repeat step 6 for the remaining rows of Table 1.

Title
Writing more sample code
Writing more developer tools
Answering forum questions
Writing developer articles

Create a new SharePoint Empty Project

In this task, you create a SharePoint 2010 Empty project in Microsoft Visual Studio 2010.

To create the SharePoint project

Start Visual Studio 2010, click File, point to New, and then click Project.
Click the Visual C# node in the Installed Templates section, click SharePoint, and then click 2010.
Click the SharePoint Empty Project project template (see Figure 1), provide a name (such as, ConnectTwoWebParts), a location for your project, and then click OK.

Figure 1. Select the Empty SharePoint Project type
In the What local site do you want to use for debugging list, select the site to use (such as https://localhost/SampleWebPage). Also select the Deploy as a farm solution option and then click Finish.

The ConnectTwoWebParts project is created and Solution Explorer is displayed.

Create the Web Part Connection Interface

In this task, you create the Web Part connection interface IProject that is responsible for exchanging connection information between a Web Part provider and Web Part consumer.

To create the Web Part connection interface

In Solution Explorer, right-click ConnectTwoWebParts, point to Add, and then click New Item.
In the Add New Item dialog window, click Visual C#, click Code, and then select Interface from the available templates.
Type IProject in the Name box and then click Add.
In Solution Explorer, double-click the IProject.cs file.
Change the visibility of the interface to public by prefixing the keyword public to the interface declaration (see Figure 2).

Figure 2. The IProject Interface
Insert the following code inside the IProject interface.
```
int Id { get; } 
string Name { get; }
```

Create the Provider Web Part

In this task, you create a Web Part to participate in a Web Part connection as a provider.

To create the provider Web Part

In Solution Explorer, right-click ConnectTwoWebParts, point to Add, and then click New Item.
Click the Visual C# node in the Installed Templates section, click SharePoint, and then click 2010. Select Web Part from the available templates.
Type ProviderWebPart in the Name box and then click Add.

The provider Web Part is added to the project.
In Solution Explorer, double-click ProviderWebPart.cs to open the code file.
In the ProviderWebPart class declaration, replace the class from which the ProviderWebPart class is inheriting by changing WebPart to the following:
```
Microsoft.SharePoint.WebPartPages.WebPart, IProject
```
Insert the following code immediately after the opening bracket ({) in the ProviderWebPart class declaration. This code block implements the IProject Web Part connection interface and adds a local variable to the Web Part.
```
DropDownList _projectPicker = null;  
int IProject.Id 
{ 
    get { return int.Parse(_projectPicker.SelectedValue); } 
} 

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

Insert the following code in the CreateChildControls subroutine.

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

Insert the following ConnectionProvider property after the CreateChildControls subroutine. This provides the connection provider interface point for the ProviderWebPart.
```
[ConnectionProvider("Project Name and ID")] 
public IProject NameDoesNotMatter() 
{ 
    return this; 
}
```
Delete the RenderContents subroutine, if it exists.

Create the Consumer Web Part

In this task, you create a Web Part to participate in a Web Part connection as a consumer.

To create the Consumer Web Part

In Solution Explorer, right-click ConnectTwoWebParts, point to Add, and then click New Item.
Click the Visual C# node in the Installed Templates section, click SharePoint, and then click 2010. Select Web Part from the available templates.
Type ConsumerWebPart in the Name box and then click Add.

The consumer Web Part is added to the project.
In Solution Explorer, double-click ConsumerWebPart.cs to open the code file.
Insert the following code after the opening bracket ({) of the ConsumerWebPart class declaration.
```
IProject _provider = null; 
Label _lbl = null;
```

Insert the following code in the CreateChildControls subroutine.

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

Insert the following ConnectionConsumer property after the CreateChildControls subroutine. This provides the connection consumer interface point for the ConsumerWebPart Web Part.
```
[ConnectionConsumer("Project Name and ID")] 
public void ThisNameDoesNotMatter(IProject providerInterface) 
{ 
    _provider = providerInterface; 
}
```
Delete the RenderContents subroutine, if it exists.

Deploy and Add the Web Parts to a Web Parts Page

In this task, you build and deploy the provider and consumer Web Parts. Then you add the Web Parts to a Web Parts page.

To deploy and add the Web Parts to a Web Parts page

In Solution Explorer, right-click ConnectTwoWebParts and then click Deploy.
Open Internet Explorer and browse to the Web site that you specified for the project.
Click the Site Actions menu and then click More Options.
Scroll and then click Web Part Page. Type SampleWebPartPage in the Name box and then click Create.

SharePoint Foundation creates the Web Parts page and opens it in Edit mode.
Click one of the Web Part zones in the blue box.
Select Custom in the Categories box (see Figure 3), select the ConsumerWebPart, and then click Add.

Figure 3. Select the ConsumerWebPart
This adds the ConsumerWebPart to the page as shown in Figure 4.

Figure 4. The ConsumerWebPart is added to the Web Part zone
Repeat these steps to add the ProviderWebPart to a different Web Part zone. Both Web Parts are now displayed on the page as shown in Figure 5.

Figure 5. Both Web Parts have been added to the page

Connect the Two Web Parts

In this task, you connect the Provider Web Part to the Consumer Web Part.

To connect the Web Parts

In this task, you connect the Provider Web Part to the Consumer Web Part.
Point to Connections, point to Send Project Name and ID To, and then click ConsumerWebPart.

You should see the project title displayed in the ConsumerWebPart Web Part.
Make a different selection in the Provider Web Part list. The change in title is then reflected in the Consumer Web Part zone as shown in Figure 6.

Figure 6. Change in the Provider Web Part is reflected in the Consumer Web Part