将 AddRazorRuntimeCompilation() 添加到 .NET CORE 6 中的容器会破坏 CSS 页脚

Question

我使用 VS 2022 和 .NET Core 6 创建一个全新的 ASP.NET Core MVC 项目。 VS 将生成基本模板，当我在不接触任何代码的情况下运行它时，一切都很好。

到目前为止一切顺利。

现在我添加 NuGet 依赖项 Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 版本 6.0.0。

在 Program.cs 文件中，我添加一行

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages().AddRazorRuntimeCompilation(); //Add this line of code
var app = builder.Build();

重建程序并运行它。现在我看到页脚不再位于页面底部了。

这是一个错误还是我在这里做错了什么？谢谢。

Answer 1

我也遇到同样的问题
在尝试

Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

nuget 包的版本时，找到了 5.0.13 版本的解决方案。

如果您将软件包从 6.0.1 降级到 5.0.13，问题就会消失，页脚将再次位于底部。

Answer 2

发生的情况是，当您启用运行时编辑时，内置的 .NET Core 捆绑包和缩小功能将被删除。如果您查看

shared/_layout.cshtml

，就会有一个

_layout.cshtml.css

文件。这是您缺少的运行时捆绑包/包含文件。由于这是您的核心布局，因此将此文件中的内容移动到您的

wwwroot/css/site.css

文件中，页脚和其他元素将像以前一样呈现。

Answer 3

在 Visual Studio 2022 中，有一个

hot reload on file save

选项。这解决了我的问题，无需安装

Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

Answer 4

您是否打算实际使用RazorPages？看起来您只是想将运行时编译添加到标准 MVC 视图中。

如果您打算使用控制器和视图，只需添加：

builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

但是，我也尝试了您的代码，并且在我的环境中，即使我将 Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 从版本 6.0.1 降级到 6.0.0，页脚在两种情况下都存在。

Answer 5

安装 Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 版本 5.0.17 Nugget Package 为我清除了错误。 您可以尝试安装 5.0.0 - 5.0.17 之间的任何版本

Answer 6

我认为没有必要添加运行时编译，因为在最新的更新/版本中热重载已经正式发布了。

PS。我目前正在学习 ASP.NET 教程，并且遇到了这个问题。这是链接：https://youtu.be/hZ1DASYd9rk

Answer 7

我正在观看与您相同的视频系列，并且我遇到了相同的错误。我将 Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 升级到 v6.0.11，我不再收到任何错误

Answer 8

我有同样的问题，但我找到的解决方案是： 在 Site.cs 文件或 _layout 文件中添加此 Css 代码： 在 site.css 中：

    body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    }
    .footer {
    text-align: left;
    padding: 1rem;
    background-color: #f8f9fa;
    margin-top: auto;
    }

  Or in _Layout.cshtml
 in head section add style tag:
    <style>
         body {
           display: flex;
           flex-direction: column;
           min-height: 100vh;
           margin: 0;
         }
        .footer {
           border-top: 1px solid #ddd;
           text-align: left;
           padding: 1rem;
           background-color: #f8f9fa;
           margin-top: auto;
        }
    
    </style>

并将页脚恢复到正确的位置，如果您有其他解决方案请提及

谢谢