As you may know, last week I released a version (still in beta) of the SmartPart which supports the ASP.NET AJAX extensions. For more information about this version of the SmartPart, see my previous blog post.
This weekend I’ve been working on functionality to support “AJAX connection” in the SmartPart. First of all; connectable web parts are web parts that can exchange data. Think for example about a web part which displays a list of invoices, and another one that displays a list of invoice lines. If you select an invoice in the first one, the second one can display the lines of the selected invoice. So with connectable web parts you can create those typical parent/child and parent/details relationships. You can create connectable web parts in SharePoint 2003 and in ASP.NET 2.0/SharePoint 2007, so it’s not a new functionality.
So why are the connections in the new version of the SmartPart (Return of SmartPart v1.2 BETA) so special? Well if you combine web part connections with a little bit of AJAX-magic you have web parts that can exchange data without postbacks! Think about selecting the invoice and displaying the corresponding invoice lines in another web part, all without postbacks. Actually you could do that trick without this new version, but I’ve added some helper and wrapper classes to make your life as a web part developer a little bit easier!
Let’s start with a really basic example: the DemoProvider and the DemoConsumer user controls. The first one has an UpdatePanel (the ASP.NET AJAX control handling the partial-page rendering), a TextBox and a Button. The second one just has an UpdatePanel and a TextBox. The scenario should be like this: the user enters some text in the first text box, clicks the button and the text is transferred to the second text box, all without postbacks.
public partial class DemoProvider : System.Web.UI.UserControl,
SmartPart.IConnectionProviderControl
{
protected void Page_Load(object sender, EventArgs e)
{ }
public string ProviderMenuLabel
{
get { return “Send test data to” }
}
public object GetProviderData()
{
return new SmartPart.AJAXConnectionData(
TextBox1.Text, Button1, “Click”);
}
}
The code above is the code for the DemoProvider user control, notice that the class implements the IConnectionProviderControl interface of the SmartPart which is also used for normal connections. The special thing happens on the GetProviderData method; a new instance of the AJAXConnectioNData class is created. This object contains first of all the value that should be send to the consumer (TextBox1.Text). The second parameter is the control that will cause the UpdatePanel to refresh, the third parameter is the name of the control’s event which will cause the refresh. (This constructor can only have one control as a trigger control, but the class can hold more than one.) The ProviderMenuLabel property returns the value which will be displayed in the web UI of SharePoint when the connection is made. That’s it! Now let’s take a look at the code for the DemoConsumer user control:
public partial class DemoConsumer : System.Web.UI.UserControl,
SmartPart.IConnectionConsumerControl
{
protected void Page_Load(object sender, EventArgs e)
{ }
public string ConsumerMenuLabel
{
get { return “Receives test data from” }
}
public void SetConsumerData(object data)
{
SmartPart.AJAXConnectionData ajaxData = data as SmartPart.AJAXConnectionData;
if (ajaxData != null)
{
ajaxData.RegisterTriggerControls(UpdatePanel1);
if (ajaxData.Data != null)
TextBox1.Text = ajaxData.Data.ToString();
}
}
}
The class implements the normal IConnectionConsumer control of the SmartPart and once again the special thing happens in the SetConsumerDate method. This method receives the instance of the AJAXConnectionData class which was constructed by the provider. First the code checks if the data received is an AJAXConnectionData instance, if so the RegisterTriggerControls method is called with the UpdatePanel to use as a parameter. This method will add every control of the AJAXConnectionData instance as a trigger control for the UpdatePanel, so the two UpdatePanels of the two user controls can trigger eachother. You could do this manually as well, but I provided this functionality since it will be the same for in like 99% of all the cases. Finally the Data property is used to fill the TextBox’s Text property. Done!
I could show the result with some screenshots, but you have to see them in action to get the idea. That’s why I’ve recorded a small screencast of the two user controls. The second part of the screencast shows some other controls which get data from the AdventureWorks database. I already put them on a site, so you can see the Categories web part connected to the Subcategories web part, which is connected to the Products web part. You can download the source code for these demos from CodePlex.
Downloads:
- Return SmartPart v1.2 BETA
- Demo source files (ConnectionsDemo.zip)
- Screencast of connectable AJAX web parts in action