SharePoint 2013 - Connectable Web parts

Overview
In SharePoint, a web part can be 'connected' to another web part to provide some information at run-time.  The Provider web part pushes out the contracted information and the Consumer web part is set up to receive and consume the shared information.

Components of Connectable webparts
1) Interface: This custom interface will define the data to be shared from the Provider to the Consumer web part.
2) Provider web part: Implements a data interface - this interface is a definition of the data that will be shared from the Provider web part to the Consumer web part.
Provide a ConnectionProvider method which will expose the interfacing data to the Consumer web part.
3) Consumer web part: ConnectionConsumer method which will receive the interfacing data
Consume the interfacing data and provide enriching details to the user.

Steps for creating connectable web parts

1) Create an Empty SharePoint Project named ConnectedWebparts in Visual Studio 2012.

2) Add a new C# Interface code class and name it IUser.

Code for IUser.cs

Code Snippet

7. namespace ConnectedWebparts
8. {
9.     public interface IUser
10.     {
11.         string UserName { get; }
12.     }
13. }

3) Add a new web part named WPProvider in the project which will be the provider webpart. Make the changes as highlighted in the figure below.

Code for WPProvider.cs

Code Snippet

10. namespace ConnectedWebparts.WPProvider
11. {
12.     [ToolboxItemAttribute(false)]
13.     public class WPProvider : WebPart,IUser
14.     {
15.         //From the UI, we collect the user selections
16.         Label lblUsername = null;
17.         TextBox txtUsername = null;
18.         Button btn = null;
19.         protected override void CreateChildControls()
20.         {
21.             lblUsername = new Label();
22.             txtUsername = new TextBox();
23.             btn = new Button();
24.             lblUsername.Text = "User name: ";
25.             btn.Text = "Send User";
26.             this.Controls.Add(lblUsername);
27.             this.Controls.Add(txtUsername);
28.             this.Controls.Add(btn);
29.         }
30.         public string UserName
31.         {
32.             get { return txtUsername.Text; }
33.         }
34.  
35.         [ConnectionProvider("UserName")]
36.         public IUser ConnectionProviderMethod()
37.         {
38.             // This method will expose the shared data to the Consumer.
39.             return this;
40.         }
41.     }    
42. }

4) Add a new web part named WPConsumer in the project which will be the provider webpart. Make the changes as highlighted in the figure below.

Code for WPConsumer.cs

Code Snippet

10. namespace ConnectedWebparts.WPConsumer
11. {
12.     [ToolboxItemAttribute(false)]
13.     public class WPConsumer : WebPart
14.     {
15.         Label lblUser = null;
16.         IUser oIUser = null;
17.         //Receive the data from the Provider web part here
18.         [ConnectionConsumer("UserName")]
19.         public void ConsumerMethod(IUser user)
20.         {
21.             oIUser = user;
22.         }
23.         protected override void CreateChildControls()
24.         {
25.             // Here we utilize the data received from the Provider
26.             Label lblDisplayText = new Label();
27.             if (oIUser != null)
28.             {
29.                 if (oIUser.UserName != "")
30.                     lblDisplayText.Text = "Hello " + oIUser.UserName;
31.                 else
32.                     lblDisplayText.Text = "Hello Guest";
33.             }
34.             else
35.                 lblDisplayText.Text = "No provider connected";
36.             this.Controls.Add(lblDisplayText);
37.         }
38.     }
39. }

5) After modifying the webpart as mentioned in the above steps, deploy the solution.

6) Add the Consumer webpart on the webpart page.

7) Add the Provider webpart on the webpart page.

8)  Edit the Provider webpart and connect it to the consumer.

9) Now the 2 webparts have been connected to each other using the interface. In the provider webpart, type a username in the textbox and click "Send User". You can see the name is displayed in the consumer webpart as highlighted in the figure below.