blog

Making a User Control module for DotNetNuke

I had to take a small break from JavaScript and Node.js in the past few days and work with ASP.NET: our client module in the front-end needed some information from the server, but there was no way we could retrieve it from the DOM, so I had to develop a small User Control module for DotNetNuke (an ASP.NET framework) that passes this information to our module in the frontend. A User Control module is a module that can be embedded in the skin of the website, so it can be called for every page.

This is how it works: in the backend, we get the information, put it in a stringified JSON, and include it in the DOM of the webpage. For instance(I had to use square brackets instead of angle brackets because WordPress was breaking my page - again, use your imagination):

// View.ascx
<%=getServerInfo(); %>
// View.ascx.cs
String getServerInfo() {
    return "[script]window.info = 1;[/script]";
}

With this, the window instance will have an "info" object, which can be accessed by the JavaScript in the frontend:

<html>
<head>
    < script>window.info = 1;</script>
    < script>alert(window.info);</script>
</head>
<body>...</body>
</html>

This is very simple, but my C# skills were a bit rusty, and I've never worked with DotNetNuke before. These are the files (with pseudocode, of course) that I had to create in order to get a module running:

//View.ascx
<%@ Control Language="C#" CodeBehind="View.ascx.cs" Inherits="MyClass.Controller" %>
[asp:Literal ID="placeholder" runat="server"][/asp:Literal]

The file above is responsible for creating the View of the module, as well as linking it to its "codebehind" (the logic behind the view), specifying which classes it implements, and making a placeholder for our JSON to be inserted.

// View.ascx.cs
using ...;

namespace MyClass
{
    public partial class Controller : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            placeholder.Text = "";
        }
    }
}

The file above is the "codebehind" of the module - as soon as the page loads, it will replace our placeholder.

// View.ascx
<dotnetnuketype="Package">
  <packages>
    <package name="View" type="SkinObject">
      <friendlyName>My Module</friendlyName>
      <components>
        <component type="SkinObject">
          <moduleControl>
            <controlKey>Bridge</controlKey>
            <controlSrc>/DesktopModules/MyClass/View.ascx</controlSrc>
          </moduleControl>
        </component>
        <component type="Assembly">
          <assemblies>
            <assembly>
              <path>bin</path>
              <name>View.dll</name>
            </assembly>
          </assemblies>
        </component>
        <component type="File">
          <files>
            <basePath>DesktopModules\MyClass</basePath>
            <file>
              <name>View.ascx</name>
            </file>
          </files>
        </component>
      </components>
    </package>
  </packages>
</dotnetnuke>

The file above is responsible for defining the module: it tells DotNetNuke what it is.

// View.ascx
<%@ Register TagPrefix="dnn" TagName="MYCLASS" Src="~/DesktopModules/MyClass/View.ascx" %>
<dnn:MYCLASS ID="dnnMyClass" runat="server" />
The snippet above is inserted in the skin of the portal, so it can be called in all pages.

After the module is compiled into a DLL, it can be used by the website.