WebParts Communication: How WebParts on a page communicate with each other

Introduction:

In this tutorial we will describe how to make WebParts on a WebParts Page communicate with each other. So will see how to use ConnectionsZone and how to enable WebParts to talk to each other by connecting them.

Assumptions:

This tutorial assumes that you know how to work with web forms, creating user controls and connecting to data sources using SqlDataSource Control. Also you should know how to use WebPartZone control and to know what are WebParts and WebParts Pages.

How to implement connections between 2 WebParts:

The scenario is, we have 2 web parts, one display a drop down list of publishers, and the other display grid view of titles related to a specific publisher. So whenever I change the selection from the drop down list, the grid view should repopulated with the titles related to the selected publisher. This is very simple scenario just to show you how to implement WebParts Connections.

Preparing the WebParts Page:

1. Create new WebForm, Name it WebPartsConnections.aspx, Also create 2 user controls, name them as UCPublishers.ascx & UCTitles.ascx.
   
2. Open UCPublishers.ascx, drag and drop SqlDataSource control -name it sdsPubs- into it as well as a DropDownList -name it cmbPubs- and set its AutoPostBack Property to ture.
   
3. Configure the SqlDataSource to select [pub_id] and [pub_name] from publishers table in pubs Database sample.
   
   
   
4. Open UCTitles.ascx, drage and drop SqlDataSource control -name it sdsTitles- into it as well as a GridView -name it dvTitles-. Also drag and drop a HiddenField Control -name it hfSelectedPublisherID-
   
5. Configure you SqlDataSource to select [title], [price] and [pubdate] from [titles] table in Pubs sample database, with pub_id as parameter. Configure the parameter to be a control parameter, and its value populated tom the HiddenField Control.
   
    
   
6. Now Open your WebPartsConnections.aspx, Insert table with one column and one row.
   
7. Drag and drop WebPartManager Control into the page-name it wpManager-
   
8. Drag and drop 2 WebPartZone controls into the table, name them as wpzTop & wpzBottom.
   

9. Drag and drop the UCPublishers.ascx from the solution explorer into the wpzTop. Do the same for UCTitles.ascx but drop it into wpzBottom. You can configure the Zones to use AutoFormat Professional Style.
   

10. You can now Test the page. Notice that there is nothing happens when you change the publisher.

Building the Connection:

To implement the connection functionality between WebParts, we should create an Interface. This interface would be implemented by both UCPublishers.ascx as Connection Provider, and UCTitles.ascx as Connection Consumer. This interface serves as a contract for the communication between the provider and consumer.
We will name our Interface as ISelectedPublisher:

1. Right click on App_Code and select New Item. (Create ISelectedPublisher.cs)
   
   public interface ISelectedPublisher
   {
   //ID of the selected publisher
   string SeletedPublisherID{get;}
   }
   
   
2. Now open your UCPublishers.ascx in Code-View and implement the ISelectedPublisher as the following
   
   public partial class UCPublishers : System.Web.UI.UserControl, ISelectedPublisher
   {

   #region ISelectedPublisher Members
   

   //Get the Selected Value from the DropDownList that holds Publishers
   public string SeletedPublisherID
   {
   

   get { return cmbPubs.SelectedValue; }

   }

   #endregion

   [ConnectionProvider("SelectedPublisher", "SelectedPublisher")]
   public ISelectedPublisher GetSelectedPublisher()
   {
   

   return this;

   }
   }
   
   Essentially, we are implementing the ISelectedPublisher interface and creating a provider connection point by using the ConnectionProvider attribute. So we implemented the SelectedPublisherID property to return the selected publisher id from the DropDownList.
   
   Also we created the GetSelectedPublisher method. It is marked as ConnectionProvider, The first parameter to the ConnectionProvider attribute assigns a friendly name to the provider connection point. The second parameter assigns a unique ID to the provider connection point. Note the returned object is "this", which mean to consider the control instance itself as the connection provider.
   
   

3. It is time to implement the Consumer now, so open the Code-View of your UCTitles.ascx and Consume the connection provided by the Provider:
   
   public partial class UCTitles : System.Web.UI.UserControl
   {

   private ISelectedPublisher _publisher = null;
   
   [ConnectionConsumer("SelectedPublisher", "SelectedPublisher")]
   public void SetSelectedPublisher(ISelectedPublisher selectedPublisher)
   {

   _publisher = selectedPublisher;

   }
   protected override void OnPreRender(EventArgs e)
   {

   base.OnPreRender(e);
   if (_publisher != null)
   {

   hfSelectedPublisherID.Value = _publisher.SeletedPublisherID;

   }

   }

   }
   
   Essentially, we are using the ConnectionConsumer attribute to define a consumer connection point -The SetSelectedPublisher Method-, and allowing it to act as a receiver of the ISelectedPublisher interface. The publisher that is received is then appended to the hidden field in the UCTitles.ascx Control on the PreRender event. The first parameter to the ConnectionConsumer attribute assigns a friendly name to the consumer connection point. The second parameter assigns a unique ID to the consumer connection point.
   
4. Now Select the WebPartManager Control in your page -wpManager-
   
5. From the property window, select ellipses beside the StaticConnections property. Configure it as the following.
   
   
   
   The ConsumerID is the ID of the Consumer Control, in our case it is the UCTitles Control which has the default ID UCTitles1.
   
   The ProviderID is the ID of the Provider Control, in out case it is the UCPublishers Control which has the dfault ID UCPublishers1.
   
   ConsumerConnectionPointID and ProviderConnectionPointID are the Attributes parameters mentioned earlier.
   
    
   
6. Now its time to test your Page. Run it and change the publisher, you will notice that the Titles is changed in the GridView to display the publisher's Titles.

Working with ConnectionsZone:

Now we will Connect and Disconnect the WebParts Connections on the fly during runtime. To do so we need to use ConnectionsZone.

1. Drag and drop ConnectionsZone Control into your page any place
   
2. Add LinkButton to you page, -name it btnEditConnection- and set the text to "Edit Connection".
   
3. Double click on it to implement its click event handler.
   
   protected void btnEditConnection_Click(object sender, EventArgs e)
   {

   if (btnEditConnection.Text == "Edit Connection")
   {

   wpManager.DisplayMode = WebPartManager.ConnectDisplayMode;
   btnEditConnection.Text = "View Page";

   }
   else
   {

   wpManager.DisplayMode = WebPartManager.BrowseDisplayMode;
   btnEditConnection.Text = "Edit Connection";

   }
   

   }
   
4. Again run your page and click on the button. From the any of the WebParts Menu on the top right corner of the WebPart select Connect. Note that the Connection Zone Appears now. Test your page to see what you can do on the fly with Connection Zone and WebParts
   
   
   
   
    

Now we almost cover most of the basic features of WebParts and WebParts Pages. Hope this WebPart Tutorial series enrich your knowledge about WebParts and WebParts framework in ASP.Net 2. 

References:

For more information refer to the following references:

• Creating a Simple WebPart Page and use WebServer controls as WebParts [Part I].
• Working with WebParts Page, WebPart Zones & WebParts [Part II].
• Building WebParts In ASP.Net 2 Article.