How To: Integrating Silverlight User Control with SharePoint WebPart (MOSS 2007)

Silverlight with MOSS 2007

Developing a webpart may be very simple. Likewise, Developing a Silverlight application also will be very simple. But, If you are going to integrate both areas, that will be difficult little. Here, I am going to tell you that what are necessary steps that needs to be followed, while integrating the MOSS & SILVERLIGHT.

OK. See the steps below. (I assumes that you are familier with creating SharePoint webpart & creating sivlerlight Web applications.)

1. Whenever you are creating Silverlight applications, you can see a "Silverlight.js" file in your "Web" folder. For example, if your application name is "HelloWorld", your visual studio will create another folder with the name of "HelloWorld_web" or "HelloWorldWeb". Within this folder, you can see a file "SilverLight.js". Copy this file and paste it into "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033". (Note: you should paste that file, only into this folder. Else, you will get an error".

2.  Create an Silverlight application and generate a XAP file.

3. Go to "c:\Inetpub\wwwroot\wss\VirtualDirectories\7070" and create a folder named "ClientBin" and give permission to Read & Write (for everyone). 

4. Go to IIS 

5. Go to Your SharePoint portal and make the "ClientBin" folder as a Virtual Directory.

6. Copy the Silverlight Application DLL & XAP file into this ClientBin folder.

7. Modify the Web.Config file to integrate the Silverlight. You can download a sample web.config file in the "download" section of http://www.codeplex.com/SL4SP

8. Create a Webpart. You can use WSPBuilder to create a Webpart. You can download a WSPBuilder from http://www.codeplex.com/wspbuilder

9. Add 2 references in WSP Project (System.Web.Extensions & System.Web.Silverlight)

10. In the WebpartCode, you must inherit the below 2 namespaces.

a. using System.Web.UI.SilverlightControls;

b. using System.Web.UI.WebControls;

11. Write a code to call the XAP file within the "CreateChildControls" method like. 

Silverlight sl = new Silverlight(); 

sl.ID = "MYSL"; 

sl.Source = "/ClientBin/SenSLMOSS.xap"; 

sl.Height = Unit.Pixel(420); 

sl.Width = Unit.Pixel(420); 

this.Controls.Add(sl);

12. "ScriptManager" code also should be placed inside the WebPart code. See the sample code below and this code should be inside the "OnLoad" method, like,

  protected override void OnLoad(EventArgs e) 

{

 if (!_error) 

{ 

try

 { 

base.OnLoad(e); 

ScriptManager sm = ScriptManager.GetCurrent(this.Page); 

if (sm == null) 

{ 

sm = new ScriptManager(); 

Controls.AddAt(0, sm); 

} 

this.EnsureChildControls(); 

}

 catch (Exception ex) 

{ 

HandleException(ex); 

} 

} 

}

13.  Add & Deploy the WSP Webpart using stsadm command. 

(stsam -o addsolution -filename "C:\SLMOSSWebPart.wsp")

14. Create a "WebPart page and insert this webpart into that newly created page.

15. You will see an amazing SilverLight Page.

Thats  it...