使用 Polymer 构建 ASP.NET MVC答案

【问题标题】：Architect ASP.NET MVC with Polymer使用 Polymer 构建 ASP.NET MVC
【发布时间】：2017-02-20 14:59:49
【问题描述】：

我已经使用 ASP.NET MVC 和 Polymer 构建了 3 个应用程序，但我总是遇到同样的架构问题。

目前，如果我想将 MVC 视图与 Polymer Web 组件分开，我最终会得到这样的结构：

 - wwwroot
  - bower_components (polymer)
  - elements (my components)
 - View (my views)
 - Controllers (my controllers)

然后，如果我必须解析特定视图，例如： http://mydomain/home/index 我最终会得到类似的东西：

 - Controller > Home
 - Action > Index
 - View > Index.cshtml
 - Element > paper-page-index.html

来自我的 Index.cshtml

<!-- import the element -->
<link rel="import" href=".../paper-page-index.html" />
<!-- render the element and pass properties -->
<paper-page-index first-name="@Model.FirstName"></paper-page-index>

问题是我必须将 ViewModel 的每个属性都传递到自定义元素中，这变得非常冗长，有时甚至很无聊。正确的方法应该是什么？每个 .cshtml 视图都应该被视为一个 Web 组件并停止创建 Web 组件本身并将它们包含到我的 .cshtml 页面中？或者我应该像 Martin Fowler 所说的那样使用两种 GET 方法：

一个 GET 检索我的视图（Controller/Action/.cshtml 页面）
一个 GET 从 MVC 中检索 ViewModel

我的表示逻辑也应该只放入我的 Polymer 元素或也放入我的 C# ViewModel 中？

有什么线索吗？

【问题讨论】：

也许你应该放弃 MVC 并使用 Polymer 作为 SPA 应用程序的表示层。 C# 用于后端，Polymer 用于前端。这将是更清洁、更可维护的架构。我什至建议将代码存储为两个不同的存储库（前端、api）。
基本上我的意思是：抛弃 MVC 中的视图，将其用作纯 API。完全删除 wwwroot 和 Views 文件夹。事实上 - 仅作为 API 启动项目。或者更好的是，使用 .NET Core。
是的，你不要把东西混在一起。此外，它还为移动应用程序等扩展/使用相同的 api 提供了可能性。如今，这是要走的路。
我不会从 .NET 提供静态 HTML，我只会使用一些简单的 HTTP“测试”服务器进行测试，使用 nginx/caddy/iis/apache/whatever 进行生产。如果您只是提供静态文件，为什么还要使用 .NET。
如果您真的需要保护 HTML，那么也许可以。但我没有看到 HTML 源代码应该落后于授权的情况。 HTML 源代码不会保存 SPA 架构中的任何敏感数据。

标签： asp.net asp.net-mvc asp.net-core polymer-1.0

【解决方案1】：

最后，我决定以这种方式构建项目：

后端

asp.net 核心
控制器公开 REST 方法
使用 asp.net 身份保护

前端

“前端 api”的 asp.net 核心
Polymer 的标准“静态页面”
Polymer 视图的标准“元素”结构

视图按“原样”提供，然后向“前端”api 请求相应的演示模型。然后，它会查询 HTTP REST 端点，以防它需要来自数据存储区/lucene 的数据。

这代表了 M. Fowler 的“两步视图”架构模式，在这里解释：https://martinfowler.com/eaaCatalog/twoStepView.html

优势

我仍然可以使用 ASP.NET Identity 和 OAuth 保护整个前端静态内容
我可以利用 Polymer 构建，因为 Polymer 和 Razor 之间没有严格的关系
我可以将 UI、表示逻辑和业务逻辑完全分离为 3 个不同的区域

【讨论】：