Philip Beadle's Blog

When building DotNetNuke modules that use a Silverlight 2 interface there are a few things you need to be aware of:

• How are you going to debug you project
• How are you going to access your data
• How to present your data in the UI.

This post deals with setting up your solution so you can easily debug your Silverlight control.

Debugging

When you open VS2008 with the Silverlight tools installed and create a new Silverlight project the debugging experience is excellent.  You hit F5 and away you go.  However this technique relies on you using the default aspx page which is no good when you are building a DotNetNuke module or for that matter a SharePoint Web part – this technique works just as well for SharePoint as for DotNetNuke.    The reason for this is that you will need to have the Silverlight control hosted inside the DotNetNuke module on the host site not in the default site so that you can easily access all of your resources and data via web services or WCF.  So what to do?  
Use the cool MSBuild tasks from the MSBuild Community Tasks Project http://msbuildtasks.tigris.org/ to let you copy over the files you need into the target site each time you build your solution. 

Once the files are copied over you simply access the page as normal and attach to the process.  I use the same process for all of my normal DotNetNuke modules as it allows me to keep my development code separate from my production sites.  So lets see how its done.

First up lets get the Module side of things sorted out.

1. Create a new DotNetNuke compiled module using the template in the starter kit, do not add it to the DesktopModules folder of your site, put it somewhere else
2. Right click the project and unload it
3. Right click the project and Edit it so you can change the proj file easily
4. Paste in this line to use the MSBuild tasks
   
    <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v9.0\WebApplications\Microsoft.WebApplication.targets" Condition="" />
    
5. Paste in the following code inside the Afterbuild Target (change the physical path to your own)
   
    <Target Name="AfterBuild" DependsOnTargets="DeployModule">
    Target>
    <PropertyGroup>
       <ModuleFolder>DNN_TechEdModuleFolder>
       <DNNDirectory>C:\Sandboxes\TechEd\DotNetNuke\DotNetNuke_05.00.00_Install_BETA7DNNDirectory>
    PropertyGroup>
    <Target Name="DeployModule">
       <CreateItem Include="$(MSBuildProjectDirectory)\$(OutputPath)\*.dll">
         <Output TaskParameter="Include" ItemName="ModuleAssemblies" />
       CreateItem>
       <CreateItem Include="$(MSBuildProjectDirectory)\$(OutputPath)\*.pdb">
         <Output TaskParameter="Include" ItemName="ModuleDebug" />
       CreateItem>
       <Copy SourceFiles="@(Content)" DestinationFiles="@(Content -> '$(DNNDirectory)\DesktopModules\$(ModuleFolder)\%(Identity)')" SkipUnchangedFiles="true" />
       <Copy SourceFiles="@(ModuleAssemblies);@(ModuleDebug)" DestinationFolder="$(DNNDirectory)\bin" />
    Target>
    
6. Reload the project and build it to make sure its all working correctly and copying your files into the correct folders on your DotNetNuke site.
7. Now register your module using the dnn file in your site (see Lorraine's Help if you dont know how to do this 
8. Delete the standard List and associated code in the ViewModule.ascx and ViewModule.ascx.vb files
9. Rebuild and add the module to a page.

Ok so now we have a "host" for the Silverlight control lets add the Silverlight project to our solution and get then to the module.

1. Add a new Silverlight project to the solution
2. Unload it and Edit the proj file as before
3. Paste in this line to use the MSBuild tasks
   
    <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v9.0\WebApplications\Microsoft.WebApplication.targets" Condition="" />
4. Paste in the following code which will copy the dll, pdb and xap files to the ClientBin folder of your target DotNetNuke site
   
    <Target Name="AfterBuild" DependsOnTargets="DeployModule">
    Target>
    <PropertyGroup>
       <DNNDirectory>C:\Sandboxes\TechEd\DotNetNuke\DotNetNuke_05.00.00_Install_BETA7DNNDirectory>
    PropertyGroup>
    <Target Name="DeployModule">
       <CreateItem Include="$(MSBuildProjectDirectory)\$(OutputPath)\*.xap">
         <Output TaskParameter="Include"ItemName="ModuleXap" />
       CreateItem>
       <CreateItem Include="$(MSBuildProjectDirectory)\$(OutputPath)\*.dll">
         <Output TaskParameter="Include" ItemName="ModuleAssemblies" />
       CreateItem>
       <CreateItem Include="$(MSBuildProjectDirectory)\$(OutputPath)\*.pdb">
         <Output TaskParameter="Include" ItemName="ModuleDebug" />
       CreateItem>
       <Copy SourceFiles="@(ModuleAssemblies);@(ModuleDebug);@(ModuleXap)" DestinationFolder="$(DNNDirectory)\ClientBin" />
    Target>
5. Reload the project and rebuild.
6. Check your target ClientBin folder for the *.dll, *.pdb and *.xap files

Ok now we need to host the Silverlight control in the DotNetNuke module.

1. Add a place holder control to the View control
2. Open the vb file for the View control and in the Page_Load event paste this - Notice that you need to register the ScriptManager for Silverlight to work properly
   
               DotNetNuke.Framework.AJAX.RegisterScriptManager()
               Dim silverlightControl As New System.Web.UI.SilverlightControls.Silverlight
               silverlightControl.ID = "TechEd2008"
               silverlightControl.MinimumVersion = "2.0.30523"
               silverlightControl.Source = "~/ClientBin/SL_TechEd.xap"
               silverlightControl.Width = 850
               silverlightControl.Height = 850
               Dim initParams As String = String.Format("ModuleId={0},IsEditable={1},UserId={2}", ModuleId.ToString, IsEditable, UserId)
               silverlightControl.InitParameters = initParams
               phSilverlight.Controls.Add(silverlightControl)
    
3. Now build the project and open IE to the page you added the module and see that there is now a Silverlight control hosted on the page.
4. Go back to VS2008 and attach the debugger to the Silverlight control by selecting Tools --> Attach To Process and finding the iexplore.exe process that has a type of Silverlight
    
5. Now you can debug your Silverlight control inside a DotNetNuke module.