Using Connections Zones

You can share information between two or more Web Parts on a page by connecting the Web Parts. There are a variety of different situations in which you might want to communicate information between two Web Parts.

For example, imagine that you are creating a Web Part application for a human resources department. You could create one Web Part that enables you to select a current employee. Another Web Part might display insurance information for the selected employee. Yet another Web Part might display information about the selected employee's work history. If you connect all the Web Parts, then you can select a new employee from the first Web Part to see detailed information about the employee with the other two Web Parts.

Or, imagine that you are building a blog application with Web Parts. One Web Part might display a calendar. A second Web Part might display a list of blog entries. If you connect the two Web Parts, you can select a date in the calendar Web Part to see a list of matching entries in the blog Web Part.

Connecting Web Parts

When you connect two Web Parts, you create a connection between a provider Web Part and a consumer Web Part. The provider Web Part provides the information that is retrieved by the consumer Web Part. Multiple consumer Web Parts can be connected to the same provider.

You must follow a certain sequence of steps whenever you connect two Web Parts:

1.	Create an interface that represents the information being shared.
2.	Add the ConnectionProvider attribute to a method of the provider Web Part.
3.	Add the ConnectionConsumer attribute to a method of the consumer Web Part.

Before you can communicate information between two Web Parts, you must specify an interface that describes the information being shared. An interface can contain a list of properties, methods, and events.

Next, the provider Web Part must have a method that returns a class that implements the interface. You mark the method that provides the interface by decorating the method with the ConnectionProvider attribute.

Finally, the consumer Web Part must have a method that retrieves the interface. This method is marked in the consumer Web Part with the ConnectionConsumer attribute.

Connecting Simple Web Parts

Let's go ahead and build a simple provider and consumer Web Part that you can connect. The provider Web Part will enable users to enter a ZIP code. The consumer Web Part displays the weather for the selected ZIP code (see Figure 27.15).

Figure 27.15. Connecting the ZIP Code with the weather.

First, you need to create an interface which describes the information being passed between the provider and consumer Web Parts. Our interface is contained in Listing 27.22.

Listing 27.22. App_Code\IZIPCode.vb

''' <summary> ''' Represents a ZIP Code ''' </summary> Public Interface IZIPCode     ReadOnly Property ZIPCode() As String  End Interface

The IZIPCode interface defines one read-only property named ZIPCode. This is the bit of information that will pass between the two Web Parts.

Note

The IZIPCode interface must be saved in the App_Code folder or it will not be automatically compiled.

Next, you need to create the provider Web Part. This Web Part enables a user to enter a ZIP code in a text box. The ZIPCodePart is contained in Listing 27.23.

Listing 27.23. ZIPCodePart.ascx

<%@ Control Language="VB" ClassName="ZIPCodePart" %> <%@ Implements Interface="IZIPCode" %> <script runat="server">     ''' <summary>     ''' Implements the IZIPCode interface     ''' </summary>     Public ReadOnly Property ZIPCode() As String Implements IZIPCode.ZIPCode         Get             Return txtZIPCode.Text         End Get     End Property     ''' <summary>     ''' This method is called from connected Web Parts     ''' </summary>     <ConnectionProvider("ZIP Code")> _     Public Function ProvideZIPCode() As IZIPCode         Return Me     End Function </script> <asp:Label          AssociatedControl     Text="ZIP Code:"     Runat="server" /> <asp:TextBox          Runat="server" /> <asp:Button          Text="Submit"     Runat="server" />

Notice that the ZIPCodePart includes a method named ProvideZIPCode(), which is decorated with the ConnectionProvider attribute. This method is called by any consumer Web Parts connected to the ZIPCodePart.

The ProvideZIPCode() method returns the ZIPCodePart itself when the method is called. Notice that the ZIPCodePart implements the IZIPCode interface. The Web Part includes an <%@ Implements %> directive and it implements the ZIPCode property.

The provider Web Part is not required to implement the interface it exposes. If you prefer, you could return a different class that implements the IZIPCode interface from the ProvideZIPCode() method.

Now you are ready to create the consumer Web Part. This Web Part, named WeatherPart, displays the current weather. The code for the WeatherPart is contained in Listing 27.24.

Listing 27.24. WeatherPart.ascx

[View full width]

<%@ Control Language="VB" ClassName="WeatherPart" %> <script runat="server">     Private _zipCode As IZIPCode     ''' <summary>     ''' This method retrieves the IZIPCode interface returned     ''' by the ProvideZIPCode method     ''' </summary>     <ConnectionConsumer("ZIP Code")> _     Public  Sub ConsumeZIPCode(ByVal zipCode As IZIPCode)         _zipCode = zipCode     End Sub     ''' <summary>     ''' Display the weather     ''' </summary>     Private  Sub Page_PreRender()         ' Check if we are connected         If Not _zipCode Is Nothing Then             If _zipCode.ZIPCode <> String.Empty Then                 lblWeather.Text = String.Format("The weather for {0} is expected to be  sunny!", _zipCode.ZIPCode)             Else                 lblWeather.Text = "Please enter your ZIP code"             End If         End If     End Sub </script> <h3>Current Weather</h3> <asp:Label          Runat="server" />

The WeatherPart contains a method named ConsumeZIPCode() that is decorated with the ConnectionConsumer attribute. This method is called when a class that implements the IZIPCode interface is returned from the provider Web Part.

The ConsumeZIPCode() method assigns the class that implements the IZIPCode interface to a private field. The private field is used to display the weather in the Page_PreRender() method.

Note

When working with connected Web Parts, it is important to know when in the page execution lifecycle the consumer Web Part actually calls the provider Web Part. This happens during the Page's LoadComplete event, which occurs right after the Page's Load event.

For this reason, the information exposed by a provider Web Part is not available during a consumer Web Part's Load event. You should place all your logic that depends on this information in the Web Part's PreRender event handler.

Finally, you can create a Web Part page that hosts the ZIPCodePart and WeatherPart. This page is contained in Listing 27.25.

Listing 27.25. ConnectedSimpleParts.aspx

<%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="ZIPCodePart" src="/books/3/444/1/html/2/~/ZIPCodePart.ascx" %> <%@ Register TagPrefix="user" TagName="WeatherPart" src="/books/3/444/1/html/2/~/WeatherPart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)         WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text)     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <style type="text/css">         .column         {             float:left;             width:40%;             height:200px;             margin-right:10px;             border:solid 1px black;             background-color: white;         }         .menu         {             margin:5px 0px;         }         html         {             background-color:#eeeeee;         }     </style>     <title>Connected Simple Parts</title> </head> <body>     <form  runat="server">     <asp:WebPartManager                  Runat="server">         <StaticConnections>         <asp:WebPartConnection                          Provider             Consumer />         </StaticConnections>      </asp:WebPartManager>         <asp:Menu                          OnMenuItemClick="Menu1_MenuItemClick"             Orientation="Horizontal"             Css             Runat="server">             <Items>             <asp:MenuItem Text="Browse" />             <asp:MenuItem Text="Design" />             </Items>         </asp:Menu>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:ZIPCodePart                                  Title="ZIP Code Part"                 Description="Enables entry of ZIP code"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:WeatherPart                                  Title="Weather Part"                 Description="Displays current weather"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>     </form> </body> </html>

The page in Listing 27.25 contains the ZIPCodePart and WeatherPart in its two Web Part Zones. The two Web Parts are statically connected by the WebPartManager control. Notice that the WebPartManager control includes a <StaticConnections> section that connects the two parts.

After you open the page in Listing 27.25 in your web browser, you can enter a ZIP code in the ZIPCodePart and see the ZIP code displayed in the WeatherPart.

Note

If you place your WebPartManager control in a Master Page, you can still create static connections between Web Parts in a content page. To do this, you need to add a ProxyWebPartManager control that lists the static connections to the content page.

Connecting Databound Web Parts

This section tackles a slightly more complicated sample of connected Web Parts. You connect two Web Parts that display database data.

The provider Web Part displays a list of movie categories, and the consumer Web Part displays a list of movies. When the Web Parts are connected, you can select a movie category and see a list of matching movies (see Figure 27.16).

Figure 27.16. Connecting databound controls.

The first thing to do is define the interface that describes the information passed from the provider Web Part to the consumer Web Part. The interface is contained in Listing 27.26.

Listing 27.26. IMovieCategory.vb

''' <summary> ''' Decribes the data exposed by ''' the MovieCategoryPart ''' </summary> Public Interface IMovieCategory     ReadOnly Property SelectedCategoryId() As Integer  End Interface

The next step is to create the provider Web Part that exposes the IMovieCategory interface. The MovieCategoryPart is contained in Listing 27.27. This Web Part enables you to select a movie from a drop-down list.

Listing 27.27. MovieCategoryPart.ascx

[View full width]

<%@ Control Language="VB" ClassName="MovieCategoryPart" %> <%@ Implements Interface="IMovieCategory" %> <script runat="server">     ''' <summary>     ''' Implements IMovieCategoryPart.SelectedCategoryId     ''' </summary>     Public ReadOnly Property SelectedCategoryId() As Integer Implements IMovieCategory .SelectedCategoryId         Get             Return CInt(dropCategories.SelectedValue)         End Get     End Property     ''' <summary>     ''' This method is called from connected Web Parts     ''' </summary>     <ConnectionProvider("Movie Category")> _     Public Function ProvideCategory() As IMovieCategory         Return Me     End Function </script> <asp:Label          Text="Movie Category:"     AssociatedControl     Runat="server" /> <asp:DropDownList          DataSource     DataTextField="Name"     DataValueField="Id"     AutoPostBack="true"     Runat="server" /> <asp:Button          Text="Select"     Runat="server" /> <asp:SqlDataSource          ConnectionString="Server=.\SQLExpress;         Integrated Security=True;AttachDbFileName=|DataDirectory|MyDatabase.mdf;         User Instance=True"     SelectCommand="SELECT Id,Name FROM MovieCategories"     Runat="server" />

The MovieCategoryPart contains a DropDownList control bound to a SqlDataSource control. The SqlDataSource control represents the contents of a SQL Express database table named MovieCategories.

Notice that the Web Part includes a method named ProvideCategory(), which is decorated with the ConnectionProvider attribute. This method returns a reference to the MovieCategoryPart when a consumer Web Part connects to the MovieCategoryPart.

The next step is to create the consumer Web Part. The consumer Web Part is named MovieListPart and it is contained in Listing 27.28.

Listing 27.28. MovieListPart.ascx

[View full width]

<%@ Control Language="VB" ClassName="MovieListPart" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server">     Private _category As IMovieCategory     ''' <summary>     ''' This method is called when the ProvideCategory method     ''' returns a class that implements the IMovieCategory interface     ''' </summary>     <ConnectionConsumer("Movie Category")> _     Public  Sub ConsumeCategory(ByVal category As IMovieCategory)         _category = category     End Sub     ''' <summary>     ''' Update SelectedCategoryId from Provider Web Part     ''' </summary>     Private  Sub Page_PreRender()         If Not _category Is Nothing Then             srcMovies.SelectParameters("CategoryId").DefaultValue = _category .SelectedCategoryId.ToString()         End If     End Sub </script> <asp:GridView          DataSource     Runat="server" /> <asp:SqlDataSource          ConnectionString="Server=.\SQLExpress;Integrated Security=True;         AttachDbFileName=|DataDirectory|MyDatabase.mdf;User Instance=True"     SelectCommand="SELECT Title,Director,YearReleased         FROM Movies WHERE CategoryId=@CategoryId"     Runat="server">     <SelectParameters>         <asp:Parameter Name="CategoryId" Type="int32" />     </SelectParameters>  </asp:SqlDataSource>

The MovieListPart displays a list of movies in a GridView control. When you connect the MovieListPart to the MovieCategoryPart, the MovieListPart displays only those movies that match the selected movie category.

Notice that the MovieListPart includes a method named ConsumeCategory(), which is decorated with the ConnectionConsumer attribute. This method retrieves the class that implements the IMovieCategory interface (the MovieCategoryPart) from the provider Web Part.

The Page_PreRender() method updates the list of movies displayed in the GridView control. The method updates the value of the CategoryId parameter used by the SqlDataSource control.

Finally, you can create a page that hosts the provider and consumer Web Parts. The page is contained in Listing 27.29.

Listing 27.29. ConnectedDataParts.aspx

<%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="MovieCategoryPart" src="/books/3/444/1/html/2/~/MovieCategoryPart.ascx" %> <%@ Register TagPrefix="user" TagName="MovieListPart" src="/books/3/444/1/html/2/~/MovieListPart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)         WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text)     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <style type="text/css">         .column         {             float:left;             width:45%;             height:200px;             margin-right:10px;             border:solid 1px black;             background-color: white;         }         .menu         {             margin:5px 0px;         }         html         {             background-color:#eeeeee;         }     </style>     <title>Connected Data Parts</title> </head> <body>     <form  runat="server">     <asp:WebPartManager                  Runat="server">         <StaticConnections>         <asp:WebPartConnection                          Provider             Consumer />         </StaticConnections>      </asp:WebPartManager>         <asp:Menu                          OnMenuItemClick="Menu1_MenuItemClick"             Orientation="Horizontal"             Css             Runat="server">             <Items>             <asp:MenuItem Text="Browse" />             <asp:MenuItem Text="Design" />             </Items>         </asp:Menu>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:MovieCategoryPart                                  Title="Movie Category Part"                 Description="Displays movie categories"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:MovieListPart                                  Title="Movie List Part"                 Description="Displays list of movies"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>     </form> </body> </html>

The page in Listing 27.29 statically connects the MovieCategoryPart and MovieListPart Web Parts. The static connection is created in the WebPartManager control's <StaticConnections> section.

Dynamically Connecting Web Parts

In the previous sections, you connected Web Parts by declaring a static connection between the Web Parts. Creating a static connection makes sense when the Web Parts themselves are also statically declared in the page.

There are situations, however, in which you will want to enable users of your application to form dynamic connections between Web Parts. For example, you might want to allow a user to add a new Web Part to a page from a catalog of Web Parts and connect the new Web Part to an existing Web Part.

You can enable users to create dynamic connections between Web Parts by adding a Connections Zone to a page. The page in Listing 27.30 illustrates how you can declare a Connections Zone.

Listing 27.30. ConnectedDynamicParts.aspx

<%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="ZIPCodePart" src="/books/3/444/1/html/2/~/ZIPCodePart.ascx" %> <%@ Register TagPrefix="user" TagName="WeatherPart" src="/books/3/444/1/html/2/~/WeatherPart.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)         WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text)     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <style type="text/css">         .column         {             float:left;             width:30%;             height:200px;             margin-right:10px;             border:solid 1px black;             background-color: white;         }         .menu         {             margin:5px 0px;         }         html         {             background-color:#eeeeee;         }     </style>     <title>Connected Dynamic Parts</title> </head> <body>     <form  runat="server">     <asp:WebPartManager                  Runat="server" />         <asp:Menu                          OnMenuItemClick="Menu1_MenuItemClick"             Orientation="Horizontal"             Css             Runat="server">             <Items>             <asp:MenuItem Text="Browse" />             <asp:MenuItem Text="Design" />             <asp:MenuItem Text="Catalog" />             <asp:MenuItem Text="Connect" />             </Items>         </asp:Menu>         <asp:WebPartZone                          Css             Runat="server" />         <asp:WebPartZone                          Css             Runat="server" />         <asp:CatalogZone                          Css             Runat="server">             <ZoneTemplate>             <asp:DeclarativeCatalogPart                                  Runat="server">                 <WebPartsTemplate>                 <user:ZIPCodePart                                          Title="ZIP Code Part"                     Description="Enables entry of ZIP code"                     Runat="Server" />                 <user:WeatherPart                                          Title="Weather Part"                     Description="Displays current weather"                     Runat="Server" />                 </WebPartsTemplate>             </asp:DeclarativeCatalogPart>             </ZoneTemplate>         </asp:CatalogZone>         <asp:ConnectionsZone                          Css             Runat="server" />     </form> </body> </html>

Notice that, unlike other tool zones, the Connections Zone does not include any parts. In Listing 27.30, a <ConnectionsZone> tag is declared in the page without any child elements.

If you open the page in Listing 27.30 in your browser, you can click the Catalog link to display the contents of the Declarative Catalog. Next, you can add an instance of both the ZIPCodePart and WeatherPart to the page. At this point, the two Web Parts are not connected.

Next, you can connect the Web Parts by clicking the Connect link and selecting Connect from either of the two Web Part control's menus. For example, if you select Connect from the WeatherPart control's menu and click the Create a Connection to a Provider link, the connection interface in Figure 27.17 appears.

Figure 27.17. Dynamically connecting two Web Parts.

You can select the ZIP Code Part from the drop-down list to connect the two Web Parts. After the Web Parts are connected, entering a ZIP code causes the Weather Part to display the weather for that ZIP code.

Using Transformers with Connected Web Parts

For two Web Parts to communicate, the two Web Parts must agree on a common interface. With careful planning, a single developer can build a set of Web Parts and interfaces that enable all the Web Parts contained in an application to communicate cleanly.

However, imagine that you need to connect Web Parts created by different developers in your organization. Or imagine that you need to connect Web Parts sold by different companies. It is unlikely that the Web Parts will share exactly the same interfaces.

In situations in which you do not have control over the interface exposed by a Web Part, you can take advantage of a Transformer to modify the interface. A Transformer enables you to transform the data passed between a provider Web Part and a consumer Web Part.

Imagine, for example, that you buy a new Web Partnamed the LocalNewsPartthat displays a list of local news headlines. You want to use this new Web Part with your existing ZIPCodePart and WeatherPart in an application.

Unfortunately, you quickly discover that you cannot connect the LocalNewsPart to the ZIPCodePart control. The two Web Parts expect different interfaces. To solve this problem, you need to create a Transformer.

The LocalNewsPart Web Part is contained in Listing 27.31.

Listing 27.31. LocalNewsPart.ascx

[View full width]

<%@ Control Language="VB" ClassName="LocalNewsPart" %> <script runat="server">     Private _zipCode As INewsZIPCode     ''' <summary>     ''' This method retrieves the INewsZIPCode interface returned     ''' by the provider Web Part     ''' </summary>     <ConnectionConsumer("News ZIP Code")> _     Public Sub ConsumeZIPCode(ByVal zipCode As INewsZIPCode)         _zipCode = zipCode     End Sub     ''' <summary>     ''' Display the news     ''' </summary>     Private  Sub Page_PreRender()         ' Check if we are connected         If Not _zipCode Is Nothing Then             If _zipCode.ZIPCode <> String.Empty Then                 lblNews.Text = String.Format("Everything looks terrific for {0}!",  _zipCode.ZIPCode)             Else                 lblNews.Text = "Please enter your ZIP code"             End If         End If     End Sub </script> <h3>Current News</h3> <asp:Label          Runat="server" />

The LocalNewsPart Web Part uses the interface defined in Listing 27.32the INewsZIPCode interfaceto represent a ZIP code.

Listing 27.32. App_Code\INewsZIPCode.vb

''' <summary> ''' Represents a ZIP code ''' </summary> Public Interface INewsZIPCode     ReadOnly Property ZIPCode() As String  End Interface

The INewsZIPCode interface represents a ZIP code in exactly the same way as the IZIPCode interface used by the ZIPCodePart and WeatherPart Web Parts. Unfortunately, however, it is a different interface. Therefore, before you can connect the LocalNewsPart Web Part to the ZIPCodePart, you must first define a Transformer.

The Transformer in Listing 27.33 converts an instance of the IZIPCode interface to an instance of the INewsZIPCode interface.

Listing 27.33. App_Code\ZIPCodeTransformer.vb

Imports System Imports System.Web.UI.WebControls.WebParts Namespace myControls     ''' <summary>     ''' This class transforms an IZIPCode to     ''' an INewsZIPCode     ''' </summary>     <WebPartTransformer(GetType(IZIPCode), GetType(INewsZIPCode))> _     Public Class ZIPCodeTransformer         Inherits WebPartTransformer         Public Overrides Function Transform(ByVal providerData As Object) As Object             Return New TempZIP((CType(providerData, IZIPCode)).ZIPCode)         End Function     End Class     Public Class TempZIP         Implements INewsZIPCode         Private _zipCode As String         Public ReadOnly Property ZIPCode() As String Implements INewsZIPCode.ZIPCode             Get                 Return _zipCode             End Get         End Property         Friend Sub New(ByVal zipCode As String)             _zipCode = zipCode         End Sub     End Class  End Namespace

After you create the file in Listing 27.33, you need to add it to your application's App_Code folder to automatically compile the Transformer class.

There are a number of things that you should notice about the code for the Transformer. First, notice that the ZIPCodeTransformer class is decorated with a WebPartTransformer attribute. This attribute has two parameters: the provider interface and the consumer interface.

Next, you should notice that the ZIPCodeTransformer class derives from the base WebPartTransformer class. The ZIPCodeTransformer class overrides the base class's transform() method. The TRansform() method takes the instance of the interface provided by the provider Web Part and transforms it into an instance of an interface appropriate for the consumer Web Part.

Note

The WebPartTransformer class includes another useful method that you can override: the CreateConfigurationControl() method. You can use this method to return an editor for configuring a Transformer. The Transformer editor appears when you click the Edit button in the Connections Zone.

Before you can use a Transformer in an application, you must register the Transformer in your application's web configuration file. The file in Listing 27.34 contains the necessary configuration settings.

Listing 27.34. Web.Config

<?xml version="1.0"?> <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">     <system.web>       <webParts>         <transformers>           <add                 name="ZIPCodeTransformer"                 type="myControls.ZIPCodeTransformer"/>         </transformers>       </webParts>     </system.web> </configuration>

After you are finished setting up the Transformer, you can use the Transformer when creating either a static or dynamic connection between Web Parts. The page in Listing 27.35 demonstrates how you can declare a Transformer when creating a static connection between the ZIPCodePart and the LocalNewsPart Web Parts.

Listing 27.35. ConnectedTransformerParts.aspx

<%@ Page Language="VB" %> <%@ Register TagPrefix="user" TagName="ZIPCodePart" src="/books/3/444/1/html/2/~/ZIPCodePart.ascx" %> <%@ Register TagPrefix="user" TagName="WeatherPart" src="/books/3/444/1/html/2/~/WeatherPart.ascx" %> <%@ Register TagPrefix="user" TagName="LocalNewsPart" src="/books/3/444/1/html/2/~/LocalNewsPart.ascx" %> <%@ Register TagPrefix="custom" Namespace="myControls" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)         WebPartManager1.DisplayMode = WebPartManager1.DisplayModes(e.Item.Text)     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <style type="text/css">         .column         {             float:left;             width:45%;             height:200px;             margin-right:10px;             border:solid 1px black;             background-color: white;         }         .menu         {             margin:5px 0px;         }         html         {             background-color:#eeeeee;         }     </style>     <title>Connected Transformer Parts</title> </head> <body>     <form  runat="server">     <asp:WebPartManager                  Runat="server">         <StaticConnections>         <asp:WebPartConnection                          Provider             Consumer />         <asp:WebPartConnection                          Provider             Consumer>             <custom:ZIPCodeTransformer                 Runat="Server" />          </asp:WebPartConnection>         </StaticConnections>      </asp:WebPartManager>         <asp:Menu                          OnMenuItemClick="Menu1_MenuItemClick"             Orientation="Horizontal"             Css             Runat="server">             <Items>             <asp:MenuItem Text="Browse" />             <asp:MenuItem Text="Design" />             </Items>         </asp:Menu>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:ZIPCodePart                                  Title="ZIP Code Part"                 Description="Enables entry of ZIP code"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>         <asp:WebPartZone                          Css             Runat="server">             <ZoneTemplate>             <user:WeatherPart                                  Title="Weather Part"                 Description="Displays current weather"                 Runat="Server" />             <user:LocalNewsPart                                  Title="Local News Part"                 Description="Displays current news"                 Runat="Server" />             </ZoneTemplate>         </asp:WebPartZone>     </form> </body> </html>

The ZIPCodeTransformer is registered at the top of the page in Listing 27.35. The page uses the ZIPCodeTransformer in the declaration of the static connection between the ZIPCodePart and the LocalNewsPart Web Parts.

After you configure a Transformer in an application's web configuration file, you don't need to do anything special to use the Transformer in a page in which you are dynamically connecting Web Parts.

For example, the page in Listing 27.35 contains a catalog that lists the ZIPCodePart, the WeatherPart, and the LocalNewsPart. You can add all three Web Parts to a page and then connect the Web Parts by clicking the Connect link and selecting the Connect menu option included in each Web Part menu. If you connect the LocalNewsPart to the ZIPCodePart, the connection will automatically use the ZIPCodeTransformer.