SPA Module Development
Single-Page Application (SPA) frameworks are a newer alternative to server-side web development frameworks such as ASP.NET. SPA replaces the full-page updates of server-side frameworks, with small targeted updates of select page elements. This lightweight approach results in a faster and more responsive UI.
DNN's SPA module type simplifies the creation of modules that simulate traditional SPA applications and that use AJAX for all server interactions.
The SPA module framework supplements other SPA frameworks, such as AngularJS, Knockout, and React, by providing DNN-specific functionality.
SPA Module Architecture
When a DNN page is requested, the framework looks up the requested module control in the module definition. In an SPA module, the module control identifies a specific HTML file. DNN tokens in the HTML file are replaced with site-specific data before the HTML is injected into the page.
Building SPA Modules
You can choose to build the SPA module with all presentation layer code in one project and all server-side code in a separate project. This approach makes it easy to use different development tools that are optimized for server-side or client-side development.
Alternatively, you can use Visual Studio to create a single project that includes both server-side and client-side components. This approach leverages the MS Build system to easily package your module as part of your development process. The DNN SPA module template is set up for this approach.
Accessing DNN Features
Web Forms and MVC modules can easily access rendering-related DNN features because they are both server-side technologies. SPA modules use client-side technology and, therefore, require a different approach to access DNN features. Because a SPA module uses standard HTML, DNN provides custom tokens that can be included in the HTML to access data and APIs.
The following SPA module tokens can be used in your HTML:
- CSS registers a stylesheet with the Client Resource Manager.
- AntiForgeryToken includes an anti-forgery token in the page to prevent Cross-Site Request Forgery (CSRF) attacks.
- ModuleAction identifies custom module actions.
- Resx includes a localized resource string in the page.
- Request includes the page-request query string in the page.
- ModuleContext includes a DNN module context property in the page. Supported module context properties include:
- SettingName. You can access a specific module setting by using the setting name, instead of a predefined property name.