Building Web Part Connection
Launch Visual Studio 2005 and create a class library project named “ConnectionWebPartSample"
Create Communication Interface
Firstly we need to create the information that need to be communicated between WebParts.
Add following code in under namespace ConnectionWebPartSample
|
namespace ConnectionWebPartSample
{
public interface IWebPartMessageContract
{
string Message { get; set;}
}
}
|
IWebPartMessageInterface :- it is communication contract between WebParts.
Message :- The information to be communicated.
Create Provider WebPart
1. Implement the communication contract interface
2. Require a method that returns the IWebPartMessageContract interface, and should be decorated with the [ConnectionProvider].
//Create Provider WebPart
public class ProviderWebPart : WebPart, IWebPartMessageContract
{
string strMessage = String.Empty;
TextBox txtMessage;
Button btnSendMessage;
public ProviderWebPart()
{
}
[Personalizable()]
public virtual string Message
{
get { return strMessage; }
set { strMessage = value; }
}
// This is the callback method that returns the provider.
[ConnectionProvider("Message Provider", "MyWebPartProvider")]
public IWebPartMessageContract ProvideIZipCode()
{
return this;
}
protected override void CreateChildControls()
{
Controls.Clear();
txtMessage = new TextBox();
this.Controls.Add(txtMessage);
btnSendMessage = new Button();
btnSendMessage.Text = "Enter Message for Consumer";
btnSendMessage.Click += new EventHandler(this.SendMessage);
this.Controls.Add(btnSendMessage);
}
private void SendMessage(object sender, EventArgs e)
{
if (txtMessage.Text != String.Empty)
{
strMessage = txtMessage.Text;
txtMessage.Text = String.Empty;
}
}
} |
| |
[ConnectionProvider("Message Provider", "MyWebPartProvider")]
"Message Provider" is display name
MyWebPartProvider is an ID for provider connection point . You will see its usage when will create a webpage with Connections
Create Consumer WebPart
Consumer Webpart's need a method decorated with the ConnectionConsumer attribute. This method needs to accept one parameter of the IWebPartMessageContract data type.
//Create Consumer WebPart
public class ConsumerWebPart : WebPart
{
private IWebPartMessageContract _provider;
string strMessage;
Label DisplayContent;
// This method is identified by the ConnectionConsumer
// attribute, and is the mechanism for connecting with
// the provider.
[ConnectionConsumer("Message Consumer", "MyWebPartConsumer")]
public void GetMessage(IWebPartMessageContract Provider)
{
_provider = Provider;
}
protected override void OnPreRender(EventArgs e)
{
EnsureChildControls();
if (this._provider != null)
{
strMessage = _provider.Message.Trim();
DisplayContent.Text = "Message from provider is
}
}
protected override void CreateChildControls()
{
Controls.Clear();
DisplayContent = new Label();
this.Controls.Add(DisplayContent);
}
} |
There are two types of connection between WebParts
Static Connection :-
Static connection are defined by page developer
A static connection becomes a permanent object on a Web page, like a declared control. Static connection can be seen by all user as it is a shared object.
User can never delete the connection object. They can disconnect it incase there is some UI for doing same.
Static connections can be used in following
Incase there is need of connection that is always available to all users
Incase we don't want user to have the option of deleting it from the page.
Dynamic Connection :- A dynamic connection can be created by a user at runtime. Dynamic connections are done via the browser. User can disconnect it from UI. UI is provided when page is in Connect mode.
Static Connection
There are four steps that you must complete to create a static connection between two Web Parts:
Define an interface specifying the methods and properties that are shared between the connected Web Parts.
Add the ConnectionProvider attribute to the Web Part used to provide the -shared information.
Add the ConnectionConsumer attribute to the Web Part used to consume the shared information.
Declare the connections within the StaticConnections sub tag of the WebPartManager class.
Lets start with creating static connection between Webparts
Launch Visual Studio 2005 and create a new website project. A default.aspx page will also get created.
1. Add reference to class library ConnectionWebPartSample
2. Add WebPartManager control from the Toolbox onto the default page
3. Insert a 1-by-1 table onto the form (Layout->Table) and drag and drop a WebPartZone control from the Toolbox (under the WebParts tab) .
4. Register the ConnectionWebPartSample in page
<%@ Register Assembly="ConnectionWebPartSample" Namespace="ConnectionWebPartSample" TagPrefix="wpConnSample" %>
5. Add Both ProviderWebPart and ConsumerWebPart into the page
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<wpConnSample:ProviderWebPart ID="provider1" runat="server"
Title="Message Provider" />
<wpConnSample:ConsumerWebPart ID="consumer1" runat="server"
Title="Message Consumer" />
</ZoneTemplate>
</asp:WebPartZone>
|
| Till now our page is ready with both the consumer and provider WebPart. At the moment there is no connection establish between the WebPart. We are going to do that shortly.
Your page source code will look like
|
<%@ Page Language="C#" %>
<%@ Register Assembly="ConnectionWebPartSample" TagPrefix="wpConnSample" Namespace="ConnectionWebPartSample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:WebPartManager ID="WebPartManager1" runat="server" >
</asp:WebPartManager>
<table style="width: 186px">
<tr>
<td style="background-color: #99cccc; height: 69px;">
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<wpConnSample:ProviderWebPart ID="provider1" runat="server"
Title="Message Provider" />
<wpConnSample:ConsumerWebPart ID="consumer1" runat="server"
Title="Message Consumer" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Run the application
Try to enter some value in text box . Nothing get displayed in Consumer WebPart because there is no connection between WebParts.
Now we will add static connection between these two webparts
<asp:WebPartManager ID="WebPartManager1" runat="server" >
<StaticConnections>
<asp:WebPartConnection ID="conn1"
ConsumerConnectionPointID="MyWebPartConsumer"
ConsumerID="consumer1"
ProviderConnectionPointID="MyWebPartProvider"
ProviderID="provider1" />
</StaticConnections>
</asp:WebPartManager> |
consumer1 is ID corresponds to ConsumerWebPart
provider1 is ID corresponds to ProviderWebpart
MyWebPartProvider is provider connection point ( we have set this ID in our provider webpart)
MyWebPartConsumer is consumer connection point ( we have set this ID in our consumer webpart)
Run the application
enter some value " Hi Consumer " in text box
So try entering more value. You will see that it is getting displayed in consumer webpart. So we are able to set up static connection between our webpart
Dynamic Connection
Define an interface specifying the methods and properties that are shared between the connected Web Parts.
Add the ConnectionProvider attribute to the Web Part used to provide the shared information.
Add the ConnectionConsumer attribute to the Web Part used to consume the shared information.
Add
ConnectionZone to the page
Lets start with this
1. Create a page named "DynamicConnectionPage.aspx" into the web application created above.
2. Add WebPartManager control from the Toolbox onto the default page
3. Insert a 1-by-1 table onto the form (Layout->Table) and drag and drop a WebPartZone control from the Toolbox (under the WebParts tab) .
4. Register the ConnectionWebPartSample in page
<%@ Register Assembly="ConnectionWebPartSample" Namespace="ConnectionWebPartSample" TagPrefix="wpConnSample" %>
5. Add Both ProviderWebPart and ConsumerWebPart into the page
6. Add one ConnectionZone to page
7 Add a dropdownlist control to our website and add items for Browse and Connection mode and selection change event of list.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicConnPage.aspx.cs" Inherits="DynamicConnPage" %>
<%@ Register Assembly="ConnectionWebPartSample" TagPrefix="wpConnSample" Namespace="ConnectionWebPartSample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" AutoPostBack="True" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Browse</asp:ListItem>
<asp:ListItem>Connection</asp:ListItem>
</asp:DropDownList>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<table style="width: 186px">
<tr>
<td style="background-color: #99cccc; height: 69px;">
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<wpConnSample:ProviderWebPart ID="provider1" runat="server"
Title="Message Provider" />
<wpConnSample:ConsumerWebPart ID="consumer1" runat="server"
Title="Message Consumer" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
</div>
<asp:ConnectionsZone ID="ConnectionsZone1" runat="server">
</asp:ConnectionsZone>
</form>
</body>
</html>
|
Default.aspx.cs
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
switch (DropDownList1.SelectedValue)
{
case "Browse":
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
break;
case "Connection":
WebPartManager1.DisplayMode = WebPartManager.ConnectionDisplayMode;
break;
default:
break;
}
}
|
Run the application
Select connection from the drop down
Select Connect from dropdown icon on Message provider.
You will get following screen. Now select "Create a connection to a consumer ".
You will get following screen.
Select "Message Consumer " from the drop down in the following screen and click connect button
You will see following screen . Click close button and go back to "Browse" mode from dropdown.
So we have set the dynamic connection between two webparts. Now enter some text "Hi Consumer". Same result as in case of static connection.