Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML

DotNetNuke Silverlight 3.0 Hello World

Rate me:
Please Sign up or sign in to vote.
4.93/5 (6 votes)
3 Aug 2009Ms-PL3 min read 48.8K   242   28   8
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.

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

Image 1

Use Visual Studio to open the DotNetNuke site (File then Open Web Site...)

Image 2

In the Solution Explorer, right-click on the DesktopModules folder and create a new folder named HelloWorld3

Image 3

Right-click on the HelloWorld3 folder and select Add New Item...

Image 4

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:

ASP.NET
<%@ 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:

C#
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)
        {
            // Register Silverlight.js file
            Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "SilverlightJS",
                (this.TemplateSourceDirectory + "/Silverlight.js"));

            // Set the Web Service URL
            string strWebServiceURL = String.Format(@"http://{0}/{1}", this.PortalAlias.HTTPAlias,
                "/DesktopModules/HelloWorld3/WebService.asmx");        
            
            // Set the path to the .xap file
            SilverlightApplication = String.Format("{0}{1}", TemplateSourceDirectory,
                "/ClientBin/HelloWorld3.xap");
            // Pass the Initialization Parameters to the Silverlight Control
            SilverlightInitParams = string.Format("WebServiceURL={0}", strWebServiceURL);
        }
    }
}

Save the page

Image 5

Download this file: Silverlight.js and save it to your local hard drive, and place it in the DesktopModules/HelloWorld3 directory:

Image 6

Right-click on the HelloWorld3 folder and select Add New Item...

Image 7

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 = "<a href="http://adefwebserver.com/">http://ADefWebserver.com/</a>")]
    [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

Image 8

From the Menu, select File, then Add, then New Project...

Image 9

Create a Silverlight Application named "HelloWorld3"

Image 10

In the Add Silverlight Application box, add the project to the existing web site.

Image 11

The project will be added to the Solution Explorer

Image 12

Right-click on the References folder (in the Silverlight project) and select Add Service Reference...

Image 13

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();
            // Set the web service URL global values
            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
    }
}



Image 14

Right-click on the Silverlight project in the Solution Explorer and select Build

Image 15

The HelloWorld3.xap file will build into a directory in the DotNetNuke website called ClientBin

Image 16

In the Solution Explorer, drag the ClicntBin folder so that it is under the DesktopModules/HelloWorld3 directory

Configure the Module

Image 17

In your web browser, log into your DotNetNuke website as the host account. From the Host menu, select Module Definitions

Image 18

At the bottom of the Module Definitions page, select Create New Module

Image 19

Enter HelloWorld3 for the Name and Friendly Name and set 01 00 00 for the Version and click the Next button

Image 20

On the Module Specific Details page click Next

Image 21

On the Owner Details page click Next

Image 22

The module will show up on the Module Definitions page. Click the pencil icon next to the HelloWorld3 entry to edit it

Image 23

Click the Add Definition button

Image 24

Enter HelloWorld3 for the Friendly Name and click the Create Definition button

Image 25

Click the Add Module Control button

Image 26

Enter "Hello World" for the Title, select DesktopModules/HelloWorld3/View.ascx for the Source and click Update

Image 27

Navigate to a page in your DotNetNuke website and place the HelloWorld3 module on the page

Image 28

The module will display.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions

 
QuestionHow to debug Silverlight + DNN issues?H Pin
rodneyjoyce30-Jun-10 3:37
rodneyjoyce30-Jun-10 3:37 
GeneralThanks! Pin
JohAhl25-Apr-10 22:30
JohAhl25-Apr-10 22:30 
GeneralQuery Regarding DNN Site Hosting Pin
Abhijit Jana16-Aug-09 1:07
professionalAbhijit Jana16-Aug-09 1:07 
GeneralRe: Query Regarding DNN Site Hosting Pin
defwebserver16-Aug-09 2:41
defwebserver16-Aug-09 2:41 
GeneralExcelent Man Pin
Abhijit Jana25-Jul-09 11:03
professionalAbhijit Jana25-Jul-09 11:03 
GeneralRe: Excelent Man Pin
defwebserver25-Jul-09 11:08
defwebserver25-Jul-09 11:08 
GeneralRe: Excelent Man Pin
Abhijit Jana25-Jul-09 11:19
professionalAbhijit Jana25-Jul-09 11:19 
GeneralRe: Excelent Man Pin
defwebserver25-Jul-09 11:47
defwebserver25-Jul-09 11:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.