Integrating Silverlight 2.0 with Sharepoint MOSS2007

Silverlight is a revolutionary technology and its much in demand these days,Sharepoint is an old player but very extensive and offer a lot of features which make it alluring for medium to large enterprise. Sharepoint already provide a lot of out-of the box features but as silverlight is catching up every now and then you will have a requirement from the client to integrate silverlight with sharepoint. So in this article i will tell you how to integrate silverlight with sharepoint.Although there can be various ways of doing so i m following the webparts approach as it seems simple to me there are other simple approaches in which we can add a contentweb part in which we can give the source of the iframe as an hosted xap on silverlight live streaming server’s but being a developer this approach seems to me a little creepy and also there are very few resources which clearly tell how to integrate silverlight 2.0 into Sharepoint or MOSS2007.

1. Create a silverlight 2.0 application and copy the xap and project .dll file in a separate folder.
2. Configure MIME Types on the sharepoint server to accept .xap,.xaml,.xbap file extensions.
3. Change the web.config of the application or website where you want silverlight to be integrated.
4. On the sharepoint server create a WebPart project.
5. Copy the resources i.e xap and the project dll file in the directory specified in the web part project silverlightcontrol source
6. Deploy the webpart project to the required site where you want silverlight to show up.
7. Edit the page where you want to add the silverlight control and click add webpart and you are done.

1. Create Silverlight 2.0 application
   • Create a silverlight 2.0 application and build that solution and copy and past its xap file and the project dll file into another folder whose content we will copy later into the wwwroot and website name of the sharepoint site where we want to deploy this silverlight application.
2. Configure MIME types in IIS on the sharepoint server
   • If you don’t have mime types configured on your iis server on the machine where you have your sharepoint installed, then first step is to configure the mime types on the IIS.
   • For IIS 6 you can either right click on whole of the website section or on specific website where you want the mime types to be configured.After right clicking go to the http header section from there select the mime types.

• After selecting mime types click on new if the silverlight mime types are not present.

• Add all the three mime types shown in the above figure and then click ok.Now your IIS is configured to accept and render xaml, xap and xbap

3.Change the web.config file of the sharepoint website for which you want to integrate silverlight.

• This is very important step because if you leave this step in between even if you do all other things correctly then also nothing will get rendered in the final webpart when you deploy the webpart and include it on your page.
• So we have to follow a little hacky approach in order to get the configuration file correct.
• So first step is open your visual studio and create a new asp.net 2.0 application

• We are creating asp.net 2.0 application because sharepoint is using mostly asp.net 2.0 references and it’s not having any web.config enteries related to silverlight and ajax features of the 3.5 framework.
• It is recommended to make a copy of the web.config so that if any error occurs you can restore the original version.
• Now we should open the web.config of the sharepoint website in the same solution.web.config of the sharepoint website can be found at “c:inetpubwwwrootwssVirtualDirecotriesyourwebsitenameweb.config”
• Open this web.config and copy and paste the content in the original asp.net 2.0 web application web.config.
• Now right click on the web project and click properties and change the target framework to .net framework 3.5 and then save the web.config file for the sharepoint website.

• Now you have to add the following two entries in your web.config, first one is in the <system.web><compilation><assemblies> section add the below line

<add assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

• Next entry to be added is in the <system.web><pages><controls> section just add the line as given below

<add tagPrefix="asp" namespace="System.Web.UI.SilverlightControls" assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

• After adding these two entries just save the web.config file and you are done with the web.config changes.

4.Create a webpart project on the sharepoint server

• For creating a web part project in Visual Studio 2008 you need to install  “Windows SharePoint Services 3.0 Tools: Visual Studio 2008 Extensions, Version 1.2” which can be downloaded from here
• After installing WSS3.0 tools Visual studio extensions you will have a new Sharepoint project type in C# section,from there choose webpart project and give your project some name.

• Delete the default webpart folder which will be created and click on the add new item and then select webpart from the list.

• Add two references to this project one is System.Web.Extensions and the other one is System.Web.Silverlight

• In the yourwebpartname.cs file make changes so that it should look similar in code as given below

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.SilverlightControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace TangramWP
{
    [Guid("6b31932f-7245-4d78-912c-56033008e775")]
    public class TangramSilverlightWP : System.Web.UI.WebControls.WebParts.WebPart
    {
        private Silverlight silverlightControl = null;
        public TangramSilverlightWP()
        {
        }
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
            if(scriptManager==null)
            {
                scriptManager = new ScriptManager();
                this.Controls.AddAt(0,scriptManager);
            }
        }
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            silverlightControl = new Silverlight();
            silverlightControl.ID = "TangramSilverlight";
            silverlightControl.Source = "/Bin/Tangram.xap";
            silverlightControl.Width = new Unit(500);
            silverlightControl.Height = new Unit(400);
            Controls.Add(silverlightControl);
        }
    }
}

5.Copy resources such as xap and the project dll inside the specified location inside the sharepoint website.

• Now in the bin directory of your sharepoint website just copy your .xap file and the silverlight application which is in my case Tangram.dll.

6.Deploy the web part solution created

• Right click on the solution and click properties in the debug section just change the “Start Browser with url” with the location of your sharepoint website.

• Right click on the webpart solution which you have created and just click deploy to deploy the solution to the sharepoint website.

• After successful deployment click on the edit page section in the site actions of your website and select the web part which you just deployed its generally in the miscellaneous section.

If all goes well and you have followed each step you will see the silverlight application rendered in your webpart.

Happy Programming!!!!!!!!!!!!!!!!!!!!