Introduction
You have to begin somewhere. The goal of this tutorial is to walk you through creating a simple Silverlight module in DotNetNuke that authenticates the currently logged in user through a web service.
What you need for this tutorial
Setting things up
You will first need to set up a DotNetNuke development environment. You will want to use this environment to develop your DotNetNuke Silverlight modules. You can later create a module package for installation in another DotNetNuke production web site.
Follow the appropriate link to set up your DotNetNuke development environment:
Note: If you are using IIS you also need to add the MIME Type to your web server.
Create The Application
Use Visual Studio to open the DotNetNuke site (File then Open Web Site...)
In the Solution Explorer, right-click on the DesktopModules folder and create a new folder named HelloWorld3
Right-click on the HelloWorld3 folder and select Add New Item...
Create a Web User Control control named View.ascx. Make sure the box "Place code in a separate file" is checked.
Open the View.ascx page in Source view and replace all the code with the following code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="View.ascx.cs" Inherits="HelloWorld3.View" %>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
<asp:Panel ID="silverlightControlHost" align="center" runat="server"
HorizontalAlign="Left">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
style="height: 50px; width: 500px">
<param name="source" value="<%=SilverlightApplication %>" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="Transparent" />
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<param name="InitParams" value="<%=SilverlightInitParams %>" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object> <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
border: 0px"></iframe>
</asp:Panel>
Open the View.ascx.cs file in source mode and replace all the code with the following code:
using System;
using DotNetNuke.Entities.Modules;
namespace HelloWorld3
{
public partial class View : PortalModuleBase
{
public string SilverlightApplication { get; set; }
public string SilverlightInitParams { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "SilverlightJS",
(this.TemplateSourceDirectory + "/Silverlight.js"));
string strWebServiceURL = String.Format(@"http://{0}/{1}", this.PortalAlias.HTTPAlias,
"/DesktopModules/HelloWorld3/WebService.asmx");
SilverlightApplication = String.Format("{0}{1}", TemplateSourceDirectory,
"/ClientBin/HelloWorld3.xap");
SilverlightInitParams = string.Format("WebServiceURL={0}", strWebServiceURL);
}
}
}
Save the page
Download this file: Silverlight.js and save it to your local hard drive, and place it in the DesktopModules/HelloWorld3 directory:
Right-click on the HelloWorld3 folder and select Add New Item...
Add a Web Service called Webservice.asmx. Make sure the box "Place code in a separate file" is un-checked.
Open the Webservice.asmx file in source view and replace all of the code with the following code:
<%@ WebService Language="C#" Class="HelloWorld3.WebService" %>
using System.Web.Services;
using DotNetNuke.Entities.Users;
namespace HelloWorld3
{
[WebService(Namespace = "http://ADefWebserver.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
#region GetUsername()
[WebMethod]
public string GetUsername()
{
string strUsername = "World!";
// Get the current user
UserInfo objUserInfo = UserController.GetCurrentUserInfo();
// If the user is not -1 they are logged in
if (objUserInfo.UserID > -1)
{
strUsername = objUserInfo.DisplayName;
}
return strUsername;
}
#endregion
}
}
Create the Silverlight Application
From the Menu, select File, then Add, then New Project...
Create a Silverlight Application named "HelloWorld3"
In the Add Silverlight Application box, add the project to the existing web site.
The project will be added to the Solution Explorer
Right-click on the References folder (in the Silverlight project) and select Add Service Reference...
Click the Discover button to locate the web service you created in the earlier step.
Enter HelloWorld for the namespace
Click the OK button
Open the App.xaml.cs file and change the Application_Startup method to the code below:
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new Page(e.InitParams["WebServiceURL"]);
}
Open the Page.xaml file and replace all the code with the code below:
<UserControl x:Class="HelloWorld3.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot">
<TextBlock Canvas.Left="8" Canvas.Top="8" FontSize="26.667" Text="Hello:" TextWrapping="Wrap"/>
<TextBlock Canvas.Left="91" Canvas.Top="8" FontSize="26.667" x:Name="UserName" TextWrapping="Wrap"/>
</Canvas>
</UserControl>
Open the Page.xaml.cs file and replace all the code with the code below:
using System;
using System.Windows.Controls;
using HelloWorld3.HelloWorld;
using System.ServiceModel;
namespace HelloWorld3
{
public partial class Page : UserControl
{
private string WebServiceURL;
public Page(string parmWebServiceURL)
{
InitializeComponent();
WebServiceURL = parmWebServiceURL;
CallWebService();
}
#region CallWebService
private void CallWebService()
{
WebServiceSoapClient objWebServiceSoapClient = new WebServiceSoapClient();
EndpointAddress MyEndpointAddress = new EndpointAddress(WebServiceURL);
objWebServiceSoapClient.Endpoint.Address = MyEndpointAddress;
objWebServiceSoapClient.GetUsernameCompleted +=
new EventHandler<GetUsernameCompletedEventArgs>(objWebServiceSoapClient_GetUsernameCompleted);
objWebServiceSoapClient.GetUsernameAsync();
}
void objWebServiceSoapClient_GetUsernameCompleted(object sender, GetUsernameCompletedEventArgs e)
{
UserName.Text = e.Result;
}
#endregion
}
}
Right-click on the Silverlight project in the Solution Explorer and select Build
The HelloWorld3.xap file will build into a directory in the DotNetNuke website called ClientBin
In the Solution Explorer, drag the ClicntBin folder so that it is under the DesktopModules/HelloWorld3 directory
Configure the Module
In your web browser, log into your DotNetNuke website as the host account. From the Host menu, select Module Definitions
At the bottom of the Module Definitions page, select Create New Module
Enter HelloWorld3 for the Name and Friendly Name and set 01 00 00 for the Version and click the Next button
On the Module Specific Details page click Next
On the Owner Details page click Next
The module will show up on the Module Definitions page. Click the pencil icon next to the HelloWorld3 entry to edit it
Click the Add Definition button
Enter HelloWorld3 for the Friendly Name and click the Create Definition button
Click the Add Module Control button
Enter "Hello World" for the Title, select DesktopModules/HelloWorld3/View.ascx for the Source and click Update
Navigate to a page in your DotNetNuke website and place the HelloWorld3 module on the page
The module will display.
