Creating and Deploying the Web Part

To create the Web Part, open Visual Studio and open a new SharePoint Web Part project template (see Figure 6). In our example, we've named the new Web Part project MediaPlayerWebPart.

Figure 6. Web Part Project Template

After you've added your new Web Part, you'll need to add two references to the project before you can add code. The first reference is the System.Web.Extensions DLL, and the second is the System.Web.Silverlight DLL. To add code to the Web Part, right-click the Web Part code file (for example MediaPlayerWebPart.cs) and click View Code. Figure 7 shows the code that we added to the Web Part project.

There are two key items to call out. The first is the fact that we are using the ScriptManager object to render the Silverlight application. This is because the Silverlight application has a dependency on the AJAX ScriptManager control, so an instance of the ScriptManager object needs to first be added to the project.

The second is the instantiation of the Silverlight control. In the code you see in Figure 7, myMediaCtrl represents the instance of our Silverlight control (effectively the Silverlight media player we created). After you create a new instance of the control, you'll need to set a number of properties. Very important among these properties is the Source property, which points to the location of the XAP file and then loads that within the Web Part.

Figure 7 Media Player Web Part

namespace MediaPlayerWebPart {
[Guid("7e7ef885-130a-45e6-ab14-15f344b1939d")]
public class MediaPlayerWebPart :
System.Web.UI.WebControls.WebParts.WebPart {
public MediaPlayerWebPart() {
}
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
if (scriptManager == null) {
scriptManager = new ScriptManager();
this.Controls.Add(scriptManager);
}
}
protected override void CreateChildControls() {
System.Web.UI.SilverlightControls.Silverlight myMediaCtrl =
new System.Web.UI.SilverlightControls.Silverlight();
myMediaCtrl.ID = "myMediaPlayer";
myMediaCtrl.Source = "/ClientBin/XAP/MediaPlayer.xap";
myMediaCtrl.Width = new System.Web.UI.WebControls.Unit(900);
myMediaCtrl.Height = new System.Web.UI.WebControls.Unit(650);
this.Controls.Add(myMediaCtrl);
}
}
}

With the code added, you are now ready to complete the second step: configuring the Web Part project for deployment. To do this, open the project's the Properties view and click the Debug tab. Check the Start Browser with URL checkbox, and then enter the root URL for your SharePoint site (for example, http://spvm).

To test the deployment of the Web Part, click Build, and then Deploy Solution. This automatically creates a WSP package (the CAB equivalent for SharePoint assembly deployments) that contains all of the files that are required to deploy the Web Part assembly to SharePoint, deploys the solution files to the appropriate places on your SharePoint site, and then stops and restarts the Internet Information Services (IIS) Web application.

If you are trying to deploy on Windows Server 2008 with UAC turned on, you need to run Visual Studio as Administrator or you will get an "Object reference not set to an instance of an object" error. Assuming everything was configured correctly, you'll now be able to add the Web Part to a site within SharePoint, thus the last step in your integration between SharePoint and Silverlight.

Adding the Application to the SharePoint Site

At this point, you've created the Silverlight application and you've created and deployed the Web Part container for the Silverlight application. The last remaining step is to create a site that can host the Web Part. Before you do this, though, there are a couple of items you will want to verify.

The first thing to verify is that you've installed System.Web.Silverlight.dll in the global assembly cache (GAC). If it is not, install it from the installation location \Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server.

The second thing to verify is that the web.config file in your SharePoint root directory has all of the necessary elements to support a Silverlight application and the Silverlight application is marked as a safe control. The following illustrates the safe control entry for the MediaPlayerWebPart in the web.config file (which is automatically added when you build and deploy your project to your SharePoint site):

<SafeControl Assembly="MediaPlayerWebPart,
Version=1.0.0.0,
Culture=neutral,
PublicKeyToken=9f4da00116c38ec5"
Namespace="MediaPlayerWebPart"
TypeName="MediaPlayerWebPart"
Safe="True" />

While we won't talk exhaustively about the web.config file, when you're trying to make sure that the web.config file in the root directory of the SharePoint site supports the Silverlight application, the easiest way to do this is to review the web.config file that is built as a part of the Silverlight project and make sure all of those elements exist in the web.config that resides in the root folder of your SharePoint site. If all of these elements are not present, your Silverlight application will not appear in the SharePoint Web Part.

You are now ready to create the SharePoint site that will host the Silverlight-based Web Part. To do this, navigate to your SharePoint site. We created a separate test site for our Silverlight application called Media Player. To create a site, navigate to the home page of your SharePoint site and click Site Actions | Site Settings. Under Site Administration, click Sites and Workspaces. Within the Sites and Workspaces page, click Create. Provide a name, description, and type of site (we selected Blank site) and URL for your site, and then click Create.

When the new site is created, SharePoint will automatically load it for you. Click Site Actions and Edit Page. In the site, click Add a Web Part, which invokes the Web Part Gallery (see Figure 8). Scroll down until you find the Web Part project you added to SharePoint (for example MediaPlayerWebPart), select the checkbox, and then click Add. This will add the Silverlight media player application into SharePoint by way of the Web Part as a host container. The Silverlight application will respond the same as when you were debugging it within Visual Studio 2008—it just appears as a Web Part within SharePoint. After you've added the Web Part to SharePoint, try out the different controls within the Silverlight application to make sure they all work.

Figure 8. Web Part Gallery

Troubleshooting

After you've added the Web Part to SharePoint, be sure to try out the different controls within the Silverlight application to make sure they all work. As you know, development is not always without some degree of troubleshooting, so we'll offer a couple of things to look out for as you integrate your Silverlight applications with SharePoint.

If you get network errors when loading media, this is often because the deployed assembly cannot find the media. If the media path is relative, it is relative to the XAP location, so make sure the media loads properly in the Silverlight application.

Make sure the XAP Source location is correct within the Web Part file. Many times, we've seen the case where the Web Part loads without any Silverlight application. This is usually because the Web Part cannot find the XAP file. Also, when you update your Silverlight application, make sure to recopy the newest version of the XAP file into the source location that you've specified in the Web Part project.

If you have successfully added the Web Part, but the Silverlight still does not show up, then you should double-check the web.config file that is in your root SharePoint directory and make sure it not only has the Web Part marked as a safe control (as discussed earlier) but also has all of the necessary elements in order to support the Silverlight application.

Further Reading on Web Parts

SharePoint and Silverlight Blueprints

Microsoft Silverlight Site

SharePoint Development Resources

* This article originally appeared in MSDN Magazine.

Steve Fox is a Technical Evangelist with the Developer Platform Evangelism (DPE) team at Microsoft. He spends most of his time evangelizing Office and SharePoint development and working with companies that want to use them in their development efforts. Steve has coauthored a number of books including "Professional Microsoft SharePoint Development Using Silverlight 2". You can check out his blog at blogs.msdn.com/steve_fox.

Paul Stubbs is an Architect in the Platform Architecture Team, where he focuses on solutions architecture with an emphasis on information worker productivity, business-to-customer solutions, and Web 2.0 social networking. He has authored two books on solution development using Microsoft Office, several articles for MSDN Magazine, and has also spoken at Microsoft Tech•Ed and Tech Ready conferences. Read Paul's blog at blogs.msdn.com/pstubbs.