Click here to Skip to main content
Click here to Skip to main content

DotNetNuke Silverlight 3.0 Hello World

, 3 Aug 2009
Rate this:
Please Sign up or sign in to vote.
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

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)
        {
            // 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

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 = "<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

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();
            // 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
    }
}



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.

License

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

Share

About the Author

defwebserver
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
LightSwitchHelpWebsite.com

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

He is the Author of:
Follow on   Twitter

Comments and Discussions

 
QuestionHow to debug Silverlight + DNN issues?H Pinmemberrodneyjoyce30-Jun-10 3:37 
GeneralThanks! PinmemberJohAhl25-Apr-10 22:30 
GeneralQuery Regarding DNN Site Hosting PinmvpAbhijit Jana16-Aug-09 1:07 
GeneralRe: Query Regarding DNN Site Hosting Pinmemberdefwebserver16-Aug-09 2:41 
GeneralExcelent Man PinmvpAbhijit Jana25-Jul-09 11:03 
GeneralRe: Excelent Man Pinmemberdefwebserver25-Jul-09 11:08 
GeneralRe: Excelent Man PinmvpAbhijit Jana25-Jul-09 11:19 
GeneralRe: Excelent Man Pinmemberdefwebserver25-Jul-09 11:47 
Abhijit Jana wrote:
Some times I got Message like "Site is Currently Unavailable
- Please try after sometimes"

 
The only thing I can think of is that Visual Studio will create the "app_offline.htm" file if you have the site open in Visual Studio and are editing it or if you are connecting to the database and the site is running on Microsoft SQL Server Express.
 
Abhijit Jana wrote:
Here is one of my latest article on Remote IIS Debugging

 
Yeah good article. The well done graphics really make a difference.

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 3 Aug 2009
Article Copyright 2009 by defwebserver
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid