ASP.NET Core 2.1 Angular 6.0 SPA 模板 - 用于索引而不是静态页面的剃刀页面 (cshtml) [英] ASP.NET Core 2.1 Angular 6.0 SPA template - razor page (cshtml) for index instead static page

查看：23
本文介绍了ASP.NET Core 2.1 Angular 6.0 SPA 模板 - 用于索引而不是静态页面的剃刀页面 (cshtml)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将带有 webpack 设置的 ASP.NET Core 2.0 Angular 5 应用程序迁移到 ASP.NET Core 2.1 Angular 6Angular-Cli.

简短问题:

如何使用 Microsoft.AspNetCore.SpaServices.Extensions 强制解析 cshtml 中的 razor 页面指令?

我不想使用 Angular.json 中的 index.html，而是使用 index.cshtml.

详细说明:

我从 Angular 模板.有很多东西可以神奇地起作用.

  1. ClientApp/src 文件夹中有一个 index.html 文件，它是应用程序启动时自动提供.
  2. 当应用程序运行时，在来自 index.html 的 </body> 标签之前(从第一点开始)插入几个脚本:inline.bundle.js、polyfills.bundle.js、vendor.bundle.js、main.bundle.js 和 styles.bundle.css 在 标签之前.

我不确定是谁插入了这些脚本，但我想将它们插入到 Razor 页面 (cshtml).

我尝试使用旧项目中的代码:

<头><base href="/"/><title>@ViewData["Title"]</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><身体>@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}@if (!string.IsNullOrEmpty(googleAnalyticsId)){<脚本>(函数(i, s, o, g, r, a, m){...})(窗口、文档、'脚本'、'https://www.google-analytics.com/analytics.js'、'ga');ga('create', '@googleAnalyticsId', 'auto');}<脚本>@Html.Raw(ViewData["TransferData"])<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" 异步延迟/><script src="https://apis.google.com/js/platform.js" 异步延迟></script><应用程序><!-- 启动后加载布局被app替换p --><div class="页面加载"><div class="bar"><i class="sphere"></i>

</应用程序>

并将Angular.json 中的索引选项指向这个index.cshtml:

 架构师":{建造": {"builder": "@angular-devkit/build-angular:browser",选项": {"outputPath": "wwwroot/dist","index": "Views/Home/Index.cshtml",//<----- 这里

问题是内容(所有@标签)没有被 ASP.NET Core 处理，而是输出直接的内容:

<头><base href="/"/><title>@ViewData["Title"]</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><身体>@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}@if (!string.IsNullOrEmpty(googleAnalyticsId)){<脚本>...

但应该是:

<头><base href="/"/><title>测试标题</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><身体><脚本>

我想将一些变量(来自 appsettings.json)打印到最后的 html 页面.由于我已经在使用 ASP.NET Core，因此 Razor 页面似乎是一个不错的解决方案.

我也尝试过:
添加新的 RazorPage，处理 C# 内容(@ 指令)，但没有人插入 Angular 脚本.

对 AndyCunningham 的回应:

ng build --prod 写入这个文件:

<script type="text/javascript" src="runtime.b38c91f828237d6db7f0.js"></script><script type="text/javascript" src="polyfills.2fc3e5708eb8f0eafa68.js"></script><script type="text/javascript" src="main.16911708c355ee56ac06.js"></script>

到index.html.如何将其写入剃刀页面.

解决方案

我的这个答案基于我在 React SPA 扩展方面的经验，但它也应该对 Angular 有帮助，因为它使用 相同的 ClientApp/index.html 中间件机制，以及相同的 IApplicationBuilder.UseSpa 入口点.

问题是当你使用app.UseSpa(...)时，这个扩展的默认实现配置 一个侦听所有 UI 请求并将它们转发到 index.html 的中间件.

我已经为我们的项目构建了一个快速示例来说明我们如何解决这个问题:https://github.com/andycmaj/aspnet_spa_without_indexhtml/pull/1/files 应该向您展示为了忽略 index.html 并使用剃刀视图而需要更改的内容.

基本上，我重新实现了 UseSpa 的功能，但没有附加拦截和转发到 index.html 的中间件.

请注意，Home razor 视图仍然需要执行 index.html 所做的更重要的事情.最重要的是，它需要 include bundle.js 由 SPA 静态内容中间件提供服务.

I am trying to migrate my ASP.NET Core 2.0 Angular 5 application with webpack setup to ASP.NET Core 2.1 Angular 6 with Angular-Cli.

Short question:

How can I force parsing razor pages directives from cshtml with Microsoft.AspNetCore.SpaServices.Extensions?

I do not want to use index.html from Angular.json, but index.cshtml.

Long description:

I started a new ASP.NET Core project from Angular template. There are quite a few things that just magically works.

  1. There is an index.html file inside ClientApp/src folder which is automatically served when application starts.
  2. When application runs, before </body> tag from index.html (from first point) several scripts are inserted: inline.bundle.js, polyfills.bundle.js, vendor.bundle.js, main.bundle.js and styles.bundle.css before </head> tag.

I am not sure who inserted those scripts, but I want to insert them to Razor page (cshtml).

I tried to use code from my old project:

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>@ViewData["Title"]</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}
@if (!string.IsNullOrEmpty(googleAnalyticsId))
{
    <script>
        (function(i, s, o, g, r, a, m)
        {
           ...
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', '@googleAnalyticsId', 'auto');
    </script>
}
<script>
    @Html.Raw(ViewData["TransferData"])
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" async defer />
<script src="https://apis.google.com/js/platform.js" async defer></script>
<app>
    <!-- loading layout replaced by app after startupp -->
    <div class="page-loading">
        <div class="bar">
            <i class="sphere"></i>
        </div>
    </div>
</app>
</body>
</html>

And point index options in Angular.json to this index.cshtml:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "outputPath": "wwwroot/dist",
            "index": "Views/Home/Index.cshtml",   //<----- here

Problem is that content (all @ tags) is not processed by ASP.NET Core but it outputs direct content:

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>@ViewData["Title"]</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}
@if (!string.IsNullOrEmpty(googleAnalyticsId))
{
    <script>
...

but it should be:

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Test title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <script>

I want to print some variables (from appsettings.json) to the end html page. Since I am already using ASP.NET Core, Razor page seems good solution.

I also try:
to add new RazorPage, C# content (@ directives) are processed, but no-one is inserting Angular scripts.

Response for AndyCunningham answer:

ng build --prod writes this files:

<script type="text/javascript" src="runtime.b38c91f828237d6db7f0.js"></script><script type="text/javascript" src="polyfills.2fc3e5708eb8f0eafa68.js"></script><script type="text/javascript" src="main.16911708c355ee56ac06.js"></script>

to index.html. How to write this to razor page.

解决方案

I'm basing this answer on my experience with React SPA extensions, but it should be helpful for Angular as well, as it uses the same ClientApp/index.html middleware mechanism, and the same IApplicationBuilder.UseSpa entrypoint.

The problem is that when you use app.UseSpa(...), the default implementation of this extension configures a middleware that listens for ALL UI requests and fwds them to index.html.

I've built a quick example of how we get around this for our projects: https://github.com/andycmaj/aspnet_spa_without_indexhtml/pull/1/files should show you what needs to change in order to ignore index.html and use a razor view instead.

Basically, i've re-implemented what UseSpa does, but without attaching the middleware that intercepts and fwds to index.html.

Note that the Home razor view still needs to do the more important things that index.html was doing. Most importantly, it needs to include bundle.js served by the SPA static content middleware.

这篇关于ASP.NET Core 2.1 Angular 6.0 SPA 模板 - 用于索引而不是静态页面的剃刀页面 (cshtml)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆