为什么此 Blazor 应用程序中的组件无法呈现？答案

【问题标题】：Why would components in this Blazor app fail to render?为什么此 Blazor 应用程序中的组件无法呈现？
【发布时间】：2018-08-22 17:47:15
【问题描述】：

我正在编写一个 Blazor 应用程序，显然我想在其中渲染一些组件。我刚刚尝试在我的主布局中添加一个基本的导航元素，但它没有呈现。我可以在 DOM 上看到该元素，但该元素是空的。

我在我试图包含在 MainLayout.cshtml 中的 NavMenu 组件中开始使用一些相当简单的内容：

<h1>WHYYYY????</h1>

我还在 MainLayout.cshtml 页面上做了一个非常简单的布局：

@inherits BlazorLayoutComponent


<NavMenu />

<div class="body-content">
    @Body
</div>

我的项目中的文件结构似乎并不复杂：

所以我对我忽略的内容感到茫然。看起来 Blazor 知道它应该向页面呈现某些内容 - 这就是为什么我可以在 DOM 中看到 NavMenu 元素的原因。但是该元素内永远不会呈现任何内容。缺少什么？

我正在运行最新（在撰写本文时）版本的 Blazor：0.5.1。

【问题讨论】：

我应该补充一下：我还尝试在其他页面（例如 /Pages/Index.cshtml）中添加 <NavMenu /> 组件，结果相同。
可以分享一下NavMenu的代码吗？
好的。我得到它。 NavMenu 仅包含
?
我正在尝试重现这一点，但我能想到的一切仍然在我身边。您能在某处分享您的完整项目吗？
但首先，请检查我下面的答案，一定是这样。

标签： asp.net-core blazor

【解决方案1】：

您可能遇到了 .csproj 文件的错误。它应该是这样的：

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
   <TargetFramework>netstandard2.0</TargetFramework>
   <RunCommand>dotnet</RunCommand>
   <RunArguments>blazor serve</RunArguments>
   <LangVersion>7.3</LangVersion>
</PropertyGroup>

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.5.1" />
  <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.5.1" />
  <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />
</ItemGroup>

你的很可能有额外的东西，这会阻止组件编译。这通常在添加文件或复制文件时发生。见：https://github.com/aspnet/Blazor/issues/1206

【讨论】：

好建议！今晚我会重新检查一下，因为我确定您的思路是正确的 - 我在 ItemGroup 部分的项目中添加了一些内容。
不。我已经完成了一些清理工作，除了项目参考之外，proj 文件看起来基本上与您在此处描述的一样。看起来你引用的 Github 问题仍然很活跃，这是一个已知问题 - 只是与我看到的不同的潜在症状。
这让我很好奇..你能在某处分享代码吗？
不容易。不过，很高兴将此对话转移到聊天中进行讨论。

【解决方案2】：

事实证明，根本原因与命名空间和大小写有关。

当我最初设置项目时，我使用 VS Code 中的命令行创建了它。出于习惯，我将所有内容都写成小写（即dotnet new blazor -o myapp）。

作为个人喜好，我喜欢我的命名空间是标题大小写，所以一段时间后我决定“整理”并将myapp 更改为Myapp。我通过代码重构了新的标题名称并编译了所有内容，所以我继续工作......直到几周后我回去对一个组件进行一些工作并注意到它没有表现出来。

事实证明，razor 页面会根据文件夹自动命名空间，其中的一个子集包含在 _ViewImports.cshtml 页面中。该文件仍然引用小写命名空间，并且寻找小写项目根目录的页面不再能够找到正确的共享组件。

所以不出所料，这完全是一个自己造成的问题，是的，我觉得从一开始就没有正确考虑它很愚蠢。

【讨论】：