如何在现有Moryx 8项目中添加Web UI页面？是否有更优方案？

我目前正在维护一个现有Moryx 8项目，需要添加一个新页面：在左侧导航栏新增项，展示可与系统数据交互的HTML页面，初期先显示项目资源信息。

我曾尝试的操作：

• 研究Moryx官方页面的设计配置方式，遍历多个项目未找到有效信息
• 排查csproj文件中隐藏/排除的文件，无收获
• 尝试集成新Angular项目但未成功，因为Angular CLI不生成csproj文件

目前找到的可行方案是集成Razor页面，在解决方案内新建项目并添加cshtml页面，代码如下：

@page
@using Microsoft.AspNetCore.Authorization;
@using Moryx.Asp.Integration
@using System.ComponentModel.DataAnnotations
@using Moryx.DigitalPrinter.Web.MyFeature.Pages

@{
    ViewData["Title"] = "Printer Maintenance";
    ViewData["BaseRef"] = "print/";

    Layout = "_Layout";
}

@attribute [WebModule("Maintenance", "print")]
@model Page1Model

<!DOCTYPE html>

<style>
   
   // Style-Code here...
   
</style>

<html>

   // HTML-Code here...

</html>

现咨询：该方式是否为Moryx 8中添加Web UI页面的合适方案？是否有更推荐的实现方式？

1. Razor页面方案的合理性 #

你当前使用的Razor页面方案完全符合Moryx 8的Web集成规范，是可行的方案：

• 代码中使用的[WebModule]特性是Moryx Asp.Integration模块的标准API，负责将页面注册到系统的左侧导航栏，配置参数（名称、路由前缀）正确的话能自动完成导航项添加
• Razor页面天然支持与ASP.NET Core后端的交互，后续对接系统数据、实现业务逻辑非常方便
• 复用系统的_Layout布局能保证新页面与现有UI风格统一，无需额外适配

需要注意的细节：

• 确保[WebModule]的第二个参数（路由前缀）和ViewData["BaseRef"]保持一致，避免路由冲突
• 模型类Page1Model需继承ASP.NET Core的PageModel，按需添加数据加载、表单提交等后端逻辑

2. 更推荐的实现方式 #

如果后续页面需要复杂的前端交互（比如多组件复用、大量异步数据请求），推荐以下两种更适配的方式：

方式一：SPA静态资源集成 #

Moryx 8支持将Vue/Angular/React等SPA项目的构建产物作为静态资源嵌入到现有Web项目中：

1. 完成Angular项目的开发后，执行ng build生成构建产物（默认在dist目录）
2. 在现有Moryx Web项目的wwwroot目录下创建子目录（比如wwwroot/print-maintenance），将构建产物复制到该目录
3. 创建一个Razor页面作为SPA的入口，复用_Layout布局，在页面中引入SPA的入口脚本和样式
4. 给该Razor页面添加[WebModule]特性，完成导航栏注册
5. 如需对接后端数据，可直接调用Moryx系统提供的REST接口，或在现有Web项目中新增API控制器

这种方式既保留了SPA的前端开发体验，又能完美集成到Moryx的Web体系中，无需为Angular项目单独生成csproj。

方式二：基于Moryx Web组件库开发 #

Moryx提供了一套基于Bootstrap的内置Web组件库，结合Razor Pages或MVC视图使用：

• 直接复用系统已有的布局、样式和组件，减少UI风格差异
• 借助Moryx Asp.Integration模块提供的标签助手，简化权限控制、数据绑定等逻辑
• 开发效率更高，且能保证与系统其他页面的交互一致性

内容的提问来源于stack exchange，提问作者Bastyy