While there are some guides available that give you similar information, I found it a bit difficult to get started developing MVC modules in DNN. For reference, the articles I used are at the bottom of this blog.

Here’s an overview of the steps we’ll take to get started.

1. Prerequisites
2. Templates
3. Setup
4. Build
5. Installation
6. Next Steps
7. References

1. Prerequisites

For this quick start, you’ll need a few things before we can dive in.

First, you’ll need to have Visual Studio 2015 installed. The express editions have been reported to be incompatible with the templates we’ll be using later, but this may not be true by the time you’re reading this.

Next, you’ll need to have IIS (Internet Information Services) setup with a local installation of DNN (version 8 or higher). There are many tutorials on how to do this around the web. You’ll need to install IIS and Microsoft SQL Server, then you can install DNN by downloading the latest _install.zip from DNN’s GitHub releases.

Once those are all set up, you’re ready to go.

2. Templates

You could create a module from scratch. But why would you do that when a DNN expert created templates for you to use? Download the templates from the Visual Studio Gallery and run through the installation procedure.

3. Setup

Now that everything is set up, we can actually dive into creating the module. 

In Visual Studio, select File -> New -> Project

In the New Project window, select Templates -> Visual C# -> DotNetNuke and you’ll see a listing of the types of projects the templates have provided.

To create an MVC module, we’ll select DotNetNuke 8 C# DAL2 MVC Module. There are three other fields we must configure: Name, Location, and Solution name.

Name: Enter a name for your project (it’s best not to use any spaces or special characters for this)

Location: This is important to point this to the correct folder in DNN: /DesktopModules/MVC/. Depending on your installation directory, the folder should be something like C:\Dev\Projects\DMC_Website\Alpha\DesktopModules\MVC\ where “Alpha” is the root of your DNN installation.

Solution name: We’re not actually going to be using this field. Uncheck the box on the right that says “Create directory for solution” and the solution name textbox will be greyed out.

Confirm your settings look similar to mine and then click OK.

A Project Setup Wizard dialog box will appear asking for some project information. Many of these are self explanatory, so I will only address the two that are a bit tricky.

Namespace: Whatever namespace you want your module to live in. The templates will automatically include your project name in the namespace, so no need to enter it here. Make sure you include the last period. E.g. DMC.

Local Dev URL: By default this is set up to point to dnndev.me, which is actually set up to point back to 127.0.0.1 (your localhost). What you enter here depends on what settings you’ve set your DNN install up with. For my installation, I access my local DNN install through http://localhost./ Therefore, I am going to enter localhost as my Local Dev URL.

Initial values

Updated values (note: the owner website field includes https:// but the textbox isn’t large enough to display it. Be sure to include it in your URL.)

Once all fields have been complete, click OK.

4. Build

Now that the initial project setup is complete, you’ll be presented with a web page in Visual Studio that says * Important *. These are steps that you should read carefully and follow to ensure your project will work correctly. I’ll provide a quick overview of these steps in case the original wording is confusing for anyone.

First, check IIS to see if any of your folders were converted to virtual directories or applications. To do this, open IIS, expand your site’s dropdown and check what icon is displayed next to your DesktopModules folder or the MVC folder inside of the DesktopModules folder. If it’s anything other than a yellow folder, right click it and click remove.

Next, in Visual Studio, right click and delete the web.config files that are in the solution.

You can now build the module! change the solution configuration dropdown from Debug to Release and then select Build -> Build

You’ll get an install .zip file in your module’s install/ directory.

5. Installation

Now, in DNN, go to Hosts -> Extensions and click Install Extension, selecting your install .zip file that you previously built.

If everything goes well, then the module is now installed and can be placed on any page.

6. Next Steps

Once you’ve dragged the module into a page, you’ll see a demo application that includes multiple views, database interaction, and more. Simply build the project in debug mode to automatically copy the new DLL to the /bin folder.

7. References

• Chris Hammond’s DNN posts
• DNN Community Blogs
• DNN MVC Module Development

While you’re here, check out DMC’s Web Application Development and ASP.NET & ASP.NET MVC Development services so we can get started on your next DNN MVC module!

The post 6 Easy Steps to Get Started with MVC Module Development in DNN 8 appeared first on DMC, Inc..

Tools

• Ruby
• Sass (or Less)
• Node.js
• npm
• Bower
• Grunt or gulp

Ruby

We won’t be using Ruby as a programming language, but we will be needing it to install SASS.

If you’re on Windows, download the latest version of Ruby

If you’re on Linux or OS X, there are instructions you can follow

Or, after installing cURL, run this in a terminal window:

\curl -sSL https://get.rvm.io/ | bash

\curl -sSL https://get.rvm.io/ | bash

Once Ruby has finished installing, no matter what platform you’re on, open a terminal window and run

ruby -v

ruby -v

to ensure it has installed properly.

Sass (Syntactically Awesome Style Sheets) or Less

Sass is basically CSS with a ton of awesome features layered on top. Using Sass, which compiles to clean and efficient CSS, one can make use of extended abilities like variables, mixing, inline imports, and more.

There is another CSS extension called Less, which is an alternative to Sass. I prefer Sass, but you could definitely adapt this tutorial to work with Less as well.

Anyhow, now that Ruby is installed and ready to go, installing Sass is easy.

In a terminal window, type

gem install sass

gem install sass

Once that is finished, run

sass -v

sass -v

to ensure it has installed properly.

Node.js

Node.js is tool that allows one to write simple JavaScript programs that create powerful applications.

We’ll be using Node.js to power npm (node package manager), Bower, and Grunt.

Grab the proper download for your platform

To install Node.js on Windows or OS X, simply run the installers.

On Linux, you can build Node.js by using these steps:

Extract the downloaded archive and open a terminal window

1. Navigate to where you extracted the archive

2. Run

./configure

./configure

3. Run and wait patiently

make

make

4. Run

sudo make install

sudo make install

And you’ll be all set with Node.js.

npm

npm is the official package manager for Node.js. What this means is that using npm, one can install hundreds of different applications and tools that are built with Node.js.

We’ll be using npm to install Bower and Grunt.

npm comes installed with Node.js, so there are no additional steps required to install it.

Bower

Bower, much like npm, is a package manager. However, npm only deals with Node.js packages while Bower titles itself “a package manager for the web.” Using Bower, one can run a simple terminal command to download and install many different web libraries or frameworks, such as jQuery, Bootstrap, FontAwesome, and more.

To install Bower, open a terminal window and type:

npm install -g bower

npm install -g bower

(The -g flag is to install bower globally, so we can call it from the command line anywhere)

Grunt or gulp

Grunt is a task runner that performs the time-consuming, repetitive tasks that come along with website development like minification, SASS compilation, and more. 

Thanks to npm, Grunt is just as easy to install as Bower:

npm install -g grunt-cli

npm install -g grunt-cli

gulp (don’t you ever capitalize that g) is a similar tool that should provide better performance than Grunt because it uses Node.js’s streams.

npm comes in handy once again. Install gulp with:

npm install -g gulp

npm install -g gulp

Beginning Automation

Now that we have all of the tools we need to begin, we can finally start creating an automated build system.

There are tasks associated with web development that quickly become repetitive and mundane. Thankfully, we will no longer have to do these manually!

The tasks that we can now automate are (in no particular order):

• Sass (or Less) compilation (converting our Sass or Less to standard CSS)
• Concatenation (combining multiple files into one)
• Minification (smushing text together to reduce the size, making it load faster)
• Linting (automatically checking code for errors)
• Copying of files (like fonts)
• Adding vendor-specific prefixes to our CSS (ensuring compatibility across browsers)
• Detecting features that we require a user’s browser to have
• More that I can’t think of!

And best of all, the build system will be smart enough to understand when a particular file changes to prevent rebuilding the entire thing.

Stay tuned for the next article! For now, you can always take a look at DMC’s Web Application Development services, where we can harness the technologies outlined above for your needs.

The post Automating Web Development – Tools appeared first on DMC, Inc..

using System;

namespace MyNameSpace
{
    class HelloWorld
    {
        static void Main(string[] args)
        {
            Console.WriteLine ("Hello World");
        }
    }
}

using System;

namespace MyNameSpace
{
    class HelloWorld
    {
        static void Main(string[] args)
        {
            Console.WriteLine ("Hello World");
        }
    }
}

Special thanks to Alex Gorbatchev for creating such a handy open source code highlighter module.

The post DMC’s Blog Now Features a Nifty Code Syntax Highlighter appeared first on DMC, Inc..

One issue we had to overcome involved centering images of varying or unknown size. We use a content rotator module on our website. There are numerous content rotator modules available for Dot Net Nuke. The content rotator we used comes from a company called MexMax.

You will notice on our home page that we use this content rotator to scroll through our list of clients. To make the layout pleasing to the eye, we had to center all of the images. If you search for a tutorial on how to do this, you will find that they all involve hard coding in height values and assume that you know the size of your image and the size of the space you are trying to fit it in. We could have used this and gone the route of always forcing the client logos to be the same size, but I wanted something more modular.

Here is what we came up with:

We wrapped the image in four separate divs and gave each div a class name:

<div class="RotatorImgCenterWrap1">
    <div class="RotatorImgCenterWrap2">
        <div class="RotatorImgCenterWrap3">
            <div class="RotatorImgCenterWrap4">
                <aink.aspx
                    <img
                        src="/Image.jpg"
                        width="175"
                        height

<div class="RotatorImgCenterWrap1">
    <div class="RotatorImgCenterWrap2">
        <div class="RotatorImgCenterWrap3">
            <div class="RotatorImgCenterWrap4">
                <aink.aspx
                    <img
                        src="/Image.jpg"
                        width="175"
                        height

Next we set the CSS for each class as follows:

div.RotatorImgCenterWrap1 {
}

div.RotatorImgCenterWrap2 {
    display: table;
    height: 100%;
    width: 100%;

    /* Old IE hacks */
    #position: relative;

    overflow: hidden;
}

div.RotatorImgCenterWrap3 {
    /* Old IE hacks */
    #position: absolute;
    #top: 50%;

    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

div.RotatorImgCenterWrap4 {
    /* Old IE hacks */
    #position: relative;
    #top: -50%;

    width: 100%;
    text-align: center;
}

.RotatorImgCenterWrap4 img {
    vertical-align: middle;
}

div.RotatorImgCenterWrap1 {
}

div.RotatorImgCenterWrap2 {
    display: table;
    height: 100%;
    width: 100%;

    /* Old IE hacks */
    #position: relative;

    overflow: hidden;
}

div.RotatorImgCenterWrap3 {
    /* Old IE hacks */
    #position: absolute;
    #top: 50%;

    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

div.RotatorImgCenterWrap4 {
    /* Old IE hacks */
    #position: relative;
    #top: -50%;

    width: 100%;
    text-align: center;
}

.RotatorImgCenterWrap4 img {
    vertical-align: middle;
}

I’ll give a brief explanation as to how this works. First, the outer most div, RotatorImgCenterWrap1, is a ‘throw away’ div. This is necessary because the content rotator we used overwrites the style of this outermost div; this is just how the module works. It forces the following styles, which, as you can see, causes us some issues with what we are trying to do:

position: absolute; top: 0pt; left: 0pt; display: block;

Next we have TotatorImgCenterWrap2, which we set to table display (we are going back to the old school methods for this). Note that the # is in front of styles that we only want applied to IE. (IE and Firefox cross compatibility always seems to come into play when you are doing something tricky in CSS). The purpose of this div is largely to create a non-relative div that we can center objects in.

RotatorImgCenterWrap3 is positioned to be a table-cell beginning at 50% of the way down from the top of RotatorImgCenterWrap2. This is done with the position: absolute and top: 50% styles in IE. The vertical-align: middle in other browsers positions this in a slightly different place: the exact middle, which is where we want it..

Finally, we have RotatorImgCenterWrap4. This is really only necessary to finish off the IE fix; we have the divs centered on other browsers at this point. This is done by moving the top position 50% above (top: -50%) and outside of the previous div.

The only style needed for centering horizontally is text-align: center;.

We just threw this together so I am curious if others have improvements (do I have unnecessary steps that could be removed?) or are aware of simpler ways to do this.

The post CSS and How to Center Images of Unknown Size appeared first on DMC, Inc..

If I had a dollar for every time I had to re-enter my shipping address because I used my back button when the site creator didn’t want me to… well I’d have enough dollars to make the mistake a few more times, probably buying robot parts on SparkFun .

Amazingly though, adding JavaScript code to your ASPX page to prevent this is almost trivial once you know what you’re doing (the previous link is for reference only… if you haven’t heard of JavaScript, you’ve been in a coma since the late 90’s). JavaScript lets you fire the special “onbeforeunload” event before the data is lost on the page, something that you can’t really do using code behind.

This event lets you warn the user before they navigate away from the page via clicking the explorer back button, following a link on the page, or even by closing the browser window! For more details of the ‘onbeforeunload’ event, see my previous blog.

Assign the appropriate JavaScripts to your page controls (guidelines are shown in the tables below):

Finally, copy this code onto the bottom of you ASCX page:

<div style="display: none;">
    <asp:CheckBox ID="chkShowWarning" runat="server" />
</div>

<script type="text/javascript">

    var bShowWarning = false;
    var bPostBack = false;

    function DataEdit() {
        bShowWarning = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function PostBack() {
        bPostBack = true;
    }

    function DataEditWithPostBack() {
        bShowWarning = true;
        bPostBack = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function DataSave() {
        bShowWarning = false;
        bPostBack = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function LoadWindow() {
        bShowWarning = document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked;

        bPostBack = false;
    }

    function UnLoadWindow() {

        if (!bShowWarning || bPostBack) {
            return;
        }

        return "If you leave the page your data will be lost.";
    }

    window.onbeforeunload = UnLoadWindow;
    window.onload = LoadWindow;

</script>

<div style="display: none;">
    <asp:CheckBox ID="chkShowWarning" runat="server" />
</div>

<script type="text/javascript">

    var bShowWarning = false;
    var bPostBack = false;

    function DataEdit() {
        bShowWarning = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function PostBack() {
        bPostBack = true;
    }

    function DataEditWithPostBack() {
        bShowWarning = true;
        bPostBack = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function DataSave() {
        bShowWarning = false;
        bPostBack = true;

        document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked = bShowWarning;
    }

    function LoadWindow() {
        bShowWarning = document.getElementById(
            '<%= chkShowWarning.ClientID %>'
        ).checked;

        bPostBack = false;
    }

    function UnLoadWindow() {

        if (!bShowWarning || bPostBack) {
            return;
        }

        return "If you leave the page your data will be lost.";
    }

    window.onbeforeunload = UnLoadWindow;
    window.onload = LoadWindow;

</script>

If you’ve done everything right, your application should now show a pop-up warning if and only if you try to navigate away from the page after editing a control and before saving.

Learn more about DMC’s software and web development services.

The post Capture the Browser Back Button – JavaScript Snippets appeared first on DMC, Inc..

The onbeforeunload event behaves a bit oddly for an event. Basically in your event handler function, if you return anything, the event will pop up a message box with whatever you returned sandwiched between “Are you sure you want to navigate away from this page?” and “Press OK to continue, or Cancel to stay on the current page.” Here is an example:

If, however, your function doesn’t return anything, no warning will show up (but the page is removed from cached memory so you can’t navigate back to it.) This provides a very nice tool for alerting users. All your function needs to do is to check if data has been edited and if so, return an appropriate string. The window prompt and warning will then be handled for you by the onbeforeunload event.

The function is extremely easy to use. In the “<script type=”text/javascript”>“ section at the end of an ASPX page you just need to assign a function to the “window.onbeforeunload” event. Below is a complete snippet (the JavaScript variable bEdited is set outside of this snippet to true if data on the form has been edited.)

var bEdited = false;

function UnLoadWindow()
{
    if (!bEdited)
    {
        return;
    }

    return "DMC strongly recommends NOT closing this window yet.";
}

window.onbeforeunload = UnLoadWindow;

var bEdited = false;

function UnLoadWindow()
{
    if (!bEdited)
    {
        return;
    }

    return "DMC strongly recommends NOT closing this window yet.";
}

window.onbeforeunload = UnLoadWindow;

Learn more about DMC’s software and web development services.

The post Using the JavaScript ‘window.onbeforeunload’ Event appeared first on DMC, Inc..

Of course, a client side fix is never a user-friendly fix. Thankfully there is a meta tag that can be added to your site to force IE8 to automatically go into compatibility mode.

Our page is built in Dot Net Nuke. The appropriate way to apply this fix for DNN is to add the tag to the default.aspx file that is found in the root directory of your Dot Net Nuke website. Any meta tag that is placed in here should be applied to all pages to your website. Add the tag below at the top of the head section of the default.aspx file.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Note that the tag must be placed at the top of the head section. Also, be aware that updates of your DNN framework will overwrite this change.

This is more of a short-term fix. In the long run, we will want to determine exactly what is causing these issues and get the pages to display appropriately in the new IE8 engine.

Thanks to Ty Seddon of CogniVista and Sebastian Leupold who contributed to this fix and Tim Warr, for posting about the meta tag for IE8.

Learn more about DMC’s software and web development services.

The post Forcing IE8 Compatibility Mode in Dot Net Nuke appeared first on DMC, Inc..

Implementing the new website required efforts in many disciplines: graphic design and image editing, ASP.NET, CSS, html, marketing and writing. Needless to say, we've picked up a few new tricks along the way. Over the next few weeks I plan to blog about a few of these interesting tips and tricks.

We still have plans for several changes and improvements to our new site.

Thanks to all of the DMC team that assisted in this effort. I also would like to thank Ty Seddon of CogniVista. He is a consultant that assisted us on a few bits of the technical implementation of the new website.

The post DMC Launches New Website appeared first on DMC, Inc..