Web Parts Communication

• Download source code - 2.6 MB

Introduction

The objective of this article is understanding the communication between two Web Parts.

For example: You have two Web Parts with a dropdown list in each. The first Web Part's dropdown list shows all the customers. And the second Web Part's dropdown list should display the orders based on the customer that is selected in the first dropdown. Here, the connection between the two dropdown lists is not straightforward as those are part of two separate Web Parts.

As the drop downs reside in different Web Parts, we have to implement an interface to be contacted by both of them.

Message Contract interface design (ICustomerOrderMessageContract)

To exchange data between two Web Parts, we need an interface that should be understood by both the Provider (Customers) and Consumer (Orders). This interface basically contains a property that should be implemented by both the Provider and Consumer. This property should be defined with the attribute Personalizable. All we need with this is just exchange the customer ID.

Provider and Consumer Web Parts design

Here we have to write two classes, one for the Provider and the other for the Consumer, which implements the Message Contract Interface.

Provider (Customers Web Part)

Here we have to create the drop down with the customers. This is more like creating a normal control. But for the additional operations for the Web Part communication, we need to implement ICustomerOrderMessageContract and extend the WebPart class. The challenge here is, we have to define a way to pass the customer outside the class. We can have a property as a provider which is of the ICustomerOrderMessageContract type, and provide an additional behavior to this property with the ConnectionProvider attribute, and simply return the current object by which we can access the selected customer information.

Consumer (Orders Web Part)

The consumer will just use the above object to get the customer. Simply create this class as a Web Part and define a method which is capable of receiving the customer information. Define the method GetMessage() with the attribute ConnectionConsumer. And to add all the orders related to the selected customers, create a drop down list.

The Customer and Order Web Part classes are ready. Now we need to put them in to actual Web Parts.

Web page design to accommodate the above Web Parts

First, register the above Web Part classes as below:

<%@ Register Assembly="ConnectionWebPartSample" 
        Namespace="ConnectionWebPartSample" TagPrefix="wpCustOrder" %>

Now add a WebPartZone, and in the ZoneTemplate, add the Web Part controls as:

<wpCustOrder:Customers ID="customers" Title="Customers" runat="server" /> 
<wpCustOrder:Orders ID="orders" Title="Orders" runat="server" />

Now the challenge is we have to provide communication between them. So use the WebPartManager to provide the connection between them, as below:

<asp:WebPartManager ID="wpManager" runat="server"> 
<StaticConnections> 
<asp:WebPartConnection ID="connection1" 
         ProviderConnectionPointID="CustomerWebPartProvider" 
         ProviderID="customers" ConsumerConnectionPointID="OrderWebPartConsumer" 
         ConsumerID="orders" /> 
</StaticConnections> 
</asp:WebPartManager>

In the code above, we have set the ProviderID of WebPartConnection as the ID of the Customers Web Part wpCustOrder:Customers and the ConsumerID of WebPartConnection as the ID of the Orders Web Part wpCustOrder:Orders.

That's it; we have established communication between the two Web Parts.

Code usage

• First, run MyTestDB.sql to create the tables and procedures.
• Also set the connection string in DBLayer.cs.