SPA模块开发

概述

单页申请(SPA)框架是服务器端web开发框架(如ASP.NET)的更新选择。SPA将服务器端框架的全页更新替换为选择的页面元素的小型目标更新。这种轻量级方法可以产生更快、响应更灵敏的UI。

DNN的SPA模块类型简化了模拟传统SPA应用程序和使用AJAX进行所有服务器交互的模块的创建。

SPA模块框架通过提供特定于dnn的功能来补充其他SPA框架，如AngularJS、Knockout和React。

SPA模块架构

在SPA模块中，每个HTML文件加载必要的JavaScript和CSS以正确呈现UI。SPA模块还通过服务层对业务层进行AJAX调用。此体系结构类似于Web Forms模块的移动应用程序架构．

当一个DNN页面被请求时，框架在模块定义中查找被请求的模块控件。在SPA模块中，模块控件标识一个特定的HTML文件。在将HTML注入页面之前，HTML文件中的DNN令牌将被特定于站点的数据替换。

构建SPA模块

与MVC模块相比，在构建SPA模块时，您有更多可用的开发选项。服务器端代码可以在Visual Studio中创建为Web应用程序项目(WAP)或Web站点项目(WAP)类型。(见Web应用程序项目vs . Visual Studio中的Web站点项目)。因为表示层是用纯HTML、JavaScript和CSS创建的，所以可以使用任何代码编辑器构建其组件。

您可以选择在一个项目中使用所有表示层代码构建SPA模块，而在一个单独的项目中使用所有服务器端代码。这种方法可以很容易地使用针对服务器端或客户端开发进行优化的不同开发工具。

或者，您可以使用Visual Studio创建包含服务器端和客户端组件的单个项目。这种方法利用MS Build系统轻松地将模块打包为开发过程的一部分。为这种方法设置了DNN SPA模块模板。

访问DNN特性

Web Forms和MVC模块可以很容易地访问与渲染相关的DNN特性，因为它们都是服务器端技术。SPA模块使用客户端技术，因此需要不同的方法来访问DNN功能。因为SPA模块使用标准HTML，所以DNN提供了可以包含在HTML中以访问数据和api的自定义令牌。

下面的SPA模块令牌可以在你的HTML中使用:

• JavaScript或JS向客户端资源管理器注册一个JavaScript文件。
• CSS向客户端资源管理器注册一个样式表。
• AntiForgeryToken在页面中包含一个防伪造令牌，以防止跨站请求伪造(CSRF)攻击。
• ModuleAction标识自定义模块操作。
• Resx在页面中包含本地化的资源字符串。
• 请求在页中包含页请求查询字符串。
• ModuleContext在页面中包含DNN模块上下文属性。支持的模块上下文属性包括:
  • ModuleId
  • TabModuleId
  • 衰弱的
  • PortalId
  • IsSuperUser
  • 编辑模式
  • SettingName．您可以通过使用设置名称访问特定的模块设置，而不是使用预定义的属性名称。