SharePoint 2010 : Sharing data between Visual Web Parts

Web Parts are essential parts of SharePoint 2010 that helps developers and site owners to customize the SharePoint portal. There are lots of out of the box web parts available in SharePoint 2010. When you are building business portals definitely you will be in need to create your own web parts corresponding to your business requirements. SharePoint 2010 supports Visual web parts. Visual web parts allow developers to easily design the user interface as they are doing in conventional ASP.Net applications.

I have published an article that describes how to build Visual web part for SharePoint 2010. You can read that article from this link.

http://weblogs.asp.net/sreejukg/archive/2011/03/26/create-a-visual-web-part-using-visual-studio-2010.aspx

Sometimes developers might need to shared data between web parts. In this article I am going to demonstrate how you can share data between two Visual web parts.

For the purpose of article, I am going to create two web parts one will ask user to select the gender and the other web part will display the selected gender. This scenario looks so simple, but for the purpose of demonstrating how to share data between Visual web parts, I believe the scenario is ok.

For the purpose of this Article, I am going to create two Visual web parts as follows.

  1. GenderProvider web part – This web part will allow users to select the gender using a radiobuttonlist. This web part will provide gender data to other web parts.
  2. GenderConsumerWebpart – This web part will display what the user has selected in the first web part.

The following are the steps for building such an application.

  1. Create an Empty SharePoint 2010 project
  2. Create an Interface that represents the data to be shared
  3. Create a provider web part that implement the Interface
  4. Create a consumer web part that consumes the string
  5. Include these web parts in a page and define the connections

Create the SharePoint 2010 project

Open Visual Studio 2010, select File -> New -> Project, from the template selection Dialog, Select empty SharePoint project and give a name for the project. I just named the project as ShareData

clip_image002

Click OK once you are there. In the next step make sure you choose to deploy as farm solution.

Create Interface

Now you need to add an Interface that defines the data to share. Right click the project, select Add -> New Item, from the Template selection dialog, Select, Code -> Interface, name the Interface as IGender

Create a string variable named gender in the interface. The code for the interface is as follows.

clip_image003

Create data provider web part

Now you need to create a web part that allows user to select a gender. This web part should have the capability to provide the selected gender information to other web parts.

I am going to create a web part named “GenderProvider” .

From the solution explorer right click the project, select Add -> New Item, Select Visual Web Part as the template, enter the name as GenderProvider. Click on Add button once you are done.

clip_image005

Now Visual Studio 2010 will create the necessary files for Visual web part. The visual web part mainly consists of two components, a class file for web part and a user control file where you define your controls.

From solution explorer, Expand the GenderProvider, you will see GenderProvider.cs. Open the code file and you can see your web part class definition starts as follows

clip_image006

Here you need just to implement the interface IGender, once implemented; the class definition will be as follows.

clip_image007

Now in the web part class, you need to implement the gender property which is a string as you defined in the Interface. Actually the webpart will load the user control to its control collection in the CreateChildControls. By default a Visual Webpart will have the following code in the CreateChildControls() method.

clip_image008

The code is self-explanatory. It is loading the ascx file using the LoadControl method and add it to the control collection. The member variable “gender” defined in the web part class needs to be accessed from the ascx page. To achieve this, you need to do the below 3 tasks

· Create a UserControl variable in the web part class and in the CreateChildControls method assign its value to the loaded user control

· In the UserControl class, create a public variable of type web part class.

· Assign the web part variable of UserControl in the CreateChildControls method.

Once you have done these changes, the code for web part class file and UserControl code are given below.

GenderProvider.cs

clip_image010

GenderProviderUserControl.ascx.cs

clip_image011

In the user control I have placed a radio button list and a button. I just assign the value of gender from the page load method but you can access the value from any event handler, e.g. button click, select index changed etc. depending on your requirements.

Now you are almost done. Now in the GenderProvider.cs class, create a public method that returns the Interface you have created (IGender) and specify the Connection provider attribute. The complete code for the GenderProvider.cs is as follows.

clip_image013

Now you are done with the connection provider.

Create data consumer web part

Now you need connection consumer web part that uses the gender data provided by the above web part. Add a new Visual web part GenderConsumer that can consume the data from the connection provider. You need to perform the below actions

  1. In the consumer web part (GenderConsumer.cs), create an object for Interface “IGender”. The purpose of this variable is to receive/consume data from the other web part.
  2. The object needs to be accessed from the UserControl, so you can create a web part variable in user control and a user control variable in the web part code and inside CreateChildControls method, assign the web part variable (These steps are similar to what we have performed for ConnectionProvider webpart)
  3. It is recommended to access the data from the onprerender method of the web part. So override the prerender event handler and call some method in UserControl to update the user interface.

In the user control, I have placed a Label with ID lblMessage and create a public function Show Message for updating the Label value. Refer the code for both web part class and user control class as follows.

See the code for GenderConsumer.cs

clip_image015

Code for GenderConsumerUserControl.cs

clip_image016

Configure web parts in the page

You have created both provider and consumer web parts. In a SharePoint page add both the web parts and configure the connections between them. See the screenshot of both web parts added to the page.

 clip_image017

From the top right corner of the Web part, select “Edit web part”. When you are in edit mode, click on the down arrow in the top right corner, you will see the connections link.

clip_image018

Click on connections will give you options to provide the data to consumer web part. Make sure the checkbox of the consumer web part is selected. Now when you configure this, SP will make the necessary settings for consumer.

clip_image019

Now you have done everything. Save and browse the page. See the output of the page, GenderConsumer webpart shows the selected value from the radiobuttonlist from the GenderProvider webpart.

clip_image020

It is easy to share data between web parts. In real life developers can build complex web parts that share data each other.

Published Friday, February 17, 2012 10:44 PM by sreejukg

Comments

# re: SharePoint 2010 : Sharing data between Visual Web Parts

Friday, February 17, 2012 4:35 PM by Youssef

thanks for this tutorial, i'm a beginner, unfortunately i couldn't follow it step by step, the problem is i have VS 2010 and i can't start a share point project. it tells me :

"A SharePoint server is not installed on this computer. A SharePoint server must be installed to work with SharePoint projects."

do i have to have a Share point server ? is there any (free) alternative for development and learning ?

how can i overcome this issue ? thank you very much

# re: SharePoint 2010 : Sharing data between Visual Web Parts

Friday, February 17, 2012 4:35 PM by Youssef

thanks for this tutorial, i'm a beginner, unfortunately i couldn't follow it step by step, the problem is i have VS 2010 and i can't start a share point project. it tells me :

"A SharePoint server is not installed on this computer. A SharePoint server must be installed to work with SharePoint projects."

do i have to have a Share point server ? is there any (free) alternative for development and learning ?

how can i overcome this issue ? thank you very much

# re: SharePoint 2010 : Sharing data between Visual Web Parts

Sunday, February 19, 2012 12:36 AM by sreejukg

@Youssef, To develop for SharePoint 2010, you need to have a development server that installed with SharePoint 2010 and Visual Studio.

# re: SharePoint 2010 : Sharing data between Visual Web Parts

Wednesday, February 22, 2012 2:10 PM by Ujjwal Umang

Hi , Can you let me know if it is possible to share data between a Sharepoint Web Part and an Asp.Net Web Part. I have a Sharepoint Web Part containing some readonly informations and i need to create a Asp.Net Web Part that will reside on a Web page of a web Application and will display same data as being Displayed in my sharepoint Web Part. It also need to be Updated when the sahrepoint web part data is updated. Any help on this would be highly appreciated.

Thanks in Advance

# re: SharePoint 2010 : Sharing data between Visual Web Parts

Saturday, June 2, 2012 4:36 PM by Pina

Hello there! Good post! Please inform us when I will

see a follow up!