ASP.NET 2.0 WebPart Communication

Posted on 6/30/2006 @ 8:37 PM in #Vanilla .NET by | Feedback | 14070 views

ASP.NET 2.0 WebPart Communication: The Preface to Sharepoint 2007 WebPart communication

This blogpost talks about two ASP.NET webparts communication with each other. I will use this as a build-up to demonstrate communication between Sharepoint 2007 Webparts.

So lets get started !! :)

ASP.NET 2.0 WebPart communication requires you to do four things

a) What information needs to be communicated: This information needs to be described by an interface. This is what the two parties involved in the communication - Provider & Consumer, both will need to understand. Lets call this implemented interface IContract for now, since this is indeed a communication contract.
b) A Provider WebPart: This WebPart has the responsibility of providing the "UI" that lets you edit information described in the interface, or communication contract above. This WebPart, implements the interface described in step #a). In addition to implementing the interface themselves, the Provider Webpart's also need a method that returns the IContract interface, and is decorated with the ConnectionProvider interface.
c) One or more Consumer WebParts: Consumer Webpart's need a method decorated with the ConnectionConsumer attribute. This method needs to accept one parameter of the IContract data type.
d) Connect these Consumers and Providers: Thats it. With everything written, and assuming you've registered these in your WebPart framework catalog, you next would need to connect these consumers and providers. This can be a static connection declared declartively (!) in the aspx itself, or it can be done using the ConnectionsZone.

Whoaa, so lets get started.

What information needs to be communicated

public interface ITextContract
{
string TheContent {get;set;}
}

A Provider Webpart:


public class TheProvider: WebPart, ITextContract
{
    private string theContent = "Some Sample Text";
    public string TheContent
    {
        get { return theContent; }
        set { theContent = value; }
    }

    [ConnectionProvider("The Content")]
    public ITextContract GetTextCommunicationPoint()
    {
        return this as ITextContract;
    }

    protected override void Render(HtmlTextWriter writer)
    {
        writer.Write(theContent) ;
        base.Render(writer);
    }
}

public class TheConsumer : WebPart
{
    private TextBox contentTextLabel ;
    private Button btnUpdate ;
    private ITextContract theProvider ;
 
    protected override void CreateChildControls()
    {
        contentTextLabel = new TextBox();
        btnUpdate = new Button() ;
        btnUpdate.Text = "Update Text" ;
        this.Controls.Add(contentTextLabel) ;
        this.Controls.Add(btnUpdate) ;
    }

    [ConnectionConsumer("TheContent Consumer")]
    public void InitializeProvider(ITextContract provider)
    {
        theProvider  = provider ;
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        if (theProvider != null)
        {
            theProvider.TheContent = contentTextLabel.Text ;
        }
    }
}

Okay, this implementation needs a little more explanation. Basically, there is a method called "InitializeProvider", this name is arbitrary. But it does need to accept a parameter - which is of type ITextContract. Once you have that, then in the PreRender, you can set the necessary values and take the appropriate actions. 

Establish Communication:

Next, I went ahead and registered these two in my catalog, and added these two WebParts to my webpart framework. Once the WebParts were added, I set the page in "Connections" DisplayMode using the WebPartManager. Suddenly, both the Consumer/Provider Webparts now show me a "connect" verb as shown below -



GGo ahead and click "Connect", and assuming that you have a ConnectionsZone already dropped on your ASPX, you should see something similar to the below --

(Obviously, your ConnectionsZone maybe formatted differently - the above is from a particular skin of my upcoming SpareJoint framework that lets you setup WebSites - any website - with easy point & click).

Go ahead and click on "Create a connection ...", and you will be shown a simple UI as below. It simply asks you - What provider should this consumer get it's content from? Image shown below.

Go ahead and click on Connect.

THATS IT !! Get out of "Edit" mode or "Connect" mode, and start using the page. Now type in some code in the textbox on one WebPart, and click on Update text - BINGO - all the connected WebParts now show the updated text. VOILLA !! Image below -

And don't forget -

a) These WebPart's can be in different WebPartZones - dun' make any difference :)
b) You can also eliminate postbacks by wrapping the WebPartZone inside the telerik AjaxPanel or atlas UpdatePanel - yes it's really that easy.

COOL !! So that's how Webparts in plain vanilla ASP.NET 2.0 communicate. Sharepoint 2007 WebPart's communicate a bit differently though. In a subsequent blogpost, I will talk about, how Sharepoint 2007 Webparts talk with each other.

 

Sound off but keep it civil:

Older comments..


On 10/18/2006 4:38:37 PM Daniel Israel said ..
This is good... but how about client side communication? Has that changed from Sharepoint 2003?

Thanks.


On 1/8/2008 12:23:32 AM Saidi said ..
how to do the webpart communication without postback by using updatepanels?

could you please clarify on the below statement:-


a) These WebPart's can be in different WebPartZones - dun' make any difference :)


b) You can also eliminate postbacks by wrapping the WebPartZone inside the telerik AjaxPanel or atlas UpdatePanel - yes it's really that easy.

how to place webpart zone inside updatepanel?


I tried to modify using sharepoint designer by adding asp updatepanel control tag and I tried to place webpartzone inside the updatepanel tag, but failed.


Could you help me plz............


On 3/31/2008 2:03:59 AM Jayasheela said ..
How can we communicate between two web parts by giving links?


On 8/21/2008 1:26:26 PM Dipesh said ..
I did that code but i am getting error. i defined interface and i coded whatever u said. but i got error that interface is less accessible than the method InitializaProvider method and GetTextComminicationPoint..I dont know what to do.Pls help me,..


On 8/30/2008 12:25:09 AM Rekha said ..
how to do the webpart communication without postback by using updatepanels in this example?


Could you help me plz...


On 10/20/2008 7:33:47 AM mossbuddy said ..
Hey,


Can you please explain how do we add the UPDATEPANEL to the page layout or master page? and how do we add the webpart zone inside the UPDATEPANEL.


Request you to please reply, as we are stuck.

thanks


On 7/8/2010 3:43:42 PM whizsid said ..