How do I pass/exchange data between two Visual Web Parts?

in this post of the post series Visual WebParts, we are looking how to make two Visual WebParts exchange data on the same page. In this way you are able to solve some more complex scenarios like a master-child relation ship between two WebParts. This post tells you how to use this built-in functionality by using WebPart connections. WebPart connections are interfaces that define the communication between a provider of content and a consumer of content. The content provider WebPart exposes data to an interface you have to specify. This interface can then be used to consume this exposed data in the content consumer.

Walkthrough

In this post we are going to exchange a single integer value from the provider WebPart to the consumer. We are only showing how to set up the connection. However, this information is enough to create WebPart connections that are more complicated. When you are developing a WebPart connection, you have to follow these basic steps:

• Step 1: create the interface for the data you want to expose
• Step 2: create your provider WebPart with the definition of the interface you previously created
• Step 3: create your consumer WebPart and use the interface you previously created to consume the data
• Step 4: add the WebParts to your page and connect them together with the WebPart menu of the provider WebPart

as I created this tutorial, I noticed that the WebPart connections are not working in a Wiki page of SharePoint 2010. Therefore, use a WebPart page with WebPart zones to verify the results.

Step 1: create the interface for the data you want to expose

First of all, we need to create a new Visual WebPart project in Visual Studio 2010. If you still don’t know how to do this, you can see how to do this in my Visual WebPart post series. After, we create a simple C# interface that will be used to define our simple data connection.

• create a new Visual WebPart project in Visual Studio 2010
• add a new Interface and call it for the sake of this example IProvideMyAge
• open the file IProvideMyAge.cs and put the code that follows

public interface IProvideMyAge 
{ 
    int Age { get; } 
}

this simple interface provides only one simple data definition. You can put as many values as you want and also consume complex or custom types. The only requirement is that these types are marked as serializable

Step 2: create your provider WebPart

Now that we created our interface, we have to tell our Visual WebPart to use this interface and provide a WebPart connection point. For the sake of the example we will only define this connection point and put a hardcoded value for the data that later will be consumed.

• delete the WebPart that was automatically generated in the project. It’s name is probably VisualWebPart1
• Add a new Visual WebPart and call it MyProvider
• Open the file MyProvider.csand verify the code that follows. You have to do some little changes. You can verify the changes in the next code snippet:
  • Add the interface IProvideMyAge to the WebPart on line 1
  • Create a method that specifies the name of the connection provider (line 12-16) and returns the current instance of the WebPart
  • implement the interface property provided by the IProvdeMyAge interface on line 18-23

public class MyProvider : WebPart, IProvideMyAge2) 
{
    // Visual Studio might automatically update this path when you change the Visual Web Part project item.
    private const string _ascxPath = @"~/_CONTROLTEMPLATES/WebPartConnections/MyProvider/MyProviderUserControl.ascx";

    protected override void CreateChildControls()
    {
        Control control = Page.LoadControl(_ascxPath);
        Controls.Add(control);
    }

    [ConnectionProvider("TheAgeInterface")]
    IProvideMyAge WhatIsMyAge()
    {
        return this;
    }

    int IProvideMyAge.Age
    {
        get 
        { 
            return 27;
        }
    }
}

Step 3: create your consumer WebPart

Before, we created the data interface and the provider Webpart. Now, it’s time to create our consumer WebPart. We are working with Visual WebParts. Therefore, we have to work on two different classes. The user control that will present the data of the WebPart class that we are going to create and the WebPart class itself that will contain our consumption point. The steps to follow are:

• create the consumer and define the consumption point
• tell the user control loaded in your WebPart who you are by passing your reference
• create a property that will hold your WebPart class in the user control
• add a label to the user control
• fill in the “OnPrerender” method your label with the value collected from the WebPart

Now, we are going to create the Visual WebPart and define our consumption point:

• Add a new Visual WebPart and call it MyConsumer
• Open MyConsumer.cs and the code that follows

public class MyConsumer : WebPart
{
    // Visual Studio might automatically update this path when you change the Visual Web Part project item.
    private const string _ascxPath = @"~/_CONTROLTEMPLATES/WebPartConnections/MyConsumer/MyConsumerUserControl.ascx";

    protected override void CreateChildControls()#
    {
        MyConsumerUserControl control = Page.LoadControl(_ascxPath) as MyConsumerUserControl;
        control.WebPart = this;
        Controls.Add(control);
    }

    public int Age { get; set; }
    [ConnectionConsumer("TheAgeInterface")]
    public void SetAge(IProvideMyAge age)
    {
        if (age != null)
        {
            this.Age = age.Age;
        }
    }
}

Notice that with lines 8-9 we are passing to a property of our user control the current WebPart reference (we will create the property in the user control in the next steps). We defined a property on line 13 to expose our data to our user control afterwards. Line 14-21 defines the consumption method of our consumer WebPart.

Note:the name of the connection must be the same as the name defined in our provider.

Now, let us finish the work by making the last changes on our user control.

• Open MyConsumerUserControl.ascx and put there a label
• Open MyConsumerUserControl.ascx.cs and define the code as follows

public partial class MyConsumerUserControl : UserControl
{
    public MyConsumer WebPart { get; set; }
    
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Label1.Text = this.WebPart.Age.ToString();
    }
}

We defined in line 3 the property we populated before in our WebPart. This WebPart reference is then used in the OnPreRender method to populate the value in our label control we added to our user control. Now, we are ready to publish our project and test our simple connection.

Step 4: add the WebParts to your page and connect them

We finish up our example by publishing the WebParts and by creating a WebPart connection manually.

• publish the WebPart project to SharePoint 2010
• add both deployed WebParts to a page with WebPart zones
• open the WebPart menu of your provider Webpart and you will notice a menu item called Connection
• follow this menu and create the connection with the desired consumer WebPart (in our example there should be only one listed WebPart)

After the connection, you should see the magic and the value 27 in the label of your consumer WebPart.

Summary

WebPart connections give you the possibility to pass values from a provider WebPart to a consumer WebPart. In this post you saw the basic steps you need to follow to accomplish this task. The WebPart framework does the rest for you. If you want to get more information about this topic, just follow this link.

Hope this helps,

Patrick