My Cart (0)  |  My Orders  |  My Downloads  |  My Auction  |  My Account  |  Help

Login |Register        Search

DNN 8 Module Development 3 - Introduction to SPA modules

                Print      Add To Favorite     Add To Watch List     Contact Author

Creator: host   6/7/2016 4:17:20 AM    Author: Charles Nurse   Source:   Views: 1486    0    0  
Module develop DNN 8 SPA

In addition to ASP.NET MVC modules, DNN 8 will support SPA (Single Page Application) modules, developed purely with HTML JavaScript and Css, together with ASP.NET Web API based Web Services on the Web Server.  DNN currently supports this module type – to a degree - but the HTML is required to be in the WebForms User Control.  A number of the newer modules have been built this way, for example the Core Messaging module and Membership modules found in the User Profile are built in this way.

In DNN 8 the requirement to use User Controls or a Razor script is removed.  Module Controls can be pure HTML files with the extension .html or .htm, and the Module injection framework will load the html into an HtmlHostControl in a similar way to how MVC modules are handled.

Setting up your Environment

We still need to create a Visual Studio project to hold our Web API classes, so the environment setup is similar to what we used for MVC modules.  In my project which is available on Github I have both modules in the same solution, so add a new Web ApplicationProject to your solution called Dnn.ContactList.Spa, choose the Empty template (1) and select Web API (2) so that the Web API references are added to your project.

Figure 1 – Creating a Web API project

As before we will be adding the same default files including a module.css file, a file and a DNN manifest file.  In addition we will need an HTML file (ContactList.html) and a JavaScript file (ContactList.js).

After adding these files and removing the unnecessary files and folders created by the template you should have something like Figure 2.

Figure 2 – The Dnn.ContactList.Spa project

There is not much to comment on in this setup. SPA modules controls The manifest looks like any normal manifest except the controlSrc property has a .html extension.  As with MVC modules the manifest should include a dependency node to indicate that the CoreVersion should be 8.0.0 or higher (see Figure 3)

Figure 3 – Sections of the Manifest file of note

 <dependency type="CoreVersion">08.00.00</dependency>


The main addition in this setup is the inclusion of the JavaScript file (ContactList.js).  This file is not required – the JavaScript can live in a different file or even in the HTML file itself, but by convention a JavaScript file with the same root name as the HTML file is automatically registered (if present)and the link added to the top of the form.  Other JavaScript files can also be registered, which will be discussed in a future post.

That's it for our SPA module development environment.  In the next blog post I will show how to display a list of Contacts in a SPA module.

For more information

Rating People: 0   Average Rating:   is built to provide DNN quality modules and DNN skins, some of them are free, some not. We wish these stuffs (free or not ) can be useful to you.

     Besides that, we also provide a full range of professional services, ranging from web site build, seo, system management, administration, support, senior consultancy and security services. We act as if your development project or network was ours, with care and respect. We are not satisfied until it works the way you want it to, and we don't silently ignore found issues as somebody else's problem.