Web parts communication

Example: You have two web parts with a dropdown list in each. The first web part's dropdown list is showing all the customers. And the second web part's dropdown list should display the orders based on the customer that is selected in first dropdown. Here, the connection between two DropDownLists is not straight forward as those are part of two separate web parts.

Introduction

Here we have two web parts, first one contains a drop down list to display all the customers and second one contains a drop down list to display orders of a particular customer selected in customers drop down. As these drop downs resides in different web parts, we have to implement an interface to be contacted by both of them.

Message Contract interface design(ICustomerOrderMessageContract):

To exchange the 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 Provider and Consumer. This property should be defined with the attribute Personalizable. All we need with this is just exchage the customer id.

Provider and Consumer web parts design:

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

Provider (Customers Webpart):

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

Consumer (Orders webpart):

Consumer will just use the above object to get the customer. So simply create this class as a web part and define a method which is capable of receive 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.

Customer and Order web part classes are ready. Now we need to put them in actual web parts.

Web pages designing 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, 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>

From the code above, we have set the ProviderID of WebPartConnection as the ID of Customers web part wpCustOrder:Customers and ConsumerID of WebPartConnection as the ID of Orders web part wpCustOrder:Orders.

That's it; we have established the communication between two web parts.

Code Usage:

First run the MyTestDB.sql to create the tables and procedures.

Set the connection string in DBLayer.cs.