How to connect two webparts of a webpage in SharePoint 2010
This article will explain you about connection between web parts. Suppose you have two web parts on a webpage and you want to make connection between them. Or you can say that there are two web parts and you want to make one web part depend on other web part. For this you have to do few coding and follow some steps. Learn How to connect two webparts of a webpage in SharePoint 2010?
To make connection between two web parts on a same web page in SharePoint just follow below steps:
1. Create a custom list with name 'Projects'.
2. From List Tools Tab, click List, and Modify the view.
3. Unchecked all the column name options and Select ID and Title only.
4. Add few items in your list.
Now this is time to create a SharePoint empty project.
Create a empty SharePoint project in Visual Studio with name 'ConnectTwoWebParts'.
Once you will click on OK a dialog box will open asking for SharePoint local site url.
Type the SharePoint site url and select deploy as a farm solution.
In this SharePoint Project add new item 'Interface' with name IProject.
Below is the code for your interface IProject.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ConnectTwoWebParts
{
public interface IProject
{
int Id { get; }
string Name { get; }
}
}
Now create your first web part class.
From solution explorer add new item as a 'web Part' and name it 'WebPart1'.
Below is the code for WebPart1.cs
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace ConnectTwoWebParts.ProviderWebPart
{
[ToolboxItemAttribute(false)]
public class WebPart1: WebPart,IProject
{
DropDownList _projectPicker = null;
int IProject.Id
{
get { return int.Parse(_projectPicker.SelectedValue); }
}
string IProject.Name
{
get { return _projectPicker.SelectedItem.ToString(); }
}
protected override void CreateChildControls()
{
//base.CreateChildControls;
try
{
_projectPicker = new DropDownList();
using (SPSite spSite = new SPSite(SPContext.Current.Web.Url))
using (SPWeb spWeb = spSite.OpenWeb())
{
SPList projectsList = spWeb.Lists["Projects"];
foreach (SPListItem project in projectsList.Items)
{
_projectPicker.Items.Add(new ListItem(project.Name, project.ID.ToString()));
}
}
_projectPicker.AutoPostBack = true;
this.Controls.Add(_projectPicker);
}
catch (Exception ex)
{
this.Controls.Clear();
this.Controls.Add(new LiteralControl(ex.Message));
}
}
[ConnectionProvider("Project Name and ID")]
public IProject NameDoesNotMatter()
{
return this;
}
}
}
Create second web Part class.
From solution explorer add new item as a 'web Part' and name it 'WebPart2'.
Below is the code for WebPart2.cs
using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace ConnectTwoWebParts.ConsumerWebPart
{
[ToolboxItemAttribute(false)]
public class ConsumerWebPart : WebPart
{
IProject _provider = null;
Label _lbl = null;
protected override void CreateChildControls()
{
//base.CreateChildControls;
try
{
_lbl = new Label();
if (_provider != null)
{
if (_provider.Id > 0)
{
_lbl.Text = _provider.Name + " was selected.";
}
else
{
_lbl.Text = "Nothing was selected.";
}
}
else
{
_lbl.Text = "No Provider Web Part Connected.";
}
this.Controls.Add(_lbl);
}
catch (Exception ex)
{
this.Controls.Clear();
this.Controls.Add(new LiteralControl(ex.Message));
}
}
[ConnectionConsumer("Project Name and ID")]
public void ThisNameDoesNotMatter(IProject providerInterface)
{
_provider = providerInterface;
}
}
}Its time to deploy the solution to your SharePoint site.
Right Click on 'ConnectTwoWebParts' in solution explorer and select Deploy.
Once deployment is succeed. Open your SharePoint local site in internet explorer.
Create a web part page and name it SampleWebPartPage.
SharePoint will open this page in edit mode.
Click on 'Add a web part' in any zone and from Categories select custom, select web part1 from the list and click on 'Add'
Do the same for webpart2.
Your both webparts has been placed on webpart page.
Now you have to make connection between them.
Move your mouse cursor on any of these two webpart and click on drop down arrow.
Hover your mouse to 'Connections', point to 'Send Project name and id' and then click 'WebPart2'.
Now make changes in WebPart1 and see the effect in WebPart2.
Its done now!