DotNetNuke Modules Layout/Design

Over the past year I have been designing DotNetNuke Modules for UBA Benefits. During that time I have really figured out how to optimize my time for extra development bits and pieces people ask me to include. However, because of the complexity involved with development and lack of documentation I feel that my process and design solution should be pushed up here to my blog for future reference.

Directory Structure:Directory Structure for DNN Project.

Looking at this structure it might seem like a lot, however the majority of it is the boiler plate folders included in the Chris Hammond Templates. The only folders I added are Controllers, Models, and WebService.

Just as one would expect, the controllers folder holds the Business logic such as data validation and SQL execution. The models folder contains the outlines of the data in which I want to retrieve or manipulate in my controllers. Last but not least the WebService folder contains my API Routes file along with another web controller that handles the logic of serving up any requests to the end user, along with validation and authentication.

Together, I am able to create a responsive interface that utilizes data-binding via Knockout.JS and Ajax via jQuery to really help provide the users with an overall great experience. The jQuery helps post and get information from my WebService folder… They talk in JSON to one another. Then my Web Service interacts with my controllers in which decided what data to do and utilize CRUD upon.

This design has been slowly improved over time. Previously I was doing it the way that was suggested via Web Forms. However, those kept causing page refreshes when one would save or get new data from the server. I believe utilizing my own strategy I am able to limit the page refreshes and provide the user with a cleaner and more responsive experience.

If you have any opinions, suggestions, or questions about my strategy, feel free to leave a comment below.

Visual Studio and Javascript

I was chilling at my desk, writing a lot of JavaScript in a single knockout view model(bad practice). When I relized how annoyed I became by not being able to use region’s in my code. Therefore I started searching the web for something to help me out. Finally I came across an extension for VS 2013 called “Advance JavaScript Outlining”.

To actually specify a region you do as follows:

I suggest you try it out. Very helpful extension for those whom do a lot of JavaScript programming in Visual Studio.


Knockout.JS Editable Table Template

JS Fiddle LogoToday, while working with Knockout.JS, I needed to create a good editable table. I was in a crunch for time, and the things I was trying just wern’t behaving the way I expected. Then I came across this jsfiddle repo and this one as well, both of which helped solve my problem by giving me guidance on how to implement the ideas such as inline editing, without causing to much of a learning curve.

Not sure who created the repo, but I am very appreciative of the person who did. Thank you.

Favorite SQL Lite Viewer/Manager/Browser Software

As a developer, I enjoy using SQL Lite for quick databases in which I utilize during testing. However, finding a good database browser/creator/editor can be annoying. Therefore I am making this post really just for me, but hopefully it can help you too. Just click the Octocat.


My favorite open source SQL Lite manager. Heck it is even cross platform! #Awesome

Volume Hot Keys For Your Keyboard (Alt+Arrow Up/Down)

I love listening to my xbox music stream while at work. However I don’t enjoy having to reach for my mouse all the time, just to adjust the volume. Therefore I figured out how to create Volume Hot Keys  that lets me utilize my ALT+ Up and Down Arrow keys in order to control it.

First off you need Auto Hot Key which is free.

Next create a script(*.ahk) and throw it into your startup folder. Make sure you double click it to activate it w/o having to restart.

Ta-Da! You can now use your Alt+ Up/Down arrows to control your volume w/o needing to buy a dedicated media keyboard.

Dot Net Nuke + Onyaktech Forms + Some Custom Script = Multi-Step Form

At work, we are looking to redesign a giant form that is suppose to be “brief” for our users. However, because of how big this form has grown, and since it was in OWS. It needed a lot of fleshing out before hand.

After figuring out which sections would go where, I decided I wanted the form to be set up like an installation wizard. Multiple steps, that are easy to go through and simple to submit upon completion of all the steps.

Unfortunately I didn’t have time to implement everything I wanted. Yet I did get a step by step type of process working with a tad bit of jquery.

Note: Make sure you have the “Allow Source Editor (Allow Javascript)” checkbox ticked under your “Other Options” tab in the “Display Setup” tab.

Adding Quick Links For Each Step:

Say you want the user to be able to swap between the tabs instead of having to press the previous and next buttons continuously. Just add this div above all the other HTML.

To see a live example, head over to JSFiddle.

Git Tips: Deleting A Remote Branch And Changing Branches

Deleting A Remote Branch:

At work I have started using Bonobo Git Server. However, I feel like it doesn’t give me control enough with the GUI to do the simple things I am use to elsewhere(GitHub). Therefore I needed to re-learn how to delete a more branch after I had merged it with master.

To do so, just follow this GitHub issue:

Switching To The Correct Branch With Out Losing My Local Changes:

Next was the issue of my nonsense brain not remembering I was in one branch, when I was changing files. I hadn’t yet committed those changes, but I was close. Therefore I had to follow this blog post’s instructions in order to feel confident enough that the tactic I was about to try wouldn’t completely dismiss all my beloved changes I had made for the feature I was implementing.

Including Knockout In Your Custom Dot Net Nuke Module

One issue I ran into, besides the outdated documentation, was that I couldn’t figure out how to include Knockout.JS in my module. Sure I could just download the .js files and include them directly, however I believe that DNN has to of had a way for me to ensure only one instance of the Javascript Library is loaded(per page).

I found the solution after messing with the endpoints for quite a while:

As you can see, it is really just a one liner. You need to include it within your Page_Load method, which will ensure Knockout.JS is available for that view in your module.You might also have to add a using statement to the top of the .cs page as well:


Manipulating The DOM w/ C# After It Has Loaded ( – RegisterStartupScript)

Last week I ran into a bit of a niche problem, but let me give you some context first. I was working on a simple Dot Net Nuke module that needed to grab information via an API and then populate an Onyaktech form with that data via any means possible.

I utilized the RESTSharp library to do the dirty work of handling the RESTful requests for me. Leaving the task of inserting the received data into the form left to wrestle with.

My initial idea was to use some sort of JavaScript injection on the page. I could of redirected to some sort of url such as:

This sounded good in theory, yet in practice this ended up being:

Which just places the code on the top of the page before the DOM has loaded and is ready. Therefore I was confused on what to do. Luckily for me, C# and give me a method called “RegisterStartupScript“. Using this we can tell the .Net framework to automatically execute the JavaScript string we are about to inject, only after the pages elements load. This gave me the wonderful result in which I required.

My code ended up looking something like this:

Hope this helps someone out there in the WWW.